jQuery中的一些常见方法小结(推荐)

前端技术 2023/09/02 JavaScript

1.filter()和not()方法

filter()和not()是一对反方法，filter()是过滤.

filter()方法是针对元素自身。（跟has()方法有区别）

<script type=\"text/javascript\" src=\"jquery-1.12.3.min.js\"></script> 
<script> 
/*filter(): 过滤 
not():filter的反义词<BR>*/
$(function(){ 
  //$(\'div\').filter(\'.box\').css(\'background\',\'red\');  <SPAN style=\"COLOR: #ff0000\">//将div中带有class=‘box\'的div的背景色改成红色</SPAN> 
  $(\'div\').not(\'.box\').css(\'background\',\'red\');    <SPAN style=\"COLOR: #ff0000\">//将div中除带有class=‘box\'的div的其他div设置背景色为红色</SPAN> 
?
1 }); </script> <BR></head> <BR><body> <BR><div class=\"box\">div</div><BR> <div>div2</div> <BR></body> <BR></html>

2.has()方法

has()方法表示的是包含的意思，它跟filter()方法是有区别的。has()方法有父子级关系。　

<script type=\"text/javascript\" src=\"jquery-1.12.3.min.js\"></script> 
<script> 
/*filter(): 过滤 
not():filter的反义词 
has():包含 */
$(function(){ 
  //$(\'div\').has(\'span\').css(\'background\',\'red\'); <SPAN style=\"COLOR: #ff0000\">//只有包含span标签的div(父级)的背景色为红色</SPAN> 
  $(\'div\').has(\'.box\').css(\'background\',\'red\');  <SPAN style=\"COLOR: #ff0000\">//只有包含的标签的class值是box的div(父级)的背景色为红色</SPAN> 
  }); 
</script> 
</head> 
 
<body> 
<div> div 
  <span class=\"box\"> 
  span 
  </span> 
</div> 
<div class=\"box\">div2</div> 
<div class=\"haha\">div3</div> 
</body> 
</html>

3.next()、prev()、find()、eq()方法

next()、prev()方法就是寻找下一个兄弟节点和上一个兄弟节点。

find()方法：寻找　

eq()：索引

<script type=\"text/javascript\" src=\"jquery-1.12.3.min.js\"></script> 
<script> 
/*next():下一个兄弟节点 
prev():上一个兄弟节点 
find():寻找 
eq():索引 
*/
$(function(){ 
  //$(\'div\').find(\'h2\').css(\'background\',\'red\');   <SPAN style=\"COLOR: #ff0000\">//只会给div下的所有h2的背景色设置为红色</SPAN> 
  $(\'div\').find(\'h2\').eq(0).css(\'background\',\'red\');  <SPAN style=\"COLOR: #ff0000\">//给div下的第一个h2的背景设置为红色</SPAN> 
  }); 
</script> 
</head> 
 
<body> 
<div> 
　　<h3>h3</h3> 
  <h2>h2</h2> 
  <h2>h2</h2> 
  <h1>h1</h1> 
</div> 
<h2>haha</h2>  //不会变红 
 
</body> 
</html>

4.index()方法　

<script> 
/* 
index():索引就是当前元素在所有兄弟节点中的位置 
*/
$(function(){ 
  alert($(\'#h\').index()); <SPAN style=\"COLOR: #ff0000\"> //索引就是当前元素在所有兄弟节点中的位置</SPAN> 
              //弹出是3 
  }); 
</script> 
</head> 
 
<body> 
<div> 
  <h3>h3</h3> 
  <h2>h2</h2> 
  <h2>h2</h2> 
  <h3 id=\"h\">h3</h3> 
  <h1>h1</h1> 
</div> 
<h2>haha</h2> 
 
</body> 
</html>

4.attr()方法　

<script type=\"text/javascript\" src=\"jquery-1.12.3.min.js\"></script> 
<script> 
/* 
attr():属性设置 
*/
$(function(){ 
  alert($(\'div\').attr(\'title\')); <SPAN style=\"COLOR: #ff0000\">//获取属性title的值</SPAN> 
  $(\'div\').attr(\'title\',\'456\');  <SPAN style=\"COLOR: #ff0000\">//设置title属性的值是456</SPAN> 
  $(\'div\').attr(\'class\',\'box\'); <SPAN style=\"COLOR: #ff0000\"> //给div设置class属性，值是box</SPAN> 
  }); 
</script> 
</head> 
 
<body> 
<div title=\"123\">div</div> 
</body> 
</html>

以上这篇jQuery中的一些常见方法小结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/4991

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案