jQuery中filter、clone、slice、bind、each、siblings、attr、mouseenter、preventDefault、trigger、：eq、：gt、find用法

最新推荐文章于 2022-12-12 20:08:13 发布

守护_潇潇

最新推荐文章于 2022-12-12 20:08:13 发布

阅读量1.9k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/laixiaobailing/article/details/39483825

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1）、filter() 方法将匹配元素集合缩减为匹配指定选择器的元素（这个方法用于缩小匹配的范围。用逗号分隔多个表达式）。

示例1、

<span style="font-size:18px;"><script type="text/javascript">
 $(document).ready(function(){
  var text=$("p").filter(".p1").text();
  alert(text);
 });
</script>
<body>
<div class="main">
 <P class="p1">这是第一段</P>
 <P class="p2">这是第二段</P>
</div>
</body></span>

示例2、（保留子元素中不含有ol的元素）

<span style="font-size:18px;"><script type="text/javascript">
 $(document).ready(function(){
  $("p").filter(function(index) {
  return $("ol", this).length == 0;
});
  
 });
</script>
<body>
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
</body></span>

//结果：[ How are you? ]

2）、clone() 方法生成被选元素的副本，包含子节点、文本和属性。
参数中true和false作用（默认false）：
$("").clone(); 这样可以完整的复制一个元素，并且可以通过prependTo("");等实现元素位置控制，但是这样写不能完整的复制事件驱动过来。
$("").clone(true); 这样可以完整发复制一个元素，且还可以复制所有事件驱动。而且也可以通过insertAfter("");等实现位置控制。
示例3、

<span style="font-size:18px;"><script type="text/javascript">
 $(document).ready(function(){
    $("b").clone().prependTo("p");
});
  
 });
</script>
<body>
<b>Hello</b><p>, how are you?</p>
</body></span>

//结果:HelloHello, how are you?

3)、slice() 方法可从已有的数组中返回选定的元素。
注意：1、您可使用负值从数组的尾部选取元素；2、如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
示例4、

<span style="font-size:18px;"><script type="text/javascript">
 $(document).ready(function(){
    $("p").slice(0, 2).wrapInner("<b></b>");
});
  
 });
</script>
<body>
<p>Hello</p><p>cruel</p><p>World</p>
</body></span>

//结果:[ Hello,cruel ]

4)、bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
基本语法：$(selector).bind({event:function, event:function, ...})
常用的类型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keydown、keypress、keyup、error等等。
示例5、（在事件处理之前传递一些附加的数据）

<span style="font-size:18px;">function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler);</span>

5）、each() 方法规定为每个匹配元素规定运行的函数。
jQuery.each(obj,fn,arg)
该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数args。
示例5、

<span style="font-size:18px;">var arr = ["one", "two", "three", "four", "five"];
var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
 
    jQuery.each(arr, function() {
        alert(this);
    });
    /*
    one,two,three,four,five
    */
    jQuery.each(obj, function(i, val) {
        alert(i+":"+val);
    });
    /*
    one:1 two:2 three:3 four:4  five:5
    */
    jQuery.each(arr, function(i, val) {
        alert(i);
    });
    /*
    0,1,2,3,4
    */
    jQuery.each(arr, function(i, val) {
        alert(arr[i]);
    });
    /*
    one tow three four five
    */</span>

6）、siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的（用于筛选同辈元素的表达式,即不包括该元素！！！）。
示例6、

<span style="font-size:18px;"><p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("div").siblings()
//结果:
[<p>Hello</p>, <p>And Again</p>]</span>

7）、attr() 方法设置或返回被选元素的属性值。
示例7、

<span style="font-size:18px;"><script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width",function(n,v){
      return v-50;
    });
  });
});
</script></span>

8）、mouseenter()和mouseleave() 当鼠标指针穿过元素时，会发生 mouseenter 事件（只发生一次和mouseover有一定区别，mouseover可发生多次！）。
示例8：

<span style="font-size:18px;"><html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color","#E9E9E4");
  });
});
</script>
</head>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>
</html></span>

9）、preventDefault() 方法阻止元素发生默认的行为-----注意这里是阻止其行为发生！！（例如，当点击提交按钮时阻止对表单的提交、a标签的跳转等等）。
这个方法很简单，记住功能就可以，不进行介绍了。

10）、trigger() 方法触发被选元素的指定事件类型（触发）。
trigger不光能触发“正常”的事件，也可以触发我们自定义添加的事件的：

<span style="font-size:18px;"><html>
<head>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script language="javascript">
    //这里使用bind给myClick绑定一个事件
  $(document).ready(function(){
    $("#button").bind("myClick",function(event, message1, message2){
    alert(message1 + " ss" + message2);
  }); 
    //trigger相当于给事件myClick增加了自动触发功能   同时trigger可以传参数
    $("#button").trigger("myClick",["Hello","World!"]);  
  });
</script>
</head>
<body>
<div id="button" style="width:200px;height:200px;margin:200px auto;background-color:#00FF00">sssssssssss</div>
</body>
</html></span>

备注：triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。

11）、:eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）；index是负值时，从集合中的最后一个元素开始倒数。
这个不难，了解一下会使用就可以啦。非得哟看的话来这里：http://api.jquery.com/eq/

12）、:gt 选择器选取 index 值高于指定数的元素（大于）。
index 值从 0 开始。

13）、find() 方法获得当前元素集合中每个元素的后代（就是子孙，不是儿子什么的。。。是它儿子、孙子、曾孙。。。只要他下面的都是），通过选择器、jQuery 对象或元素来筛选。
使用此方法必须得传入选择器表达式参数，不然是获取不到任何元素的，也就失去了使用此方法的意义了。

<span style="font-size:18px;"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#level_one{width:240px;height:360px;border:2px solid #0000FF;padding:10px;float:left}
#level_one div{width:200px;height:150px;border:1px solid #FF0000;margin:10px;}
#level_one div span{float:left;width:150px;height:30px;border:1px solid #999000;margin:10px;}
</style>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script language="javascript">
    //这里使用bind给myClick绑定一个事件
  $(document).ready(function(){
  debugger;
    var a = $("#level_one").find("*").length;//这个就是获取id为“level_one”的div中的所有的元素的个数，结果为6。 
    ar x = $("#level_one").find("*");   //可以看看这里面都有那些信息!
    var b =$("#level_one").find("div").length;//会获取到2个元素 
    var c =$("#level_one").find("span").length;//会获取到4个元素 
    var d =$("#level_one").find("span.item").length;//会获取到2个元素
  });
</script>
</head>
<body>
<div id="level_one"> 
    水水水水
    <div> 
        我是第二层div的纯文本内容 
        <span>jquery基础教程</span> 
        <span class="item">jquery教程</span> 
    </div> 
    <div> 
        我也是第二层div的纯文本内容 
        <span class="item">PHP学习</span> 
        <span>PHP教程</span> 
    </div> 
</div>
</body>
</html></span>

14）、noConflict() 方法让渡变量 $ 的 jQuery 控制权。
感觉这个东动有些复杂，暂时记下网址，以后慢慢研究研究啦。
http://www.w3school.com.cn/jquery/core_noconflict.asp