1.filter()和not()方法 filter()和not()是一對反方法，filter()是過濾. filter()方法是針對元素自身。（跟has()方法有區別） 2.has()方法 has()方法表示的是包含的意思，它跟filter()方法是有區別的。has()方法有父子級關係。 3.nex ...
1.filter()和not()方法
filter()和not()是一對反方法，filter()是過濾.
filter()方法是針對元素自身。（跟has()方法有區別）
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> /*filter(): 過濾 not():filter的反義詞
*/ $(function(){ //$('div').filter('.box').css('background','red'); //將div中帶有class=‘box’的div的背景色改成紅色 $('div').not('.box').css('background','red'); //將div中除帶有class=‘box’的div的其他div設置背景色為紅色
}); </script>
</head>
<body>
<div class="box">div</div>
<div>div2</div>
</body>
</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標簽的div(父級)的背景色為紅色
$('div').has('.box').css('background','red'); //只有包含的標簽的class值是box的div(父級)的背景色為紅色
});
</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'); //只會給div下的所有h2的背景色設置為紅色
$('div').find('h2').eq(0).css('background','red'); //給div下的第一個h2的背景設置為紅色
});
</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()); //索引就是當前元素在所有兄弟節點中的位置
//彈出是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')); //獲取屬性title的值
$('div').attr('title','456'); //設置title屬性的值是456
$('div').attr('class','box'); //給div設置class屬性，值是box
});
</script>
</head>
<body>
<div title="123">div</div>
</body>
</html>
