jQuery中的一些常見方法小結(推薦)

更新時間：2016年06月13日 17:20:03 投稿：jingxian

下面小編就為大家?guī)硪黄猨Query中的一些常見方法小結(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1.filter()和not()方法

filter()和not()是一對反方法，filter()是過濾.

filter()方法是針對元素自身。（跟has()方法有區(qū)別）

<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()方法是有區(qū)別的。has()方法有父子級關系?！?/p>

<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()方法就是尋找下一個兄弟節(jié)點和上一個兄弟節(jié)點。

find()方法：尋找　

eq()：索引

<script type="text/javascript" src="jquery-1.12.3.min.js"></script> 
<script> 
/*next():下一個兄弟節(jié)點 
prev():上一個兄弟節(jié)點 
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():索引就是當前元素在所有兄弟節(jié)點中的位置 
*/
$(function(){ 
  alert($('#h').index()); <SPAN style="COLOR: #ff0000"> //索引就是當前元素在所有兄弟節(jié)點中的位置</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中的一些常見方法小結(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。