$()下的常用方法：
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常用方法完毕。
时间： 2024-08-27 01:07:31