jQuery常用的实例

最新推荐文章于 2022-06-28 21:06:33 发布

tianmo2010

最新推荐文章于 2022-06-28 21:06:33 发布

阅读量2.2k

点赞数

分类专栏： jQuery 文章标签： jquery function div button input reference

本文链接：https://blog.csdn.net/tianmohust/article/details/7735706

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一通过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：

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

例2：

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

例3：

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

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