jquery（3）--常用方法
$()下的常用方法：
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常用方法完毕。
