jQuery常用的实例

一 通过stop()函数可将对象再在执行的动画暂停。选择符:animated可以判断对象是否处在动画运行状态。
以下为来自官网的一个例子：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
   < script  src ="http://code.jquery.com/jquery-latest.js" ></ script >
  
   < script >
  $(document).ready( function (){
    
    $( " #show " ).click( function  () {
       var  n  =  $( " div " ).queue( " fx " );
      $( " span " ).text( " Queue length is:  "   +  n.length);
    });
     function  runIt() {
      $( " div " ).show( " slow " );
      $( " div " ).animate({left: ' +=200 ' }, 2000 );
      $( " div " ).slideToggle( 1000 );
      $( " div " ).slideToggle( " fast " );
      $( " div " ).animate({left: ' -=200 ' }, 1500 );
      $( " div " ).hide( " slow " );
      $( " div " ).show( 1200 );
      $( " div " ).slideUp( " normal " , runIt);
    }
    runIt();

  });
   </ script >
   < style >
  div  {  margin : 3px ;  width : 40px ;  height : 40px ;
        position : absolute ;  left : 0px ;  top : 30px ;  
        background : green ;  display : none ;   }
  div.newcolor  {  background : blue ;   }
  span  {  color : red ;   }
   </ style >
</ head >
< body >
   < button  id ="show" > Show Length of Queue </ button >
   < span ></ span >
   < div ></ div >
</ body >
</ html >

效果为不断变化的一个方块，因为最后一个动画$("div").slideUp("normal", runIt)执行后又 调用runIt方法，所以动画不断循环。

二 jQuery另一个很令人惬意的地方是，一般的代码都是一行一行写，jQuery的代码可以一串一串写。

这一点，在前面的文章中已经介绍过了。
直接来一个Demo:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > chainning code </ title >
     < script  src ="jquery-latest.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript" >
        $( function (){
             // 添加四个按钮
            $( ' <input type="button" value="click me"/><input type="button" value="triggle click me"/><input type="button" value="detach handler"/><input type="button" value="show/hide text"/> ' ).appendTo($( ' body ' ));
             // 找出所有按钮
            $( ' input[type="button"] ' )
                .eq( 0 ) // 找到第一个按钮
                    .click( function (){
                        alert( ' you clicked me! ' );
                    })
                .end().eq( 1 ) // 返回所有按钮，再找到第二个
                    .click( function (){
                        $( ' input[type="button"]:eq(0) ' ).trigger( ' click ' );
                    })
                .end().eq( 2 ) // 返回所有按钮，再找到第三个
                    .click( function (){
                        $( ' input[type="button"]:eq(0) ' ).unbind( ' click ' );
                    })
                .end().eq( 3 ) // 返回所有按钮，再找到第四个
                    .toggle( function (){
                        $( ' .panel ' ).hide( ' slow ' );
                    }, function (){
                        $( ' .panel ' ).show( ' slow ' );
                    });
        });
     </ script >
     < style  type ="text/css" >
        .panel
         {
            padding :  20px ;
            background-color :  #000066 ;
            color :  #FFFFFF ;
            font-weight :  bold ;
            width :  200px ;
            height :  50px ;
         }
     </ style >
</ head >
< body >
     < div  class ="panel" > welcome to jQuery! </ div >
</ body >
</ html >

现在，链式代码已经成为jQuery非常流行的一个特点了，在使用链条方式写代码时，可能会用到eq()/filter()……（reference: http://docs.jquery.com/Traversing ）等方法变化jQuery对象的对应范围，然后，又可以用end()函数将范围复原到原来的状况。

需要注意的是，有几个函数并不返回jQuery对象，所以链条就不能继续下去，比如get()就不能像eq()那样用。

3 document.createElement()的用法

分析代码时，发现自己的盲点——document.createElement()，冲浪一番，总结了点经验。 

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

      下面，举例说明document.createElement()的用法。<div id="board"></div>

例1：

        <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>

效果：在标签board中加载一个按钮，属性值为“这是测试加载的小例子”。 

       

例2：

        <script type="text/javascript">
            var board = document.getElementById("board");
            var e2 = document.createElement("select");
            e2.options[0] = new Option("加载项1", "");
            e2.options[1] = new Option("加载项2", "");
            e2.size = "2";
            var object = board.appendChild(e2);
        </script>

效果：在标签board中加载一个下拉列表框，属性值为“加载项1”和“加载项2”。 

        

例3：

        <script type="text/javascript">
            var board = document.getElementById("board");           
            var e3 = document.createElement("input");
            e4.setAttribute("type", "text");
            e4.setAttribute("name", "q");
            e4.setAttribute("value", "使用setAttribute");
            e4.setAttribute("onclick", "javascript:alert('This is a test!');");           
            var object = board.appendChild(e3);
        </script>

效果：在标签board中加载一个文本框，属性值为“使用setAttribute”。 当点击这个文本框时，会弹出对话框“This is a test!”。

 

        根据上面例子，可以看出，可以通过加载对象的属性来设置，参数是相同的。使用e.type="text" 和 e.setAttribute("type","text")效果是一致的。

       

        下面，我们用实例来讲述一下appendChild() 方法和insertBefore() 方法的不同。

        比如我们要在下面这个div中插入一个子节点P时：<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>

      通过以上的代码，可以测试到一个新的节点被创建到了节点div下，且该节点是div最后一个节点。很明显，通过这个例子，可以知道appendChildhild和insertBefore都可以进行插入节点的操作。

　　 在上面的例子中有这样一句代码：oTest.insertBefore(newNode,null) ，这里insertBefore有2个参数可以设置，第一个是和appendChild相同的，第二却是它特有的。它不仅可以为null，还可以为：

<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>

效果：这个例子将在x1节点前面插入一个新的节点

 

又或：

<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.nextSibling);
</script>

效果：这个例子将在x1节点的下一个节点前面插入一个新的节点

 

还可为：

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

　　这个例子将在第一子节点前面插入一个新的节点，也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点，但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来，发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。

　　从这几个例子中得出：

　　appendChild() 方法在节点的子节点列表末添加新的子节点。

　　insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

以上内容来自互联网，在此感谢！