jQuery练习总结(二)

---------------------------------------

  1 <!DOCTYPE html>
  2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3 <html>
  4 <head>
  5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6     <title>Untitled Document</title>
  7     <link rel="stylesheet" type="text/css" href="css/style.css">
  8     <style type="text/css">
  9         div, span, p {
 10             width: 140px;
 11             height: 140px;
 12             margin: 5px;
 13             background: #aaa;
 14             border: #000 1px solid;
 15             float: left;
 16             font-size: 17px;
 17             font-family: Verdana;
 18         }
 19 
 20         div.mini {
 21             width: 55px;
 22             height: 55px;
 23             background-color: #aaa;
 24             font-size: 12px;
 25         }
 26 
 27         div.hide {
 28             display: none;
 29         }
 30     </style>
 31     <script type="text/javascript" src="jquery.js"></script>
 32     <script type="text/javascript">
 33         $(function(){
 34             //alert("1");
 35             function anmateIt(){
 36                 $("#mover").slideToggle("slow",anmateIt);
 37             }
 38             //alert("2");
 39             anmateIt();
 40             //alert("3");
 41             $("#btn1").click(function(){
 42                 $("div:first").css("background", "#ffbbaa");
 43             });
 44             $("#btn2").click(function(){
 45                 $("div:last").css("background", "#ffbbaa");
 46             });
 47             $("#btn3").click(function(){
 48                 $("div:not(.one)").css("background", "#ffbbaa");
 49             });
 50 
 51             $("#btn4").click(function(){
 52                 $("div:even").css("background", "#ffbbaa");
 53             });
 54             $("#btn5").click(function(){
 55                 $("div:odd").css("background", "#ffbbaa");
 56             });
 57             $("#btn6").click(function(){
 58                 $("div:gt(3)").css("background", "#ffbbaa");
 59             });
 60 
 61             $("#btn7").click(function(){
 62                 $("div:eq(3)").css("background", "#ffbbaa");
 63             });
 64             $("#btn8").click(function(){
 65                 $("div:lt(3)").css("background", "#ffbbaa");
 66             });
 67             $("#btn9").click(function(){
 68                 $(":header").css("background", "#ffbbaa");
 69             });
 70 
 71             $("#btn10").click(function(){
 72                 $(":animated").css("background", "#ffbbaa");
 73             });
 74             $("#btn11").click(function(){
 75                 $("#two").nextAll("span:first").css("background", "#ffbbaa");
 76             });
 77 
 78         })
 79 //        $(document).ready(function(){
 80 //
 81 //        });
 82 
 83 
 84     </script>
 85 </head>
 86 <body>
 87 <input type="button" value="选择第一个 div 元素" id="btn1" />
 88 <input type="button" value="选择最后一个 div 元素" id="btn2" />
 89 <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
 90 
 91 <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
 92 <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
 93 <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
 94 
 95 <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
 96 <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
 97 <input type="button" value="选择所有的标题元素" id="btn9" />
 98 
 99 <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
100 <input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11" />
101 
102 <h3>基本选择器.</h3>
103 <br><br>
104 <div class="one" id="one">
105     id 为 one,class 为 one 的div
106     <div class="mini">class为mini</div>
107 </div>
108 <div class="one" id="two" title="test">
109     id为two,class为one,title为test的div
110     <div class="mini" title="other">class为mini,title为other</div>
111     <div class="mini" title="test">class为mini,title为test</div>
112 </div>
113 <div class="one">
114     <div class="mini">class为mini</div>
115     <div class="mini">class为mini</div>
116     <div class="mini">class为mini</div>
117     <div class="mini"></div>
118 </div>
119 <div class="one">
120     <div class="mini">class为mini</div>
121     <div class="mini">class为mini</div>
122     <div class="mini">class为mini</div>
123     <div class="mini" title="tesst">class为mini,title为tesst</div>
124 </div>
125 <div style="display:none;" class="none">style的display为"none"的div</div>
126 <div class="hide">class为"hide"的div</div>
127 <div>
128     包含input的type为"hidden"的div<input type="hidden" size="8">
129 </div>
130 <span id="span">^^span元素 111^^</span>
131 <span id="span">^^span元素 222^^</span>
132 <div id="mover">正在执行动画的div元素.</div>
133 </body>
134 </html>

--------------------------------------

 1 <!DOCTYPE html>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 3 <html>
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6     <title>Untitled Document</title>
 7     <link rel="stylesheet" type="text/css" href="css/style.css">
 8     <style type="text/css">
 9         div, span, p {
10             width: 140px;
11             height: 140px;
12             margin: 5px;
13             background: #aaa;
14             border: #000 1px solid;
15             float: left;
16             font-size: 17px;
17             font-family: Verdana;
18         }
19 
20         div.mini {
21             width: 55px;
22             height: 55px;
23             background-color: #aaa;
24             font-size: 12px;
25         }
26 
27         div.hide {
28             display: none;
29         }
30     </style>
31     <script type="text/javascript" src="jquery.js"></script>
32     <script type="text/javascript">
33         $(document).ready(function(){
34             $("#btn1").click(function(){
35                 $("div:contains('di')").css("background","#ffbbaa");
36             });
37             $("#btn2").click(function () {
38                 $("div:empty").css("background","#ffbbaa");
39             });
40             $("#btn3").click(function () {
41                 $("div:has(.mini)").css("background","#ffbbaa");
42             });
43             $("#btn4").click(function () {
44                 $("div:parent").css("background","#ffbbaa");//即存在子元素 不为空的div元素集合
45                 //$("div:not(:empty)").css("background","#ffbbaa");//这种和上面的等价
46             });
47         });
48 
49 
50     </script>
51 </head>
52 <body>
53 <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
54 <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
55 <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
56 <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
57 
58 <br><br>
59 <div class="one" id="one">
60     id 为 one,class 为 one 的div
61     <div class="mini">class为mini</div>
62 </div>
63 <div class="one" id="two" title="test">
64     id为two,class为one,title为test的div
65     <div class="mini" title="other">class为mini,title为other</div>
66     <div class="mini" title="test">class为mini,title为test</div>
67 </div>
68 <div class="one">
69     <div class="mini">class为mini</div>
70     <div class="mini">class为mini</div>
71     <div class="mini">class为mini</div>
72     <div class="mini"></div>
73 </div>
74 <div class="one">
75     <div class="mini">class为mini</div>
76     <div class="mini">class为mini</div>
77     <div class="mini">class为mini</div>
78     <div class="mini" title="tesst">class为mini,title为tesst</div>
79 </div>
80 <div style="display:none;" class="none">style的display为"none"的div</div>
81 <div class="hide">class为"hide"的div</div>
82 <div>
83     包含input的type为"hidden"的div<input type="hidden" size="8">
84 </div>
85 <div id="mover">正在执行动画的div元素.</div>
86 </body>
87 </html>

------------------------------------------

 1 <!DOCTYPE html>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 3 <html>
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6     <title>Untitled Document</title>
 7     <link rel="stylesheet" type="text/css" href="css/style.css">
 8     <style type="text/css">
 9         div, span, p {
10             width: 140px;
11             height: 140px;
12             margin: 5px;
13             background: #aaa;
14             border: #000 1px solid;
15             float: left;
16             font-size: 17px;
17             font-family: Verdana;
18         }
19 
20         div.mini {
21             width: 55px;
22             height: 55px;
23             background-color: #aaa;
24             font-size: 12px;
25         }
26 
27         div.hide {
28             display: none;
29         }
30     </style>
31     <script type="text/javascript" src="jquery.js"></script>
32     <script type="text/javascript">
33         $(document).ready(function(){
34 
35             $("#btn1").click(function(){
36                 $("div:visible").css("background", "#ffbbaa");
37             });
38             $("#btn2").click(function(){
39                 //alert($("div:hidden").length);
40                 //show(time): 可以使不可见的元素变为可见, time 表示时间, 以
41                 //毫秒为单位
42                 //jQuery 的很多方法支持方法的连缀, 即一个方法的返回值仍然是一个jQuery对象
43                 //jQuery 对象: 可以继续调用该对象的其他方法.
44                 $("div:hidden").show(2000).css("background",
45                         "#ffbbaa");
46             });
47             $("#btn3").click(function(){
48                 //val() 方法可以返回某一个表单元素的 value 属性值.
49                 alert($("input:hidden").val());
50             });
51         });
52 
53     </script>
54 </head>
55 <body>
56 <input type="button" value="选取所有可见的  div 元素" id="btn1">
57 <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
58 <input type="button" value="选择所有不可见的 input 元素" id="btn3" />
59 
60 <br><br>
61 <div class="one" id="one">
62     id 为 one,class 为 one 的div
63     <div class="mini">class为mini</div>
64 </div>
65 <div class="one" id="two" title="test">
66     id为two,class为one,title为test的div
67     <div class="mini" title="other">class为mini,title为other</div>
68     <div class="mini" title="test">class为mini,title为test</div>
69 </div>
70 <div class="one">
71     <div class="mini">class为mini</div>
72     <div class="mini">class为mini</div>
73     <div class="mini">class为mini</div>
74     <div class="mini"></div>
75 </div>
76 <div class="one">
77     <div class="mini">class为mini</div>
78     <div class="mini">class为mini</div>
79     <div class="mini">class为mini</div>
80     <div class="mini" title="tesst">class为mini,title为tesst</div>
81 </div>
82 <div style="display:none;" class="none">style的display为"none"的div</div>
83 <div class="hide">class为"hide"的div</div>
84 <div>
85     包含input的type为"hidden"的div
86     <input type="hidden" value="123456789000" size="8">
87 </div>
88 <div id="mover">正在执行动画的div元素.</div>
89 </body>
90 </html>

--------------------------------------------

  1 <!DOCTYPE html>
  2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3 <html>
  4 <head>
  5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6     <title>Untitled Document</title>
  7     <link rel="stylesheet" type="text/css" href="css/style.css">
  8     <style type="text/css">
  9         div, span, p {
 10             width: 140px;
 11             height: 140px;
 12             margin: 5px;
 13             background: #aaa;
 14             border: #000 1px solid;
 15             float: left;
 16             font-size: 17px;
 17             font-family: Verdana;
 18         }
 19 
 20         div.mini {
 21             width: 55px;
 22             height: 55px;
 23             background-color: #aaa;
 24             font-size: 12px;
 25         }
 26 
 27         div.hide {
 28             display: none;
 29         }
 30     </style>
 31     <script type="text/javascript" src="jquery.js"></script>
 32     <script type="text/javascript">
 33         $(function(){
 34 
 35             $("#btn1").click(function(){
 36                 $("div[title]").css("background", "#ffbbaa");
 37             });
 38             $("#btn2").click(function(){
 39                 $("div[title='test']").css("background", "#ffbbaa");
 40             });
 41             $("#btn3").click(function(){
 42                 //选取的元素中包含没有 title属性 的 div 元素.
 43                 $("div[title!='test']").css("background", "#ffbbaa");
 44             });
 45 
 46             $("#btn4").click(function(){
 47                 $("div[title^='te']").css("background", "#ffbbaa");
 48             });
 49 
 50             $("#btn5").click(function(){
 51                 $("div[title$='est']").css("background", "#ffbbaa");
 52             });
 53             $("#btn6").click(function(){
 54                 $("div[title*='es']").css("background", "#ffbbaa");
 55             });
 56             $("#btn7").click(function(){
 57                 $("div[id][title*='es']").css("background", "#ffbbaa");
 58             });
 59 
 60             $("#btn8").click(function(){
 61                 $("div[title][title!='test']").css("background", "#ffbbaa");
 62             });
 63           
 64         })
 65     </script>
 66 </head>
 67 <body>
 68 <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
 69 <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2"/>
 70 <input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3"/>
 71 <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4"/>
 72 
 73 <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5"/>
 74 <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6"/>
 75 <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7"/>
 76 <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/>
 77 
 78 <br><br>
 79 <div class="one" id="one">
 80     id 为 one,class 为 one 的div
 81     <div class="mini">class为mini</div>
 82 </div>
 83 <div class="one" id="two" title="test">
 84     id为two,class为one,title为test的div
 85     <div class="mini" title="other">class为mini,title为other</div>
 86     <div class="mini" title="test">class为mini,title为test</div>
 87 </div>
 88 <div class="one">
 89     <div class="mini">class为mini</div>
 90     <div class="mini">class为mini</div>
 91     <div class="mini">class为mini</div>
 92     <div class="mini"></div>
 93 </div>
 94 <div class="one">
 95     <div class="mini">class为mini</div>
 96     <div class="mini">class为mini</div>
 97     <div class="mini">class为mini</div>
 98     <div class="mini" title="tesst">class为mini,title为tesst</div>
 99 </div>
100 <div style="display:none;" class="none">style的display为"none"的div</div>
101 <div class="hide">class为"hide"的div</div>
102 <div>
103     包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
104 </div>
105 <div id="mover">正在执行动画的div元素.</div>
106 </body>
107 </html>

--------------------------------------

 1 <!DOCTYPE html>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 3 <html>
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6     <title>Untitled Document</title>
 7     <link rel="stylesheet" type="text/css" href="css/style.css">
 8     <style type="text/css">
 9         div, span, p {
10             width: 140px;
11             height: 140px;
12             margin: 5px;
13             background: #aaa;
14             border: #000 1px solid;
15             float: left;
16             font-size: 17px;
17             font-family: Verdana;
18         }
19 
20         div.mini {
21             width: 55px;
22             height: 55px;
23             background-color: #aaa;
24             font-size: 12px;
25         }
26 
27         div.hide {
28             display: none;
29         }
30     </style>
31     <script type="text/javascript" src="jquery.js"></script>
32     <script type="text/javascript">
33         $(document).ready(function(){
34 
35             $("#btn1").click(function(){
36                 //选取子元素, 需要在选择器前添加一个空格.
37                 $("div.one :nth-child(2)").css("background", "#ffbbaa");
38             });
39             $("#btn2").click(function(){
40                 $("div.one :first-child").css("background", "#ffbbaa");
41             });
42             $("#btn3").click(function(){
43                 $("div.one :last-child").css("background", "#ffbbaa");
44             });
45 
46             $("#btn4").click(function(){
47                 $("div.one :only-child").css("background", "#ffbbaa");
48             });
49 
50 
51         });
52     </script>
53 </head>
54 <body>
55 <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
56 <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
57 <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
58 <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
59 
60 <br><br>
61 <div class="one" id="one">
62     id 为 one,class 为 one 的div
63     <div class="mini">class为mini</div>
64 </div>
65 <div class="one" id="two" title="test">
66     id为two,class为one,title为test的div
67     <div class="mini" title="other">class为mini,title为other</div>
68     <div class="mini" title="test">class为mini,title为test</div>
69 </div>
70 <div class="one">
71     <div class="mini">class为mini</div>
72     <div class="mini">class为mini</div>
73     <div class="mini">class为mini</div>
74     <div class="mini"></div>
75 </div>
76 <div class="one">
77     <div class="mini">class为mini</div>
78     <div class="mini">class为mini</div>
79     <div class="mini">class为mini</div>
80     <div class="mini" title="tesst">class为mini,title为tesst</div>
81 </div>
82 <div style="display:none;" class="none">style的display为"none"的div</div>
83 <div class="hide">class为"hide"的div</div>
84 <div>
85     包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
86 </div>
87 <div id="mover">正在执行动画的div元素.</div>
88 </body>
89 </html>

-----------------------------------------------

  1 <!DOCTYPE html>
  2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3 <html>
  4 <head>
  5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6     <title>Untitled Document</title>
  7     <script type="text/javascript" src="jquery.js"></script>
  8     <script type="text/javascript">
  9         $(function(){
 10             $("#btn1").click(function(){
 11                 //使所有的可用的单行文本框的 value 值变为 尚硅谷
 12                 alert($(":text:enabled").val());
 13                 $(":text:enabled").val("尚硅谷");
 14 
 15             });
 16             $("#btn2").click(function(){
 17                 $(":text:disabled").val("www.atguigu.com");
 18             });
 19             $("#btn3").click(function(){
 20                 var num =
 21                         $(":checkbox[name='newsletter']:checked").length;
 22                 alert(num);
 23             });
 24 
 25             $("#btn4").click(function(){
 26                 $(":checkbox[name='newsletter']:checked").each(function(){
 27                     alert(this.value);
 28                 });
 29             });
 30 
 31 
 32             $("#btn5").click(function(){
 33                 //实际被选择的不是 select, 而是 select 的 option 子节点
 34                 //所以要加一个 空格.
 35                 //var len = $("select :selected").length
 36                 //alert(len);
 37 
 38                 //因为 $("select :selected") 选择的是一个数组
 39                 //当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.
 40                 //alert($("select :selected").val());
 41 
 42                 //jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在
 43                 //得到的 DOM 对象, 而不是一个 jQuery 对象
 44                 $("select :selected").each(function(){
 45                     alert(this.value);
 46                     //alert(this.firstChild.nodeValue);
 47                 });
 48             });
 49 
 50 
 51         })
 52     </script>
 53 
 54 </head>
 55 <body>
 56 <h3>表单对象属性过滤选择器</h3>
 57 <button id="btn1">对表单内 可用input 赋值操作.</button>
 58 <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
 59 <button id="btn3">获取多选框选中的个数.</button>
 60 <button id="btn4">获取多选框选中的内容.</button><br /><br />
 61 <button id="btn5">获取下拉框选中的内容.</button><br /><br />
 62 
 63 <form id="form1" action="#">
 64     可用元素: <input name="add" value="可用文本框1"/><br>
 65     不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>
 66     可用元素: <input name="che" value="可用文本框2"/><br>
 67     不可用元素: <input name="name" disabled="true" value="不可用文本框"/><br>
 68     <br>
 69 
 70     多选框: <br>
 71     <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
 72     <input type="checkbox" name="newsletter" value="test2" />test2
 73     <input type="checkbox" name="newsletter" value="test3" />test3
 74     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
 75     <input type="checkbox" name="newsletter" value="test5" />test5
 76 
 77     <br><br>
 78     下拉列表1: <br>
 79     <select name="test" multiple="multiple" style="height: 100px">
 80         <option>浙江</option>
 81         <option selected="selected">辽宁</option>
 82         <option>北京</option>
 83         <option selected="selected">天津</option>
 84         <option>广州</option>
 85         <option>湖北</option>
 86     </select>
 87 
 88     <br><br>
 89     下拉列表2: <br>
 90     <select name="test2">
 91         <option>浙江</option>
 92         <option>辽宁</option>
 93         <option selected="selected">北京</option>
 94         <option>天津</option>
 95         <option>广州</option>
 96         <option>湖北</option>
 97     </select>
 98 
 99     <textarea rows="" cols=""></textarea>
100 </form>
101 </body>
102 </html>

相关阅读:
重启sqlserver服务命令
 k8s学习
 collection包1.1.0都升级了什么功能
 Golang项目的测试实践
 一个让业务开发效率提高10倍的golang库
 GopherChina第二天小结
 GopherChina第一天小结
 slice是什么时候决定要扩张？
史上最快的后台搭建框架
 gorm的日志模块源码解析
原文地址：https://www.cnblogs.com/Joke-Jay/p/6752563.html