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

mouseover()/mouserout()

当鼠标进入/离开某个元素或它的后代元素时触发mouseover/mouseout事件。
mouseover事件大多数时候会与 mouseout 事件一起使用。

mouseover/mouserout事件由于冒泡机制,经常在不需要的时候不小心触发,从而导致一些脚本问题。

mouseenter()/mouseleave()

mouseenter/mouseleave当且仅当鼠标进入被选元素时才触发,当鼠标穿过任何子元素时不会触发。它不关心目标元素是否有子元素。

focusin()和focusout()

.focusin():一个元素或它的子元素得到焦点时触发此事件
.focusout():一个元素或它的子元素失去焦点时触发此事件

与 focus() 方法不同的是,focusin() 方法在任意子元素获得焦点时也会触发。

复制代码 代码如下:


<body>
    <p><input type="text"> <span>focusin fire</span></p>
    <p><input type="password"> <span>focusin fire</span></p>
    <script>
    $( "p" ).focusin(function() {
    $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
    });
    </script>
</body>

eq()和get()

.get(): 通过jQuery对象获取一个对应的DOM元素。
.eq():从集合的一个元素中构造新的jQuery对象

eq返回的是一个jQuery对象,get返回的是一个DOM对象。举个例子:

$( "li" ).get( 0 ).css("color", "red"); //错误
$( "li" ).eq( 0 ).css("color", "red"); //正确
那么,什么是DOM对象,什么又是jQuery对象呢?

DOM对象就是用js获得的对象,而juqery对象是用jQuery类库的选择器获得的对象。

如:var $obj = $("div");//jQuery对象

get方法本质上是把jQuery对象转换成DOM对象,但是css属于jQuery构造器的,DOM是不存在这个方法的,如果需要用jQuery的方法,我们必须这样写:

复制代码 代码如下:


var li = $("li").get(0);
$(li).css("color","black");//用$包装

filter()

filter()方法:筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

filter(expression):(字符串|函数)如果参数是字符串,则制定jQuery选择器,用于从包装集里删除所有与选择器不匹配的元素,最后留下与选择器匹配的元素;如果参数是函数,则用于确定筛选条件。为包装集里的每一个元素各调用一次该函数,函数调用返回值为false的任何元素都会从包装集里删除。

以下代码意为:保留第一个以及带有select类的元素

HTML 代码:

复制代码 代码如下:


  <p>Hello</p><p>Hello Again</p><p>And Again</p>

jQuery 代码:

复制代码 代码如下:


  $("p").filter(".selected, :first")

结果:

复制代码 代码如下:


 <p>Hello</p>, <p>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中当前存在的元素,还作用于将来可能存在(动态生成)的元素

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgszfd.html