jquery常用方法及使用示例汇总

2020-05-19 07:32:40易采站长站整理

HTML 代码:


  <p>Hello</p><p>Hello Again</p><p class=”selected”>And Again</p>

jQuery 代码:


  $(“p”).filter(“.selected, :first”)

结果:


 <p>Hello</p>, <p class=”selected”>And Again</p>
 

再看一个function的例子,一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。

HTML 代码:


 <p><ol><li>Hello</li></ol></p><p>How are you?</p>
 

jQuery 代码:


$(“p”).filter(function(index) {
  return $(“ol”, this).length == 0;
});

结果:


<p>How are you?</p> 

.bind()、.live()和.delegate()方法

.bind():绑定事件处理函数的最基本方式是使用.bind()方法。它和live()方法一样,接受两个参数:

.bind(event type, event handler)
两种绑定事件处理函数的方法:


$(document).ready(function(){
    $(‘.mydiv’).bind(‘click’,test);

    function test(){
        alert(“Hello World!”);
    }
});

事件处理函数也可以使用匿名函数,如下所示:


$(document).ready(function(){
        $(“#mydiv”).bind(“click”,function(){
            alert(“Hello World!”);
        })
    });

.live():live方法和bind方法的唯一区别在于.live()不仅作用于DOM中当前存在的元素,还作用于将来可能存在(动态生成)的元素


$(document).ready(function(){
        $(‘.box’).live(‘click’,function(){
            $(this).clone().appendTo(‘.container’);
        });
    });

    <div class=”container”>
        <div class=”box”></div>
    </div>

使用live方法绑定事件的缺点在于它无法使用链式调用,那有没有既可以像live方法那样绑定事件,又可以支持链式调用的方法呢?答案就是下面的delegate方法。

delegate()方法:为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,