首页 > 代码库 > jquery(3)--常用方法

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常用方法完毕。

jquery(3)--常用方法