python學習第十五課 --jquery 續

jQuery

――續ide

 

$(arg).parent().siblings()  當前標籤的父標籤的兄弟標籤,不包括當前標籤的父標籤函數

       $(arg).parent().siblings().find(‘.abc’) 找到當前標籤的父標籤的兄弟標籤裏有abc樣式的標籤測試

 

find()  找出正在處理的元素的後代元素的好方法,找的是子元素動畫

 

.empty()  刪除匹配的元素集合中全部的子節點this

:empty  匹配全部不包含子元素或者文本的空元素spa

<table>orm

  <tr><td>Value 1</td><td></td></tr>對象

  <tr><td>Value 2</td><td></td></tr>blog

</table>事件

$("td:empty") 會找到

[ <td></td>, <td></td>]

 

:parent  匹配含有子元素或者文本的元素

<table>

  <tr><td>Value 1</td><td></td></tr>

  <tr><td>Value 2</td><td></td></tr>

</table>

$("td:parent")

[ <td>Value 1</td>, <td>Value 2</td> ]

 

 

:contains(text)  匹配包含給定文本的元素

<div>John Resig</div>

<div>George Martin</div>

<div>Malcom John Sinclair</div>

<div>J. Ohn

$("div:contains('John')") 能夠獲得

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

 

 

remove([expr]) DOM中刪除全部匹配的元素。

這個方法不會把匹配的元素從jQuery對象中刪除,於是能夠在未來再使用這些匹配的元素。但除了這個元素自己得以保留以外,其餘的好比綁定的事件,附加的數據等都會被移除

$("p").remove(".hello");  DOM中把帶有hello類的段落刪除

         <p>Hello</p> how are <p>you?</p>

         how are <p>you?</p>

 

has(expr|ele)   從給定的jQuery對象中從新建立一組匹配的對象。提供的選擇器會一一測試原先那些對象的後代,含有匹配後代的對象將得以保留

:has(selector)   匹配含有選擇器所匹配的元素的元素

 

hover()  當鼠標移動到一個匹配的元素上面時,會觸發指定的第一個函數。當鼠標移出這個元素時,會觸發指定的第二個函數。並且,會伴隨着對鼠標是否仍然處在特定元素中的檢測(例如,處在div中的圖像),若是是,則會繼續保持「懸停」狀態,而不觸發移出事件

         $("td").hover(

           function () {

                  $(this).addClass("hover");

           },

           function () {

                  $(this).removeClass("hover");

           }

         );

 

toggle([speed], [easing ], [fn ])

用於綁定兩個或多個事件處理器函數,以響應被選元素的輪流的 click 事件。

若是元素是可見的,切換爲隱藏的;若是元素是隱藏的,切換爲可見的。

speed: 隱藏/顯示效果的速度。默認是 "0"毫秒。可能的值:slownormalfast"

easing:(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"

fn:在動畫完成時執行的函數,每一個元素執行一次。

       $('td).toggle();  鼠標點擊,表格會切換顯示與隱藏

       $("td").toggle(  

              function () {

                     $(this).addClass("selected");

              },

              function () {

                     $(this).removeClass("selected");

              }

       );          //會在兩個事件中切換

 

 

 

 

表格的一個例子

邊框很細的Table

.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}

.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

若是須要td兩邊都不須要那麼親密的話,就這樣寫:

.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding:10px 0px;}

.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

wKioL1bOuJHgP223AAB8Yk5lj9g190.png

wKioL1bOuJLC4pxAAAAmYyD0hiI481.png

相關文章
相關標籤/搜索