Python学习-day17 jQuery method and demo
一：介绍：
jQuery:是DOM和js的封装。jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。现在大多数的pc端的网站都是在使用jQuery。
使用版本：1.12兼容大多数的浏览器。2.x版本不支持IE9以下的。
参考中文文档：http://jquery.cuishifeng.cn/
二：查找
a:选择器
b:筛选器
三：操作（operation）
a:css操作。
b:属性的操作。
c：文本操作。
四：事件
优化。
五：扩展
添加函数
form表单验证。
六：Ajax:
偷偷发请求。
注意：1：在jQuery中element（元素）的意思就是标签（lable）。
2：调用jQuery可以用：$.xxx ;jquery.xxx；2种方式。我们采用第一种省略模式。$.xxx
3：jQuery对象转换成dom对象：$(this)[0] dom对象可以consolog.log()输出，输出的是对应的元素信息。而jQuery对象也可以进行输出但是输出的内容是对象信息。
4：jQuery的方法都是第2个单词首字符大写！jQueryreplaceWith,addClass.......
（一）查找：确定我们要操作的标签的位置。
a:选择器：
和CSS中的选择器类似。注意的是:选择器都是放在字符串内（''）。比如：$('#id');$('div')
code：
1 <div id="li" class="li">
2 <a>sdsd</a>
3 </div>
4 <div id="lm" class="lc">
5 <div>
6 <span>ddd</span>
7 </div>
8 </div>
9 <span>
10 <a>dd</a>
11 </span>
a: 选择器：针对单个标签进行查找。
#id：id选择器。
1 $('#li')
2 [<div id="li" class="li">aa</div>]
element：元素选择器。即标签选择器。
1 $('span');
2 [<span>ddd</span>, <span>…</span><a>dd</a></span>]
class选择器：注意的是这里不是类名。
1 $('.lc');
2 [<div id="lm" class="lc">…</div>]
组合选择器：注意这个是多个选择器组合，然后结果求并集。并且是用逗号（，）分开选择器。这个比较常用。
1 $('div,.lc');
2 [<div id="li" class="li">aa</div>, <div id="lm" class="lc">…</div>, <div>…</div><span>ddd</span></div>]
b:针对多个标签查找。
层级选择器：注意元素（标签）之间是用空格隔开。在对应标签内，查找所有子子孙孙中查找匹配对应的标签。
1 $('div span');
2 [<span>ddd</span>]
parent>child：是在对应的父标签下下的儿子标签查找子标签。
标签：
1 <span id="ln">
2 <a>dd</a>
3 <span><a>dd</a></span>
4 </span>
结果：
1 $('#ln >a');
2 [<a>dd</a>]
层级选择器和父子选择器的区别：
1 <div>
2 <a>
3 <h1>OK</h1>
4 </a>
5 <span>
6 <a>FUCK</a>
7 </span>
8 </div>
jQuery代码：
1 $("div > a")
2 $("div a")
结果：
1 1 [<a><h1>OK</h1></a>]
2 2 [<a><h1>OK</h1></a>,<a>FUCK</a>]
总结：层级选择器：在父标签内的所有匹配的标签，也就是在子子孙孙中去找对应匹配的标签。
parent>child选择器：在父标签的儿子中匹配的子标签！！！
lable1+lable2:匹配label1后面第一个标签。
1 $('#lm + span');
2 [<span>…</span>]
lable1 ~ lable2 匹配 lable1元素之后的所有兄弟元素（lable2）。
1 $('#lm ~ span')
2 [<span>…</span>]
b)筛选器：
:first ：匹配的元素集合中的第一个元素。
1 <ul>
2 <li>list item 1</li>
3 <li>list item 2</li>
4 <li>list item 3</li>
5 <li>list item 4</li>
6 <li>list item 5</li>
7 </ul>
1 $('li:first')
2 [<li>list item 1</li>]
:not(selector)匹配的元素不包含某个元素。注意：selector是去除元素。
1 <div>
2 <a>a</a>
3 <span>dd</span>
4 </div>
不可以这么用：
1 $('div:not(span)')
如果想匹配div下面的a元素：注意通过层级选择器找到我们想要的结果。
1 $('div a');//有空格。
2 [<a>a</a>]
3 $('div :not(span)');//空格
4 [<a>a</a>]
一般和表单属性联合使用：
表单对象属性：
:disable
:enable
:checked
:selected
1 <input type="radio" name="a" checked="checked"/>
2 <input name='a' type="radio" />
3 <select>
4 <option selected="selected">大连</option>
5 <option>北京</option>
6 </select>
代码：
1 $('option:not(:selected)')
2 [<option>北京</option>]
3 $('input:not(:checked)')
4 [<input name="a" type="radio">]
:even：索引值为偶数的元素匹配。odd：索引值是基数的匹配。
1 <ul>
2 <li>4</li>
3 <li>3</li>
4 <li>2</li>
5 <li>1</li>
6 </ul>
1 [<li>4</li>, <li>3</li>, <li>2</li>, <li>1</li>]
2 $('ul li:even')
3 [<li>4</li>, <li>2</li>]
索引基数匹配：
1 $('ul li:odd')
2 [<li>3</li>, <li>1</li>]
:eq()索引值的匹配。
1 [<li>4</li>, <li>3</li>, <li>2</li>, <li>1</li>]
2 $('ul li:eq(0)')
3 [<li>4</li>]
和方法:eq()效果一样。
1 $('ul li')
2 [<li>4</li>, <li>3</li>, <li>2</li>, <li>1</li>]
3 $('ul li').eq(0)
4 [<li>4</li>]
筛选器：
eq()方法。上面已经介绍，如果参数为正数表示正向查找，负数为反向查找。注意的是：负数的时候是从-1开始。
first()匹配第一个元素用eq就可以解决。eq（0）
last()匹配元素集合里的最后一个。eq(-1)
1 <ul>
2 <li>4</li>
3 <li>3</li>
4 <li>2</li>
5 <li class="a">1</li>
6 </ul>
1 $('ul li').first()
2 [<li>4</li>]
3 $('ul li').eq(0)
4 [<li>4</li>]
5 $('ul li').last()
6 [<li class="a">1</li>]
7 $('ul li').eq(-1)
8 [<li class="a">1</li>]
hasClass(classname)匹配集合是否存在相应的class。返回的是bool值。
1 <ul>
2 <li>4</li>
3 <li>3</li>
4 <li>2</li>
5 <li class="a">1</li>
6 </ul>
1 $('ul li').hasClass("a")
2 true
children():查找匹配的元素的子元素。类似于parent>child但是有区别parent>child只能匹配child对应的子标签。而children()方法没有这个差异。
1 <div class="OK">
2 <span>a</span>
3 <a>aa</a>
4 <span>d</span>
5 </div>
1 $('.OK').children()
2 [<span>a</span>, <a>aa</a>, <span>d</span>]
3 $('.OK > span')
4 [<span>a</span>, <span>d</span>]
find() 从匹配中的元素进行查找。这个函数是找出正在处理的元素的后代元素的好方法。参数为元素或者一个用于匹配元素的jQuery对象或者DOM元素
1 <div class="OK">
2 <span>a</span>
3 <a>aa</a>
4 <span class="b">d</span>
5 </div>
1 $('div').find($('.b'))
2 [<span class="b">d</span>]
3 $('div').find('.b')
4 [<span class="b">d</span>]
next() 取得一个包含匹配的元素集合中每个元素的紧邻的后面同辈元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。
1 <div class="OK">
2 <span class="c">a</span>
3 <a>aa</a>
4 <a>bb</a>
5 <span class="b">d</span>
6 </div>
1 $('.c').nextAll('a')
2 [<a>aa</a>, <a>bb</a>]
3 $('.c').next('a')
4 [<a>aa</a>]
nextUntil(参数)查找当前元素之后所有的同辈元素，知道遇到匹配的那个元素为止。如果有参数，参数可以是元素（标签），或者jQuery对象。返回值是包括当前元素，到匹配到参数的元素停止，但是不包含
参数元素。
1 <div class="OK">
2 <span class="c">a</span>
3 <a>aa</a>
4 <a>bb</a>
5 <span class="b">d</span>
6 <h1>test</h1>
7 </div>
不包含h1标签以及当前元素<span class="c"><span/>的所有同一级的元素数组集合。
1 $('.c').nextUntil('h1')
2 [<a>aa</a>, <a>bb</a>, <span class="b">d</span>]
同样：
paren()查找当前元素唯一父元素的数组集合，结果是父元素（标签）以及父元素下面所有元素的集合。
1 <div class="OK">
2 <span class="c">a</span>
3 <a>aa</a>
4 <a>bb</a>
5 <span class="b">d</span>
6 <h1>test</h1>
7 </div>
1 $('.c').parent()
2 [<div class="OK">…</div>]
注意的是：匹配唯一父元素以及父元素包含的子子孙孙元素的集合。
parents():匹配所有的当前元素的父元素的集合。不包含根元素。
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="OK">
9 <span class="c">a</span>
10 <a>aa</a>
11 <a>bb</a>
12 <span class="b">d</span>
13 <h1>test</h1>
14 </div>
15 <script src="jquery-1.12.4.js"></script>
16 </body>
17 </html>
注意没有：<!DOCTYPE html>
parentUntil(参数) 和nextUntil()类似。也是直到匹配到参数元素停止，返回所有经历的父元素 不包含匹配的参数元素！！！
prev()匹配当前元素前一个紧邻的同辈元素。和next()相反。
1 <div class="OK">
2 <span class="c">a</span>
3 <a>aa</a>
4 <a>bb</a>
5 <span class="b">d</span>
6 <h1>test</h1>
7 </div>
1 $('.b').prev()
2 [<a>bb</a>]
1 $('.b').prevAll()
2 [<a>bb</a>, <a>aa</a>, <span class="c">a</span>]
1 $('.b').prevUntil('span')
2 [<a>bb</a>, <a>aa</a>]
注意：prevUntil(参数) 和之前的nextUntil(参数)是一样。遍历当前元素之前元素，直到匹配到参数元素为止，不包含匹配的元素和当前元素的所有遍历元素的集合。
很重要的一个筛选器：
属性筛选器：
[attribute=val]：匹配相应的元素（标签）的属性值是否等于val。这个很常用。单个表示查找包含该属性的元素，2个值得时候，如果该属性对存在的话，返回元素的集合的数组。
1 <input name='a' type="radio"/>
2 <input name='c' type="radio"/>
3 <input name='c' type="radio" checked="checked"/>
4 <input name="f" type="text"/>
匹配input标签中name=a的标签。
1 $('input[name=a]')
2 [<input name="a" type="radio">]
3 $('input[checked=checked]')
这个是查询。
c：属性值得设置：
attr() 查看元素的属性设置：
1 <body>
2 <div class="ok" id="li">ok</div>
3 <script src="jquery-1.12.4.js"></script>
4 </body>
1 $('div').attr('id')
2 "li"
3 $('div').attr('class')//查看属性值
4 "ok"
5 $('div').attr('class','ko')//设置属性值
6 [<div class="ko" id="li">ok</div>]
注意：如果参数是一个 是查看匹配当前元素的属性值，如果是参数是2个，是修改某个属性值。如上。
removeAttr()删除某个属性值。
1 $('div').removeAttr('class')
2 [<div id="li">ok</div>]
注意：这个和addclass 和removeclass 是有区别:
removeAttr()是删除整个属性，而removeclass()方法是去掉class中的一个css样式，而且是如果当前元素有多个样式的时候，可以保留剩下的，
而removeAttr()确是把整个属性值删除掉。
d：CSS类操作：
addclass()添加样式；
removeclass()删除样式：
1 $('div').addClass('m')
2 [<div class="ok m" id="li">ok</div>]
3 $('div').removeClass('m')
4 [<div class="ok" id="li">ok</div>]
d:html 代码、文本、值
1 <body>
2 <div class="cc" id="li"> <a>ko</a>ok</div>
3 <input type="text" value="ok"/>
4 <script src="jquery-1.12.4.js"></script>
5 </body>
1 $('input').val()
2 "ok"
3 $('div').html()
4 " <a>ko</a>ok"
5 $('div').text()
6 " kook"
当使用这些方法的时候，如果不加入参数的时候，是查询功能。
区别：
html ()：匹配的当前元素包含的html标签以及文本内容。
text()：只是读取文本的内容。
val()： 是读匹配的当前元素内设置的value值。
当使用这些方法的时候。参数不为空的时候，对匹配的元素的内容进行修改。
效果:
注意：
在所有的操作中，都是针对匹配当前元素的标签‘’包裹‘’的内容替换成我们参数的内容。
对于val()加内容的时候。修改当前文本框显示的值，而不是默认值。默认值是不变的。如上显示。
我们可以进行属性的查看和设置。这里用到jQuery的prop()方法。单个是匹配查询，2个值进行属性值的修改。查询匹配的元素是第一个，返回该属性的值不是数组。如果不指定单个元素（标签），进行属性值的设置的时候，会对所有匹配的标签进行属性值的设置的。
一般进行属性值的设置。
1 <input name='a' type="checkbox"/>
2 <input name='c' type="radio"/>
3 <input name='c' id='u' type="radio" checked="checked"/>
4 <input name="f" type="text"/>
1 $('input').prop('type')
2 "checkbox"
1 $('input').prop('type','radio')
2 [<input name="a" type="radio">, <input name="c" type="radio">, <input name="c" type="radio" checked="checked">, <input name="f" type="radio">]
如上是key/value形式对元素的修改，即：prop(key,value)
1 $('input[type=radio]').prop('type','text')
2 [<input name="c" type="text">, <input name="d" id="u" type="text" checked="checked">]
左侧多级菜单，点击菜单内容显示反之隐藏。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .menu{
8 width: 200px;
9 position: fixed;
10 left:0;
11 top:0;
12 bottom: 0;
13 background-color:lightgrey;
14 }
15 .menu2{
16 background-color: #0066FF;
17 color: #E6E6FA;
18 margin: 0;
19 height: 40px;
20 line-height: 40px;
21 border: solid 1px gray;
22 }
23 .hide{
24 display: none;
25 }
26 p{
27 text-align: center;
28 }
29 .b{
30 overflow: auto;
31 }
32 </style>
33 </head>
34 <body>
35 <div class="menu">
36 <div class="body">
37 <p class="menu2" onclick="showmen(this)">菜单一</p>
38 <div class="hide b">
39 <p>内容一</p>
40 <p>内容一</p>
41 <p>内容一</p>
42 </div>
43 </div>
44 <div class="body">
45 <p class="menu2" onclick="showmen(this)">菜单二</p>
46 <div class="hide b">
47 <p>内容二</p>
48 <p>内容二</p>
49 <p>内容二</p>
50 </div>
51 </div>
52 <div class="body">
53 <p class="menu2" onclick="showmen(this)">菜单三</p>
54 <div class="hide b">
55 <p>内容三</p>
56 <p>内容三</p>
57 <p>内容三</p>
58 </div>
59 </div>
60 </div>
61 <script src="jquery-1.12.4.js"></script>
62 <script>
63 function showmen(obj){
64 $(obj).next().removeClass('hide');
65 $(obj).parent().siblings().find('.b').addClass('hide');
66 }
67 </script>
68 </body>
69 </html>
效果：
注意：
1：在绑定事件的时候，执行函数的时候，出入this参数，this参数为当前操作dom对象元素。
2：可以将this参数转换成jQuery对象$(this)
3：jQuery对象转换成dom对象，$(this)[0]
4：dom对象可以进行输出。
5：匹配所有的兄弟对象的时候，可以用find匹配我们想要操作的对象！！！
6：至于在调用函数的时候。是否传入this 当前操作dom元素，建议传入。因为在函数操作的时候，this是动态变化的对象，如果不用具体的arg来指之前的操作的dom元素的话，容易出错！！！！！！！！！！！！！！
对于全选、取消、反选实现：
匿名函数执行方式：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .but{
8 margin-left: 15px;
9 }
10 </style>
11 </head>
12 <body>
13 <div>
14 <input class="but" type="button" value="全选" onclick="SelectAll()">
15 <input class="but" type="button" value="取消" onclick="CancleAll()">
16 <input class="but" type="button" value="反选" onclick="Revers(this)">
17 </div>
18 <table border="1px">
19 <thead>
20 <tr>
21 <th>number</th>
22 <th>hostname</th>
23 <th>IP</th>
24 <th>port</th>
25 </tr>
26 </thead>
27 <tbody>
28 <tr>
29 <td class="a"><input type="checkbox"></td>
30 <td>c1.com</td>
31 <td>172.17.33.75</td>
32 <td>22</td>
33 </tr>
34 <tr>
35 <td class="a"><input type="checkbox"></td>
36 <td>c2.com</td>
37 <td>172.17.33.74</td>
38 <td>22</td>
39 </tr>
40 <tr>
41 <td class="a"><input type="checkbox"></td>
42 <td>c3.com</td>
43 <td>172.17.33.73</td>
44 <td>22</td>
45 </tr>
46 </tbody>
47 </table>
48 <script src="jquery-1.12.4.js"></script>
49 <script>
50 function SelectAll(){
51 $('input[type=checkbox]').prop('checked',true)
52 }
53 function CancleAll(){
54 $('input[type=checkbox]').prop('checked',false)
55 }
56 function Revers(){
57 $('input[type=checkbox]').each( function(){
58 if ($(this).prop('checked')){//this是动态指当前匹配操作元素。此时的this是指上面的$('input{type-checkbox}')匹配的元素，不是上面函数Revers（）绑定事件的标签。
59 $(this).prop('checked',false)
60 }else {
61 $(this).prop('checked',true)
62 }
63 })
64 }
65 // function f1(ths){
66 // if ($(ths).prop('checked')){
67 // $(ths).prop('checked',false)
68 // }else {
69 // $(ths).prop('checked',true)
70 // }
71 // }
72 </script>
73 </body>
74 </html>
注意：
在jQuery中如果匹配的元素是一个数组集合的话。对其进行相同操作的时候，不用进行内部的元素的循环，jQuery 内部帮助我们进行循环操作了。并加上我们要进行的操作。
比如：$('div').addClass('ok')
$('div')是一个元素的集合的话，我们不需要进行for循环内部的元素进行addClass（'ok'）的操作。默认jQuery帮我们实现了。
如果想对元素的集合进行每个操作的话，可以用each(function(i))来实现for循环。其中的function(i) i是这个元素集合($('div')的数组集合的索引。
不用匿名函数，普通函数执行方式：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .but{
8 margin-left: 15px;
9 }
10 </style>
11 </head>
12 <body>
13 <div>
14 <input class="but" type="button" value="全选" onclick="SelectAll()">
15 <input class="but" type="button" value="取消" onclick="CancleAll()">
16 <input class="but" type="button" value="反选" onclick="Revers(this)">
17 </div>
18 <table border="1px">
19 <thead>
20 <tr>
21 <th>number</th>
22 <th>hostname</th>
23 <th>IP</th>
24 <th>port</th>
25 </tr>
26 </thead>
27 <tbody>
28 <tr>
29 <td class="a"><input type="checkbox"></td>
30 <td>c1.com</td>
31 <td>172.17.33.75</td>
32 <td>22</td>
33 </tr>
34 <tr>
35 <td class="a"><input type="checkbox"></td>
36 <td>c2.com</td>
37 <td>172.17.33.74</td>
38 <td>22</td>
39 </tr>
40 <tr>
41 <td class="a"><input type="checkbox"></td>
42 <td>c3.com</td>
43 <td>172.17.33.73</td>
44 <td>22</td>
45 </tr>
46 </tbody>
47 </table>
48 <script src="jquery-1.12.4.js"></script>
49 <script>
50 function SelectAll(){
51 $('input[type=checkbox]').prop('checked',true)
52 }
53 function CancleAll(){
54 $('input[type=checkbox]').prop('checked',false)
55 }
56 function Revers(){
57 $('input[type=checkbox]').each(
58 f1($('input[type=checkbox]'))
59 );
60 }
61 function f1(ths){
62 if (ths.prop('checked')){
63 ths.prop('checked',false)
64 }else {
65 ths.prop('checked',true)
66 }
67 }
68 </script>
69 </body>
70 </html>
注意：
1：this 是dom元素。也可以理解是匹配到的标签，他是动态的对象，他因匹配的对象不同，值代表元素标签也不一样。
方法：clone()需要注意！！！！！！
需求：当我们需要复制一些输入框的时候，做相同的操作的时候，代码是一样，如果重复复制html代码，对于我们来说增加代码。没有什么意义。用jQuery的clone方法来进行。
1 <div>
2 <p>
3 <a onclick="add(this)">+</a>
4 <input type="text"/>
5 </p>
6 </div>
7 <script src="jquery-1.12.4.js"></script>
8 <script>
9 function add(ths){
10 var p=$(ths).parent().clone();
11 p.find('a').text('-');
12 p.find('a').attr('onclick','remove(this)');
13 $(ths).parent().parent().append(p);
14 }
15 function remove(ths){
16 $(ths).parent().remove()
17 }
18 </script>
效果：
书写的过程中出现如下错误：
1 var p= $(ths).parent().clone();
2 p.parent().append(p)
3 console.log(p.parent()[0])
用克隆的副本来找父元素。结果返回的是undefined。
通过is来判断克隆副本是否为一个具有一个‘标记位置‘对象属性。
1 <div>
2 <p class="a">
3 <a onclick="add(this)">+</a>
4 <input type="text" />
5 </p>
6 </div>
7 <script src="jquery-1.12.4.js"></script>
8 <script>
9 function add(ths){
10 var p= $(ths).parent().clone();
11 var p1=$('p');
12 var p2=$('.a');
13 if(p.is(p1)){
14 console.log(1)
15 }else {
16 console.log(2)
17 }
18 }
19 </script>
返回：
所以克隆副本和我们的用选择器筛选的jQuery对象是不一样。所以不能用这个来指定我们想要的父元素。即使指定的话，出现的对话框，点击新生成的对话框，也会出现添加出来的效果也不是我们想要的。
1 注意：
2 1、在jQuery 1.4之前，clone()函数只额外复制元素的绑定事件，从1.4版本开始，才开始支持复制元素的附加数据。
3
4 2、1.5.0版本时(只有1.5.0)，参数withDataAndEvents的默认值被错误地设定为true，从1.5.1开始，其默认值才被改回false。
