一些關於jQuery的使用方法

 

　　在web前端這個職業當中，面對html,css,javascript已經再熟悉不過了，html是對網頁文檔的編寫，css是對網頁樣式的編寫，javascript是對網頁裏面的元素的節點或圖片進行行爲的操做。在面對html和css的時候咱們都認爲還比較簡單，可是在面對javascript的時候，對於咱們這些菜鳥來講可能就有點欲哭無淚了。由於javascript裏面還包含了不少高級的部分，因此對於咱們來講還須要很長一段時間才能掌握這個要領。所以，jQuery的使用就讓咱們在面對這些問題的時候可以很簡單的去處理這些問題。下面我就來簡單的介紹一下jQuery的一些知識。

　　在講jQuery的時候，咱們仍是先對jQuery作一些基本知識的瞭解。jQuery是一個javascript函數庫，它極大的簡化了javascript編程，爲咱們提供了很大的方便。jQuery庫能夠經過一行簡單的標記被添加到網頁當中。jQuery的庫包含了不少的特性，其中包括：1.html元素的選取。2.html元素的操做。3.css的操做。4.html的事件函數。5.javascript的特效和動畫。6.html DOM的遍歷和修改。7.Ajax和Utilities.

　　jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。jQuery語法是爲html元素的選取編制，能夠對元素執行某些操做。jQuery的基本語法：$(selector).action()。1.使用$符號定義jQuery.2.選擇符（select）「查詢」和「查找」html元素。3.jQuery  action()執行對元素的操做。

例如：

         $(this).hide()-隱藏當前元素

         $("p").hide()-隱藏全部段落

         $("p.test").hide()-隱藏全部class="test"的段落

         $("#test").hide()-隱藏全部id="test"的元素

 

　　固然，在執行這些函數的時候，都須要在document ready函數中執行，這是爲了防止文檔在徹底加在完成以前運行jQuery代碼。

　　jQuery的選擇器：

      　　jQuery 元素選擇器和屬性選擇器容許您經過標籤名、屬性名或內容對 HTML 元素進行選擇。選擇器容許您對 HTML 元素組或單個元素進行操做。在 HTML DOM 術語中：選擇器容許您對 DOM 元素組或單個 DOM 節點進行操做。

　　　　　　（1）jQuery的元素選擇器：

       　　　　　　 jQuery 使用 CSS 選擇器來選取 HTML 元素。

　　　　　　　　　　$("p") 選取 <p> 元素。

　　　　　　　　　　$("p.intro") 選取全部 class="intro" 的 <p> 元素。

　　　　　　　　　　$("p#demo") 選取 id="demo" 的第一個 <p> 元素。      

     　　　　（2）jQuery 屬性選擇器：

                         jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。

　　　　　　　　　　$("[href]") 選取全部帶有 href 屬性的元素。

　　　　　　　　　　$("[href='#']") 選取全部帶有 href 值等於 "#" 的元素。

　　　　　　　　　　$("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。

　　　　　　　　　　$("[href$='.jpg']") 選取全部 href 值以 ".jpg" 結尾的元素。 

          　　（3）jQuery CSS 選擇器：

　　　　　　　　　jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。

　　　　　　例如：

      　　　　　  

　　　　除了以上這些選擇器的用法的介紹之外，還有如下的一些介紹，但願對你們有所幫助和理解，對於這些基本的jQuery，我沒問你要好好的掌握。

 　　　　　　

　　　　下面我將介紹一些關於咱們將經常使用到的選擇器的介紹和使用的方法：

1. 1. Parent的用法的介紹：

　　　　　　　　其表示的意義是：匹配含有子元素或者文本的元素。

　　　　　　示例

　　　　　　描述:

　　　　　　　　查找全部含有子元素或者文本的 td 元素

　　　　　　HTML 代碼:

　　　　　　　　<table>

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

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

　　　　　　　　</table>

　　　　　　jQuery 代碼:

　　　　　　　　$("td:parent")

　　　　　　結果:

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

　　　　2.parent>child的用法的介紹：

　　　　　　其表示的意義是：在給定的父元素下匹配全部的子元素。

　　　　　　示例

　　　　　　描述:

　　　　　　　　匹配表單中全部的子級input元素。

　　　　　　HTML 代碼:

　　　　　　　　<form>

  　　　　　　　　　　<label>Name:</label>

  　　　　　　　　　　<input name="name" />

  　　　　　　　　<fieldset>

     　　　　　　　　 <label>Newsletter:</label>

      　　　　　　　　<input name="newsletter" />

 　　　　　　　　</fieldset>

　　　　　　</form>

　　　　　　<input name="none" />

　　　　　jQuery 代碼:

　　　　　　$("form > input")

　　　　　結果:

　　　　　　　[ <input name="name" /> ]

　　　3.first的用法的介紹：

　　　　　其表示的意義是：獲取第一個元素。

　　　　　　示例

　　　　　　描述:

        　　　　 獲取匹配的第一個元素

　　　　　　HTML 代碼:

         　　　　<ul>

            　　　　 <li>list item 1</li>

             　　　　<li>list item 2</li>

             　　　　<li>list item 3</li>

           　　　　　<li>list item 4</li>

          　　　　　 <li>list item 5</li>

         　　　</ul>

　　　　　jQuery 代碼:

         　　　　$('li:first');

　　　　　結果:

                 　 [ <li>list item 1</li> ]