本文详细介绍了jQuery的基本概念、jQuery对象的特点及用途，并提供了丰富的示例代码，包括如何使用选择器选取元素、DOM操作、动画效果等。
Python/jquery
一 jQuery是什么？
<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
二 什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html() //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象 var variable = DOM 对象 $variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法 $(selector).action()
三、寻找元素（选择器和筛选器）
3.1 选择器：
基本选择器：查找所有标签并进行设置
$('*').css('color','red')
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div>
9 <p id="p2">ll</p>
10 <p class="p1">ll</p>
11 </div>
12
13 <script src="jquery-3.2.1.js"></script>
14 <script>
15 $('*').css('color','red')
16 </script>
17 </body>
18 </html>
19 -------------------------------------------------------------------------
id标选择器签并进行设置
$('#p2').css('color','red')
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div>
9 <p id="p2">ll</p>
10 <p class="p1">ll</p>
11 </div>
12
13 <script src="jquery-3.2.1.js"></script>
14 <script>
15 $('#p2').css('color','red')
16 </script>
17 </body>
18 </html>
class选择器标签并进行设置
$('.p1').css('color','red')
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div>
9 <p id="p2">ll</p>
10 <p class="p1">ll</p>
11 </div>
12
13 <script src="jquery-3.2.1.js"></script>
14 <script>
15 $('.p1').css('color','red')
16 </script>
17 </body>
18 </html>组合选择器
$('#p2,.p1').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div> 9 <p id="p2">ll</p> 10 <p class="p1">ll</p> 11 </div> 12 13 <script src="jquery-3.2.1.js"></script> 14 <script> 15 $('#p2,.p1').css('color','red') 16 </script> 17 </body> 18 </html>
层次选择器：
子元素选择器
$('.p>#p2').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="p"> 9 <p id="p2">ll</p> 10 <p class="p1">ll</p> 11 <div id="p3"> 12 <p>ppp</p> 13 </div> 14 </div> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.p>#p2').css('color','red') 19 </script> 20 </body> 21 </html>
后代元素选择器
$('.p p').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="p"> 9 <p id="p2">ll</p> 10 <p class="p1">ll</p> 11 <div id="p3"> 12 <p>ppp</p> 13 </div> 14 </div> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.p p').css('color','red') 19 </script> 20 </body> 21 </html>
紧邻下一一个元素选择器：
$('.p+div').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="p"> 9 <p id="p2">ll</p> 10 <p class="p1">ll</p> 11 <div id="p3"> 12 <p>ppp</p> 13 </div> 14 </div> 15 <div class="a">tt</div> 16 17 <script src="jquery-3.2.1.js"></script> 18 <script> 19 $('.p+div').css('color','red') 20 </script> 21 </body> 22 </html>
兄弟元素选择器：
$('.p~div').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="p"> 9 <p id="p2">ll</p> 10 <p class="p1">ll</p> 11 <div id="p3"> 12 <p>ppp</p> 13 </div> 14 </div> 15 <div class="a">tt</div> 16 17 <script src="jquery-3.2.1.js"></script> 18 <script> 19 $('.p~div').css('color','red') 20 </script> 21 </body> 22 </html>
过滤选择器（重点）
第一个li
$('.item:first').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.item:first').css('color','red') 19 </script> 20 </body> 21 </html>
最后一个：
$('.item:last').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.item:last').css('color','red') 19 </script> 20 </body> 21 </html>
挑选下标为偶数的
$('.item:even').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.item:even').css('color','red') 19 </script> 20 </body> 21 </html>
挑选下标为奇数的
$('.item:odd').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.item:odd').css('color','red') 19 </script> 20 </body> 21 </html>
下标等于4的
$('.item:eq(4)').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.item:eq(4)').css('color','red') 19 </script> 20 </body> 21 </html>
下标大于2的
$('.item:gt(3)').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.item:gt(3)').css('color','red') 19 </script> 20 </body> 21 </html>
下标下于3的
$('.item:lt(3)').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.item:lt(3)').css('color','red') 19 </script> 20 </body> 21 </html>
挑选除 id=li的
$('.item:not(#li)').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.item:not(#li)').css('color','red') 19 </script> 20 </body> 21 </html>
查找存不存在
console.log($('ul li').hasClass("item"))
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 <input type="text" value="123"> 16 <input type="password" value="123"> 17 <input type="button" value="222"> 18 <script src="jquery-3.2.1.js"></script> 19 <script> 20 console.log($('ul li').hasClass("item")) 21 </script> 22 </body> 23 </html>
内容过滤器选择器：
包含33文本的元素
$('.item:contains(33)').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.item:contains(33)').css('color','red') 19 </script> 20 </body> 21 </html>
不包含子元素或文本为空的标签
$('.item:empty').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item"></li> 12 <li class="item" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.item:empty').css('color','red') 19 </script> 20 </body> 21 </html>
含有子元素或者文本的元素
$('.item:parent').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('.item:parent').css('color','red') 19 </script> 20 </body> 21 </html>
属性选择器：
$('[id=li]').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $('[id=li]').css('color','red') 19 </script> 20 </body> 21 </html>
表单选择器：
匹配所有 input, textarea, select 和 button 元素
$(':input').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" "alex"="sb" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 <input type="text" value="123"> 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $(':input').css('color','red') 19 </script> 20 </body> 21 </html>
所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(':text').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" "alex"="sb" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 <input type="text" value="123"> 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 $(':text').css('color','red') 19 </script> 20 </body> 21 </html>
所有密码框
$(':password').css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" "alex"="sb" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 <input type="text" value="123"> 16 <input type="password" value="123"> 17 <script src="jquery-3.2.1.js"></script> 18 <script> 19 $(':password').css('color','red') 20 </script> 21 </body> 22 </html>
所有单选按钮
$(':radio').css('width','400px')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" "alex"="sb" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 <input type="text" value="123"> 16 <input type="password" value="123"> 17 <input type="radio" value="123"> 18 <script src="jquery-3.2.1.js"></script> 19 <script> 20 $(':radio').css('width','400px') 21 </script> 22 </body> 23 </html>
所有复选框
$(':checkbox').css('width','400px')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" "alex"="sb" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 <input type="text" value="123"> 16 <input type="password" value="123"> 17 <input type="checkbox" value="123"> 18 <script src="jquery-3.2.1.js"></script> 19 <script> 20 $(':checkbox').css('width','400px') 21 </script> 22 </body> 23 </html>
所有提交按钮
$(':submit').css('width','400px')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" "alex"="sb" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 <input type="text" value="123"> 16 <input type="password" value="123"> 17 <input type="submit" value="123"> 18 <script src="jquery-3.2.1.js"></script> 19 <script> 20 $(':submit').css('width','400px') 21 </script> 22 </body> 23 </html>
所有button按钮
$(':button').css('width','400px')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">11</li> 10 <li class="item">22</li> 11 <li class="item">33</li> 12 <li class="item" "alex"="sb" id="li">44</li> 13 <li class="item">55</li> 14 </ul> 15 <input type="text" value="123"> 16 <input type="password" value="123"> 17 <input type="button" value="222"> 18 <script src="jquery-3.2.1.js"></script> 19 <script> 20 21 </body>$(':button').css('width','400px') 22 </script> 23 </html>
$([type='text'])------$(":text") 注意值适用于input标签
$('input:checked')
查找筛选器
查找（子代标签）
$('.p').children(".a").css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="p"> 10 <p class="a">123</p> 11 <div class="p1"> 12 <a class="a">11</a> 13 <a>121</a> 14 <p>22</p> 15 </div> 16 </div> 17 <script src="jquery-3.2.1.js"></script> 18 <script> 19 $('.p').children(".a").css('color','red') 20 </script> 21 </body> 22 </html>
查找后代（孙子辈）
$('.p').find(".a").css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="p"> 10 <p class="a">123</p> 11 <div class="p1"> 12 <a class="a">11</a> 13 <a>121</a> 14 <p>22</p> 15 </div> 16 </div> 17 <script src="jquery-3.2.1.js"></script> 18 <script> 19 $('.p').find(".a").css('color','red') 20 </script> 21 </body> 22 </html>
查找下一个兄弟：
$('.a').next().css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="p"> 10 <p class="a">123</p> 11 <div class="p1"> 12 <a class="a1">11</a> 13 <a>121</a> 14 <p>22</p> 15 </div> 16 <p class="pp">44</p> 17 <p class="pd">55</p> 18 </div> 19 <script src="jquery-3.2.1.js"></script> 20 <script> 21 $('.a').next().css('color','red') 22 </script> 23 </body> 24 </html>
查找下边的全部兄弟标签：
$('.a').nextAll().css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="p"> 10 <p class="a">123</p> 11 <div class="p1"> 12 <a class="a1">11</a> 13 <a>121</a> 14 <p>22</p> 15 </div> 16 <p class="pp">44</p> 17 <p class="pd">55</p> 18 </div> 19 <script src="jquery-3.2.1.js"></script> 20 <script> 21 $('.a').nextAll().css('color','red') 22 </script> 23 </body> 24 </html>
开区间（设定到哪结束）
$('.a').nextUntil(".pd").css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="p"> 10 <p class="a">123</p> 11 <div class="p1"> 12 <a class="a1">11</a> 13 <a>121</a> 14 <p>22</p> 15 </div> 16 <p class="pp">44</p> 17 <p class="pd">55</p> 18 </div> 19 <script src="jquery-3.2.1.js"></script> 20 <script> 21 $('.a').nextUntil(".pd").css('color','red') 22 </script> 23 </body> 24 </html>
$('.pd').prev().css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="p"> 10 <p class="a">123</p> 11 <div class="p1"> 12 <a class="a1">11</a> 13 <a>121</a> 14 <p>22</p> 15 </div> 16 <p class="pp">44</p> 17 <p class="pd">55</p> 18 </div> 19 <script src="jquery-3.2.1.js"></script> 20 <script> 21 $('.pd').prev().css('color','red') 22 </script> 23 </body> 24 </html>
查找上边所有的兄弟
$('.pd').prevAll().css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="p"> 10 <p class="a">123</p> 11 <div class="p1"> 12 <a class="a1">11</a> 13 <a>121</a> 14 <p>22</p> 15 </div> 16 <p class="pp">44</p> 17 <p class="pd">55</p> 18 </div> 19 <script src="jquery-3.2.1.js"></script> 20 <script> 21 $('.pd').prevAll().css('color','red') 22 </script> 23 </body> 24 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="p"> 10 <p class="a">123</p> 11 <div class="p1"> 12 <a class="a1">11</a> 13 <a>121</a> 14 <p>22</p> 15 </div> 16 <p class="pp">44</p> 17 <p class="pd">55</p> 18 </div> 19 <script src="jquery-3.2.1.js"></script> 20 <script> 21 $('.pd').prevUntil(".PP").css('color','red') 22 </script> 23 </body> 24 </html>
查找父类：
console.log($('.pd').parent())
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="p"> 10 <p class="a">123</p> 11 <div class="p1"> 12 <a class="a1">11</a> 13 <a>121</a> 14 <p>22</p> 15 </div> 16 <p class="pp">44</p> 17 <p class="pd">55</p> 18 </div> 19 <script src="jquery-3.2.1.js"></script> 20 <script> 21 console.log($('.pd').parent()) 22 </script> 23 </body> 24 </html>
查找多个父类
console.log($('.pd').parents())
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="p"> 10 <p class="a">123</p> 11 <div class="p1"> 12 <a class="a1">11</a> 13 <a>121</a> 14 <p>22</p> 15 </div> 16 <p class="pp">44</p> 17 <p class="pd">55</p> 18 </div> 19 <p class="tt">222</p> 20 <script src="jquery-3.2.1.js"></script> 21 <script> 22 console.log($('.pd').parents()) 23 </script> 24 </body> 25 </html>
查找所有的兄弟标签（除了自己以外）
$('.pd').siblings().css('color','red')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="p"> 10 <p class="a">123</p> 11 <div class="p1"> 12 <a class="a1">11</a> 13 <a>121</a> 14 <p>22</p> 15 </div> 16 <p class="pp">44</p> 17 <p class="pd">55</p> 18 </div> 19 <p class="tt">222</p> 20 <script src="jquery-3.2.1.js"></script> 21 <script> 22 $('.pd').siblings().css('color','red') 23 </script> 24 </body> 25 </html>
实例之左拉菜单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>left_menu</title> 6 <script> 7 function show(self){ 8 $(self).next().removeClass("hide"); 9 $(self).parent().siblings().children(".con").addClass("hide"); 10 11 } 12 </script> 13 <style> 14 .menu{ 15 height: 500px; 16 width: 30%; 17 background-color: gainsboro; 18 float: left; 19 } 20 .content{ 21 height: 500px; 22 width: 70%; 23 background-color: rebeccapurple; 24 float: left; 25 } 26 .title{ 27 line-height: 50px; 28 background-color: #425a66; 29 color: forestgreen;} 30 31 32 .hide{ 33 display: none; 34 } 35 36 37 </style> 38 </head> 39 <body> 40 41 <div class="outer"> 42 <div class="menu"> 43 <div class="item"> 44 <div class="title" onclick="show(this);">菜单一</div> 45 <div class="con"> 46 <div>111</div> 47 <div>111</div> 48 <div>111</div> 49 </div> 50 </div> 51 <div class="item"> 52 <div class="title" onclick="show(this);">菜单二</div> 53 <div class="con hide"> 54 <div>111</div> 55 <div>111</div> 56 <div>111</div> 57 </div> 58 </div> 59 <div class="item"> 60 <div class="title" onclick="show(this);">菜单三</div> 61 <div class="con hide"> 62 <div>111</div> 63 <div>111</div> 64 <div>111</div> 65 </div> 66 </div> 67 68 </div> 69 <div class="content"></div> 70 71 </div> 72 73 </body> 74 </html>
属性操作案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 10 <p value="yuan">ppp</p> 11 <div> 12 DIV 13 <a href="">点击</a> 14 </div> 15 16 <div class="test">DIV2</div> 17 <input type="text" value="123"> 18 <input type="button" value="333"> 19 <input type="checkbox" value="223"> 20 21 <p value="222"></p> 22 </body> 23 <script src="jquery-3.2.1.js"></script> 24 <script> 25 26 // console.log($('div').html()); /*查看div标签的html*/ 27 // console.log($('div').text()); /*查看div标签的text*/ 28 // $('.test').html('<h1>hello</h1>'); /*直接渲染html里的内容*/ 29 // $('.test').text('<h1>hello</h1>'); /*直接显示text里的文本*/ 30 // console.log($(':button').val()); /*val 没有内容是获取 (如果有内容就是进行赋值操作 )*/ 31 // console.log($('p').val()); /*必须是固有的属性，value （自定义的value不能进行val操作）*/ 32 33 34 </script> 35 </html>
tab切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * 8 { 9 margin: 0; 10 padding: 0; 11 } 12 .outer{ 13 width: 30%; 14 margin: 0 auto; 15 } 16 .nav li{ 17 list-style: none; 18 float: left; 19 width: 120px; 20 height: 40px; 21 background-color: wheat; 22 text-align: center; 23 line-height: 40px; 24 border-right: solid 2px green; 25 } 26 27 .content{ 28 width: 365px; 29 height: 400px; 30 background-color: gray; 31 float: left; 32 clear: left; 33 } 34 35 ul .active{ 36 background-color: #204982; 37 } 38 39 .hide{ 40 display: none; 41 } 42 </style> 43 </head> 44 45 <body> 46 47 <div class="outer"> 48 <ul class="nav"> 49 <li f="con1" class="active">菜单一</li> 50 <li f="con2">菜单二</li> 51 <li f="con3">菜单三</li> 52 </ul> 53 <div class="content"> 54 <div class="con1 ">111</div> 55 <div class="con2 hide">222</div> 56 <div class="con3 hide">333</div> 57 </div> 58 59 </div> 60 <script src="jquery-3.2.1.js"></script> 61 <script> 62 var eles=document.getElementsByClassName('outer')[0]; 63 lis=eles.getElementsByTagName('li'); 64 for (var i=0;i<lis.length;i++){ 65 lis[i].onclick=function () { 66 $(this).addClass('active').siblings().removeClass('active'); 67 var $name=$(this).attr('f'); 68 $("."+$name).removeClass('hide').siblings().addClass('hide') 69 } 70 } 71 </script> 72 73 74 75 76 77 78 79 80 81 82 83 </body> 84 </html>
添加对话框：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div class="box"> 10 <div class="item"> 11 <input type="button" value="+"> 12 <input type="text"> 13 </div> 14 </div> 15 <script src="jquery-3.2.1.js"></script> 16 <script> 17 $("[value='+']").click(function () { /*查找value等于+的标签，绑定点击事件*/ 18 // var $clone=$(".box .item").clone(); 19 var $clone=$(this).parent().clone(); /*当前的父类进行拷贝赋值给clone*/ 20 $clone.children(":button").val("-").attr('onclick','removeA(this)'); /*clone的子类里button标签的value值更改成-号，通过attr绑定一个函数然后绑定给onclick */ 21 $(".box").append($clone) /*把clone添加到box标签下*/ 22 }); 23 function removeA(self) { /*定义删除函数*/ 24 console.log($(self).parent()); /*打印当前标签的父标签*/ 25 $(self).parent().remove() /*删除本身标签*/ 26 } 27 </script> 28 </body> 29 </html>
jquecry 循环：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <ul> 10 <li>11</li> 11 <li class="item">22</li> 12 <li>33</li> 13 </ul> 14 <script src="jquery-3.2.1.js"></script> 15 <script> 16 /*jquery 的循环实现 俩种方式 第一种each*/ 17 /*$.each(arr,funtion())*/ 18 // arr=[123,456,'hello']; 19 // obj={"name":'egon',"age":22}; 20 //// $.each(arr,function (i,j) { 21 //// console.log(i); 22 //// console.log(j); 23 //// /*第一个参数是下标，第二个参数是元素值*/ 24 //// }) 25 // $.each(obj,function (i,j) { 26 // console.log(i); 27 // console.log(j); 28 // /*第一个参数是下标，第二个参数是元素值*/ 29 // }) 30 31 /*方式二*/ 32 $('ul li').each(function () { 33 if ($(this).hasClass('item')){ 34 alert($(this).text()) 35 } 36 }) 37 38 </script> 39 </body> 40 </html>
tab全选、反选：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <h1>表格实例</h1> 10 <button>全选</button> 11 <button>反选</button> 12 <button>取消</button> 13 14 <table border="2px"> 15 <tr> 16 <td><input type="checkbox" class="item"></td> 17 <td>222</td> 18 <td>333</td> 19 </tr> 20 <tr> 21 <td><input type="checkbox" class="item"></td> 22 <td>222</td> 23 <td>333</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox" class="item"></td> 27 <td>222</td> 28 <td>333</td> 29 </tr> 30 31 32 </table> 33 <script src="jquery-3.2.1.js"></script> 34 <script> 35 var eles=document.getElementsByTagName('button'); 36 // var inps=document.getElementsByClassName('item'); 37 for (var i=0;i<eles.length;i++){ 38 eles[i].onclick=function () { 39 if (this.innerText=='全选'){ 40 $(":checkbox").prop('checked',true); 41 // for (var j=0;j<inps.length;j++){ 42 // inps[j].checked=true 43 44 } 45 else if (this.innerText=='取消'){ 46 $(":checkbox").prop('checked',false) 47 }else{ 48 $(":checkbox").each(function () { 49 $(this).prop('checked',!$(this).prop('checked')); 50 // if ($(this).prop('checked')){ 51 // $(this).prop('checked',false) 52 // } 53 // else{ 54 // $(this).prop('checked',true) 55 // } 56 }) 57 } 58 } 59 } 60 </script> 61 </body> 62 </html>
动画效果：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 10 <p>hello world</p> 11 <img src="811435cd1587979c048e2a06d7c9d92f.jpg" height="200px" width="200px 12 "> 13 <button id="show">显示</button> 14 <button id="hide">隐藏</button> 15 <button id="toggle">toggle</button> 16 </body> 17 <script src="jquery-3.2.1.js"></script> 18 <script> 19 /*标签对象.事件（function（）{}）*/ 20 // $("#show").click(function () { 21 // 22 // }) 23 24 25 $("#hide").click(function () { 26 $("img").hide(1000) 27 }); 28 29 $("#show").click(function () { 30 $("img").show(1000) 31 }); 32 $("#toggle").click(function () { 33 $("img").toggle(1000) 34 }); 35 36 37 </script> 38 </html>
滑动效果：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #con{ 8 height: 80px; 9 background-color: greenyellow; 10 color: white; 11 text-align: center; 12 } 13 </style> 14 </head> 15 <body> 16 <p>hello world</p> 17 <button id="slideDown">slideDown</button> 18 <button id="slideUp">slideUp</button> 19 <button id="toggle">toggle</button> 20 21 <div id="con">滑动效果</div> 22 </body> 23 24 <script src="jquery-3.2.1.js"></script> 25 <script> 26 $("#slideDown").click(function () { 27 $("#con").slideDown(1000) 28 }); 29 $("#slideUp").click(function () { 30 $("#con").slideUp(1000) 31 }); 32 $("#toggle").click(function () { 33 $("#con").slideToggle(1000) 34 }) 35 </script> 36 37 38 39 </html>
文档操作：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div> 9 <p>ppp</p> 10 </div> 11 <button>add</button> 12 <script src="jquery-3.2.1.js"></script> 13 <script> 14 $("button").click(function () { 15 /*内部添加*/ 16 // $("div").prepend('<p>egon</p>'); /*在标签前边进行添加*/ 17 18 // $("div").append('<p>egon</p>'); /*在标签的后边添加*/ 19 20 // var $ele=$("<p>egon</p>"); 21 // $ele.appendTo("div"); /*把ele的内容添加到div标签中*/ 22 23 /*外部添加*/ 24 // $("div").after("<h1>egon</h1>"); /*在标签的后面进行添加*/ 25 26 // $("div").before("<h1>egon</h1>"); /*在标签的前面进行添加*/ 27 28 // $('div').replaceWith("<h1>egon</h1>"); /*替换标签内容*/ 29 30 // $('div').empty(); /*清空div标签*/ 31 32 // $('div').remove() /*删除标签*/ 33 34 // var $ele= $('div').clone(); /*进行拷贝然后赋值给变量*/ 35 36 // $("body").append($ele) /*在body里添加新拷贝的标签*/ 37 38 }) 39 </script> 40 </body> 41 </html>
淡入淡出：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .con{ 8 width: 200px; 9 height: 200px; 10 background-color: blue; 11 } 12 </style> 13 </head> 14 <body> 15 16 17 <div class="con"></div> 18 <button id="fadeIn">slideDown</button> 19 <button id="fadeOut">slideUp</button> 20 <button id="fadeTo">toggle</button> 21 22 <script src="jquery-3.2.1.js"></script> 23 <script> 24 $("#fadeIn").click(function () { 25 $(".con").fadeIn(2000) 26 }); 27 $("#fadeOut").click(function () { 28 $(".con").fadeOut(2000) 29 }); 30 $("#fadeTo").click(function () { 31 $(".con").fadeTo(2000) 32 }) 33 </script> 34 </body> 35 </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
