几个积累的javascript和css的技巧2

时间 2019-11-11

标签几个积累 javascript css 技巧栏目 JavaScript 繁體版

原文原文链接

document.createElement()的用法

document.createElement()是在对象中建立一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 javascript

<div id="board"></div>

<script type="text/javascript">
            var board = document.getElementById("board");
            var e = document.createElement("input");
            e.type = "button";
            e.value = "这是测试加载的小例子";
            var object = board.appendChild(e);
        </script>

appendChildhild和insertBefore均可以进行插入节点的操做。

<div id="test"><p id="x1">Node</p><p>Node</p></div>

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  //测试从这里开始
  //appendChild方法：
  oTest.appendChild(newNode);
  //insertBefore方法：
  oTest.insertBefore(newNode,null);
</script>

insetbefore的第二个参数能够为能够在子节点列表的任意位置 html

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElementById("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,refChild);
</script>

总之， appendChild() 方法在节点的子节点列表末添加新的子节点。 insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

参考文档：http://www.cnblogs.com/penny/archive/2009/01/10/1281293.html java

js中的setTimeout的用法

经常使用的setTimeout的语法有： web

var i=0;
setTimeout("i+=1;alert(i)",1000);

var i=0;
setTimeout(function(){i+=1;alert(i);},1000);

var i=0;
function test(){
       i+=1;
       alert(i);
}
setTimeout("test()",1000);

setTimeout(test,1000);

使用setTimeout达成若干秒后再次执行的功能

var i=0;
function xilou(){
        i+=1;
        if(i>10){alert(i);return;}
        setTimeout("xilou()",1000);
        //用这个也能够
        //setTimeout(xilou,1000);
 }

setTimeout中的this问题

function xilou(){

        this.name="xilou";
        this.sex="男";
        this.num=0;
    }
    xilou.prototype.count=function(){
        this.num+=1;
        alert(this.num);
        if(this.num>10){return;}
        //下面用四种方法测试,一个一个轮流测试。
        setTimeout("this.count()",1000);//A:当下面的x.count()调用时会发生错误：对象不支持此属性或方法。
        setTimeout("count()",1000);//B:错误显示：缺乏对象
        setTimeout(count,1000);//C:错误显示：'count'未定义
        //下面是第四种 
        var self=this;
        setTimeout(function(){self.count();},1000);//D:正确
        
    }
    
    var x=new xilou();
    x.count();

错误分析：
A：中的this其实指是window对象，并非指当前实例对象
B：和C：中的count()和count其实指的是单独的一个名为count()的函数,但也能够是window.count(),由于window.count()能够省略为count()

D：将变量self指向当前实例对象，这样js解析引擎就不会混肴this指的是谁了。编程

参考文档：http://www.cnblogs.com/zhangzheny/archive/2007/12/03/981200.html 数组

javascript的匿名函数

在Javascript定义一个函数通常有以下三种方式：服务器

函数关键字(function)语句：

function fnMethodName(x){alert(x);}

函数字面量(Function Literals)： app

var fnMethodName = function(x){alert(x);}

Function()构造函数： jsp

var fnMethodName = new Function('x','alert(x);')

上面三种方法定义了同一个方法函数fnMethodName，第1种就是最经常使用的方法，后两种都是把一个函数复制给变量fnMethodName，而这个函数是没有名字的，即匿名函数。函数

匿名函数的几种写法

函数字面量：首先声明一个函数对象，而后执行它。

(function(){
  alert(1);
} ) ( );

优先表达式：因为Javascript执行表达式是从圆括号里面到外面，因此能够用圆括号强制执行声明的函数。

( function(){
  alert(2);
} ( ) );

Void操做符：用void操做符去执行一个没有用圆括号包围的一个单独操做数。

void function(){
  alert(3);
}()

参考文档：http://dancewithnet.com/2008/05/07/javascript-anonymous-function/

ifream用法精析

iframe的使用语法：

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>

src：文件的路径，既但是HTML文件，也能够是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，若是设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

在父窗体中访问并控制子窗体中的对象

在父窗体中，Iframe即子窗体是document对象的一个子对象，能够直接在脚本中访问子窗体中的对象。

如今就有一个问题，即，咱们怎样来控制这个Iframe，这里须要讲一下Iframe对象。当咱们给这个标记设置了ID 属性后，就可经过文档对象模型DOM对Iframe所含的HTML进行一系列控制。

在子窗体中访问并控制父窗体中对象

在子窗体中咱们能够经过其parent即父（双亲）对象来访问父窗口中的对象

参考文档：http://sbiigu.iteye.com/blog/195612

相对路径的理解

forward中"/"相对于web应用.
从http://localhost:8080/Test/gw/page.jsp中转发
  <jsp:forward page="OtherPage.jsp"/>在JSP页面被解析后转换成pageContext.forward("OtherPage.jsp");
  "/OtherPage.jsp"提交到http://localhost:8080/Test/OtherPage.jsp
  "OtherPage.jsp"提交到http://localhost:8080/Test/gw/OtherPage.jsp

  <form action="/ddd"> 和 response.sendRedirect("/ddd"); 相对于服务器根路径.
  假设转发代码包含于注册的servlet－url为/ggg/tt;jsp为/ggg/tt.jsp:
  绝对路径：response.sendRedirect("http://www.brainysoftware.com")发送http://www.brainysoftware.com
  根路径：response.sendRedirect("/ooo")发送至http://localhost:8080/ooo
  相对路径：response.sendRedirect("ooo")发送至http://localhost:8080/Test/ggg/ooo,

javascript中的中apply和call方法

foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,由于属于Function.prototype,因此每一个Function对象实例,也就是每一个方法都有call, apply属性.既然做为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,由于它们的做用同样,只是使用方式不一样.

相同点:两个方法产生的做用是彻底同样的

不一样点:方法传递的参数不一样

咱们就上面的foo.call(this, arg1, arg2, arg3)展开分析.

foo是一个方法,this是方法执行时上下文相关对象,arg1, arg2, arg3是传给foo方法的参数.这里所谓的方法执行时上下文相关对象, 若是有面向对象的编程基础,那很好理解,就是在类实例化后对象中的this.

在JavaScript中,代码老是有一个上下文对象,代码处理该对象以内. 上下文对象是经过this变量来体现的, 这个this变量永远指向当前代码所处的对象中.

举个具体的例子

/建立一个A类
function A(){
//类实例化时将运行如下代码
//此时的执行上下文对象就是this,就是当前实例对象
    this.message = 'message of a';
    this.getMessage = function(){
        return this.message;
    }
}
//建立一个A类实例对象
var a = new A();
//调用类实例getMessage方法得到message值
alert(a.getMessage());
//建立一个B类
function B(){
    this.message = 'message of b';
    this.setMessage = function(msg){
        this.message = msg;
    }
}
//建立一个B类实例对象
var b = new B();
//给对象a动态指派b的setMessage方法,注意,a自己是没有这方法的!
b.setMessage.call(a, 'a的消息');
//下面将显示”a的消息”
alert(a.getMessage());
//给对象b动态指派a的getMessage方法,注意,b自己也是没有这方法的!

对象的方法能够任意指派,而对象自己一直都是没有这方法的,注意是指派,通俗点就是,方法是借给另外一个对象的调用去完成任务,原理上是方法执行时上下文对象改变了.

因此 b.setMessage.call(a, “a的消息”); 就等于用a做执行时上下文对象调用b对象的setMessage方法,而这过程当中与b一点关系都没有, 做用等效于a.setMessage( “a的消息”);

由于apply与call产生的做用是同样的,能够说

call, apply做用就是借用别人的方法来调用,就像调用本身的同样.

call和apply的使用方法区别以下：

function print(a, b, c, d){
    alert(a + b + c + d);
}
function example(a, b , c , d){
//用call方式借用print,参数显式打散传递
    print.call(this, a, b, c, d);
//用apply方式借用print, 参数做为一个数组传递,
//这里直接用JavaScript方法内自己有的arguments数组
    print.apply(this, arguments);
//或者封装成数组
    print.apply(this, [a, b, c, d]);
}
//下面将显示”背光脚本”
example('背' , '光' , '脚', '本');

call, apply方法它们除了第一个参数,即执行时上下文对象相同外,call方法的其它参数将依次传递给借用的方法做参数,而apply就两个参数,第二个参数为一个数组传递.因此能够说成

call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法做参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是同样的.

当参数明确时可用call, 当参数不明确时可用apply给合arguments

form标签中的name和id的区别

name的做用：

用途1: 做为可与服务器交互数据的HTML元素的服务器端的标示，好比input、select、textarea、和button等。咱们能够在服务器端根据其Name经过Request.Params取得元素提交的值。

用途2: HTML元素Input type='radio'分组，咱们知道radio button控件在同一个分组类，check操做是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。

用途3: 创建页面中的锚点，咱们知道<a href="URL">link</a>是得到一个页面超级连接，若是不用href属性，而改用Name，如：<a name="PageBottom"></a>，咱们就得到了一个页面锚点。

用途4: 做为对象的Identity，如Applet、Object、Embed等元素。好比在Applet对象实例中，咱们将使用其Name来引用该对象。

用途5: 在IMG元素和MAP元素之间关联的时候，若是要定义IMG的热点区域，须要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。

用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

另外，frame和window的名字，用于在其余frame或window指定target。

如下状况要使用id

1. label与form控件的关联，

<label for="MyInput">My Input</label>

for属性指定与label关联的元素的id，不可用name替代。

2. CSS的元素选择机制，以#MyId的方式指定应用样式的元素，不能用name替代。

3. 脚本中得到对象：

IE支持在脚本中直接以id（而不是name）引用该id标识的对象。例如上面的input，要在脚本中得到输入的内容，能够直接以MyInput.value来得到。

若是用DOM的话，则用document.getElementById("MyInput").value，若是要用name的话，一般先获得包含控件的form，例如document.forms[0]，而后从form再引用name，注意这样获得的是通过计算后将发送给服务器的值。

参考文档：http://blog.csdn.net/wyy20071210/article/details/3298957

http://www.lantian360.com/blueblog/blog.asp?id=WX5