jquery（3）--常用方法
阿新 • • 發佈：2017-05-15
標簽 效果 oct script 節點 orange 下標 log range
$()下的常用方法：
1、has（）;
2、not（）;
3、filter();
4、next();
5、prev();
6、find();
7、eq();
8、index();
9、attr();
1-2-3：
代碼1：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 <script> 8 //filter:過濾 9 //not：與filter相反 10 $(function (){ 11 $(‘div‘).filter(‘.box‘).css(‘background‘,‘red‘); 12 //$(‘div‘).not(‘.box‘).css(‘background‘,‘red‘); 13 }); 14 </script> 15 </head> 16 <body> 17 <div class="box"/>div1</div> 18 <div>div2</div> 19 <div>div3</div> 20 </body> 21 22 </html>
運行效果依次如下：
filter:
not:
代碼2：
has:包含
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">5 <title>Title</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 <script> 8 //has:包含 9 $(function (){ 10 $(‘div‘).has(‘span‘).css(‘background‘,‘blue‘);//找到div下包含span標簽的元素 11 }); 12 </script> 13 </head> 14 <body> 15 <div class="box"/>div1<span>span</span></div> 16 <div>div2</div> 17 <div>div3</div> 18 </body> 19 20 </html>
運行效果：
兩者區別：filter、not針對的是當前元素，has針對的是當前元素裏面的元素
代碼3：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 <script> 8 //has:包含 9 $(function (){ 10 $(‘div‘).has(‘.box‘).css(‘background‘,‘blue‘); 11 });//找到div中的class為box的span元素 12 </script> 13 </head> 14 <body> 15 <div class="box"/>div1<span class="box">span</span></div> 16 <div class="box">div2</div> 17 <div>div3</div> 18 </body> 19 20 </html>
運行效果：
4-5：
next：下一個元素
prev：上一個元素
代碼4：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 <script> 8 $(function (){ 9 $(‘div‘).next().css(‘background‘,‘green‘);//找到div節點的下一個元素 10 //$(‘p‘).prev().css(‘background‘,‘red‘); 11 }); 12 </script> 13 </head> 14 <body> 15 <div>div</div> 16 <span>span</span> 17 <p>p</p> 18 </body> 19 20 </html>
運行效果：
6-
find：查找元素內部包含的元素
代碼5：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 <script> 8 $(function (){ 9 $(‘div‘).find(‘h2‘).css(‘background‘,‘orange‘); 10 }); 11 </script> 12 </head> 13 <body> 14 <div> 15 <h3>h3</h3> 16 <h3>h3</h3> 17 <h2>h2</h2> 18 <h3>h3</h3> 19 <h2>h2</h2> 20 <h3>h3</h3> 21 </div> 22 23 </body> 24 25 </html>
運行效果：
7、eq();--一組元素的第幾個（下標）
代碼6：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 <script> 8 $(function (){ 9 $(‘div‘).find(‘h2‘).eq(1).css(‘background‘,‘orange‘);//選擇h2中下標為1的元素 10 }); 11 </script> 12 </head> 13 <body> 14 <div> 15 <h3>h3</h3> 16 <h3>h3</h3> 17 <h2>h2</h2> 18 <h3>h3</h3> 19 <h2>h2</h2> 20 <h3>h3</h3> 21 </div> 22 23 </body> 24 25 </html>
運行效果：
8、index();--索引
代碼7：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 <script> 8 $(function (){ 9 alert($(‘#h‘).index());//索引就是當前元素在所有兄弟節點中的位置 10 }); 11 </script> 12 </head> 13 <body> 14 <div> 15 <h3>h3</h3> 16 <h3>h3</h3> 17 <h2>h2</h2> 18 <h3 id="h">h3</h3> 19 <h2>h2</h2> 20 <h3>h3</h3> 21 </div> 22 23 </body> 24 25 </html>
運行效果：
代碼9：
attr();
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 <script> 8 $(function (){ 9 //alert($(‘div‘).attr(‘title‘));//一個參數獲取屬性值 10 11 $(‘div‘).attr(‘title‘,‘456‘);//兩個參數設置屬性值 12 13 $(‘div‘).attr(‘class‘,‘box‘);//設置類屬性值為box。 14 }); 15 </script> 16 </head> 17 <body> 18 <div title="123">div</div> 19 </body> 20 21 </html>
運行效果：
jquery常用方法完畢。
jquery（3）--常用方法