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 一、在jQuery 1.4以前，clone()函數只額外複製元素的綁定事件，從1.4版本開始，纔開始支持複製元素的附加數據。 3 4 二、1.5.0版本時(只有1.5.0)，參數withDataAndEvents的默認值被錯誤地設定爲true，從1.5.1開始，其默認值才被改回false。