Web基礎瞭解版03-jQuery

時間  2019-12-20
標籤 web 基礎 瞭解 jquery 欄目 HTML 简体版
原文   原文鏈接

jQuery

 jQuery，顧名思義，也就是JavaScript和查詢（Query）極大地簡化了JavaScript開發人員遍歷HTML文檔、操做DOM、處理事件、執行動畫和開發Ajax。css

  • jQuery是免費、開源的html

  • 輕量級(壓縮後只有幾十k)數組

  • 強大的選擇器瀏覽器

  • 出色的 DOM 操做的封裝app

  • 可靠的事件處理機制框架

  • 完善的 Ajax使用dom

  • 出色的多瀏覽器兼容性ide

  • 隱式迭代：對集合對象作相同操做時不須要逐個進行遍歷，jQuery自動進行遍歷函數

  • 文檔說明很全測試

  • 可擴展插件

 jQuery庫實際上就是一個js文件，只須要在網頁中直接引入這個文件就能夠了。

jQuery核心函數： $()

  • jQuery庫中爲window對象定義了一個函數： jQuery()，簡化爲：$()

  • $是jQuery的核心函數，jQuery的核心功能都是經過這個函數實現。$()就是調用$這個函數。

  • $函數會根據參數數據類型的不一樣作不一樣的工做, 返回一個jQuery封裝的僞數組的對象

傳入參數爲函數時：$(function(){})

  • 傳入一個function參數, 做爲回調函數。至關於window.onload = function(){}

  • 表示：在DOM文檔載入完成後，回調函數自動執行

  • 這個函數是 $(document).ready(function(){})的簡寫形式。

傳入參數爲選擇器字符串時： $(選擇器字符串)

  • 接收一個CSS選擇器格式的字符串參數

  • 根據這個選擇器查找元素節點對象

  • 根據此字符串在document中去匹配一組元素，並封裝成jQuery對象返回

$("#id屬性值"); 至關於經過id屬性查找標籤對象
$("標籤名");  至關於經過標籤名查找標籤對象，返回集合
$(".class屬性值");  至關於經過class屬性查找標籤對象，返回集合

 

傳入參數爲HTML字符串時：$(HTML字符串)

  • 接收一個標籤字符串參數。

  • 根據這個html字符串建立元素節點對象

  • 建立對應的標籤對象， 幷包裝成jQuery對象

var $liEle = $("<li>香港</li>") //至關於建立了一個標籤對象 <li>香港</li>。
$("#city").append($liEle); //將此jQuery對象添加到現有的jQuery對象中。

 

傳入參數爲DOM對象時： $(DOM對象)

  • 接收一個DOM對象類型的參數

  • 返回包含這個dom對象的jQuery對象。至關於把DOM對象包裝（或轉換）成jQuery對象。

    • 注意：若是聲明一個變量指向jQuery對象，那麼這個變量命名習慣上要以$開頭。

var bjEle = document.getElementById("bj");
alert(bjEle);
alert($(bjEle));

jQuery對象和DOM對象區分

  • Dom對象：經過原生js實現的DOM標準查找到的元素對象
  • jQuery對象：經過$查找或包裝過的對象

jQuery對象本質上是一個封裝了DOM對象數組加一系列的jQuery的功能函數function的結構。

習慣上給jQuery對象命名時，變量名前加上$，便於區分jQuery對象和js DOM對象。

jQuery對象和DOM對象使用區別

  • jQuery對象和DOM對象的屬性不能互用，只能調用各自聲明過的屬性。

  • jQuery對象和DOM對象的函數也不能互用，只能調用各自聲明過的函數。

DOM對象和jQuery對象的互相轉換

  • DOM對象轉jQuery對象

    • 使用jQuery核心函數包裝DOM對象：$(DOM對象)

    • 例如：var $btnEle = $(btnEle)

  • jQuery對象轉DOM對象

    • 使用數組下標：$btnEle[0]

    • 使用get(index)方法：$btnEle.get(0)

  • DOM對象轉爲jQuery對象：爲了調用jQuery提供的豐富的方法

  • jQuery對象轉爲DOM對象：有些特殊需求在框架中沒有提供，須要使用原生的js實現

文檔處理　　增　　刪　　改　　查　　事件

選擇器

jQuery的選擇器分類

基本選擇器

它經過標籤名,id屬性,class屬性來查找匹配的DOM元素

1） id選擇器

  • 用法： $("#id")

  • 返回值：根據id屬性匹配一個標籤， 封裝成jQuery對象

2） 標籤選擇器

  • 用法: $("tagName")

  • 返回值：根據標籤名匹配的一個或多個標籤，封裝成jQuery對象

3） class選擇器

  • 用法: $(".class")

  • 返回值：根據class屬性值匹配一個或多個標籤, 封裝成jQuery對象

4） *選擇器

  • 用法: $("*")

  • 返回值: 匹配全部標籤， 封裝成jQuery對象

5） selector1,selector2,…

  • 用法: $(」div,span,.myClass」)

  • 返回值: 全部匹配選擇器的標籤, 封裝成jQuery對象,用，分割

層級選擇器

若是想經過DOM元素之間的層級關係來獲取特定元素。例如後代元素、子元素、兄弟元素等。則須要經過層級選擇器（或層次選擇器）。

1） ancestor descendant

  • 用法:$(」form input」)

  • 說明:在給定的祖先元素下匹配全部後代元素（包括子元素的子元素，...）

2） parent > child

  • 用法: $(」form > input」)

  • 說明: 在指定父元素下匹配全部子元素。

    • 注意：要區分好後代元素與子元素

3） prev + next

  • 用法: $(」label + input」)

  • 說明: 匹配全部緊接在prev元素後的next元素。（即相鄰的下一個）

    • 注意：從平級元素中找，而不要去子元素中查找。

4） prev ~ siblings

  • 用法: $(」form ~ input」)

  • 說明: 匹配prev元素以後的全部 siblings元素，不包含該元素在內，而且siblings匹配的是和prev同輩（兄弟元素）的元素，其後輩子元素不被匹配。

過濾選擇器：基本

  • 過濾選擇器主要是經過特定的過濾規則來篩選出所需的DOM元素, 該選擇器都以 「:」 開頭

  • 按照不一樣的過濾規則，過濾選擇器能夠分爲基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾，表單過濾和表單對象屬性過濾選擇器。

1） :first

  • 用法: $(」tr:first」) ;

  • 說明: 匹配找到的第一個元素。

2） :last

  • 用法: $(」tr:last」)

  • 說明: 匹配找到的最後一個元素.與 :first 相對應。

3） :not(selector)

  • 用法: $(」input:not(:checked)」)

  • 說明: 去除全部與給定選擇器匹配的元素。相似於」非」，意思是沒有被選中的input(即當input的type=」checkbox」)。

4） :even

  • 用法: $(」tr:even」)

  • 說明: 匹配全部索引值爲偶數的元素，從0開始計數。js的數組都是從0開始計數的。

5） :odd

  • 用法: $(」tr:odd」)

  • 說明: 匹配全部索引值爲奇數的元素，和:even對應，從 0 開始計數。

6） :eq(index)

  • 用法: $(」tr:eq(0)」)

  • 說明: 匹配一個給定索引值的元素。eq(0)就是獲取第一個tr元素。括號裏面的是索引值，不是元素排列數。從0開始

7） :gt(index)

  • 用法: $(」tr:gt(0)」)

  • 說明: 匹配全部大於給定索引值的元素。

8） :lt(index)

  • 用法: $(」tr:lt(2)」)

  • 說明: 匹配全部小於給定索引值的元素。

9） ：header （匹配h1-h6標題）、：animated （匹配正在執行動畫效果的）、：focus（匹配當前獲取焦點的）

過濾選擇器：內容

  • 內容過濾選擇器的過濾規則主要體如今它所包含的子元素和文本內容上

1） :contains(text)

  • 用法: $(」div:contains(’John’)」)

  • 說明: 匹配包含給定文本的元素。這個選擇器比較有用，當咱們要選擇的不是dom標籤元素時，它就派上了用場了。它的做用是查找被標籤」圍」起來的文本內容是否符合指定的內容的。

2） :has(selector)

  • 用法: $(」div:has(p)」).addClass(」test」)

  • 說明: 匹配含有選擇器所匹配的元素的元素。這個解釋須要好好琢磨，可是一旦看了使用的例子就徹底清楚了:給全部包含p元素的div標籤加上class=」test」。

3） :empty

  • 用法: $(」td:empty」)

  • 說明: 匹配全部不包含子元素或者文本的空元素

4） :parent

  • 用法: $(」td:parent」)

  • 說明: 匹配含有子元素或者文本的元素。注意:這裏是」:parent」可不是」.parent」！感受與上面講的」:empty」造成反義詞。

過濾選擇器：可見性

  • 根據元素的可見和不可見狀態來選擇相應的元素

1） :hidden

  • 用法: $(」tr:hidden」)

  • 說明: 匹配全部的不可見元素，有兩種狀況：css中display:none和input type=」hidden」的都會被匹配到。一樣，要在腦海中完全分清楚冒號」:」，點號」.」和逗號」,」的區別。

2） :visible

  • 用法: $(」tr:visible」)

  • 說明: 匹配全部的可見元素。

過濾選擇器：屬性

  • 屬性過濾選擇器的過濾規則是經過元素的屬性來獲取相應的元素。

1） [attribute]

  • 用法: $(」div[id]「)

  • 說明: 匹配包含給定屬性的元素。例子中是選取了全部帶id屬性的div標籤。

2） [attribute=value]

  • 用法: $(」input[name='newsletter']「).attr(」checked」, true)

  • 說明: 匹配給定的屬性是某個特定值的元素。例子中選取了全部name屬性是newsletter的 input 元素。

3） [attribute!=value]

  • 用法: $(」input[name!='newsletter']「).attr(」checked」, true)。

  • 說明：匹配全部不含有指定的屬性，或者屬性不等於特定值的元素。此選擇器等價於:not([attr=value])，要匹配含有特定屬性但不等於特定值的元素，請使用[attr]:not([attr=value])。以前看到的 :not 派上了用場。

4） [attribute^=value]

  • 用法: $(」input[name^=‘news’]「)

  • 說明: 匹配給定的屬性是以某些值開始的元素。

5 ） [attribute$=value]

  • 用法: $(」input[name$=‘letter’]「)

  • 說明: 匹配給定的屬性是以某些值結尾的元素。

6） [attribute*=value]

  • 用法: $(」input[name*=‘man’]「)

  • 說明: 匹配給定的屬性是以包含某些值的元素。

7） [selector1] [selector2] [selectorN]

  • 用法：$("input[id] [name$='man']]")

  • 說明：複合屬性選擇器，須要同時知足多個條件時使用。

過濾選擇器：子元素

1） :nth-child(index/even/odd/equation)

  • 用法: $(」ul li:nth-child(2)」)

  • 說明: 匹配其父元素下的第N個子或奇偶元素。注意index不一樣於eq(index),這裏從1開始

2） :first-child

  • 用法: $(」ul li:first-child」)

  • 說明: 匹配第一個子元素。’:first’ 只匹配一個元素，而此選擇符將爲每一個父元素匹配一個子元素。這裏須要特別的記憶一下區別。兩者的調用者都是針對要操做的元素來說的。

3） :last-child

  • 用法: $(」ul li:last-child」)

  • 說明: 匹配最後一個子元素。’:last’只匹配一個元素，而此選擇符將爲每一個父元素匹配一個子元素。

4） : only-child

  • 用法: $(」ul li:only-child」)

  • 說明: 若是某個元素是父元素中惟一的子元素，那將會被匹配。若是父元素中含有其餘元素，那將不會被匹配。意思就是：只有一個子元素的纔會被匹配！

過濾選擇器：表單

1） :input

  • 用法: $(」:input」)

  • 說明:匹配全部 text, textarea, select 和 button 元素 。

2） :text

  • 用法: $(」:text」)

  • 說明: 匹配全部的單行文本框。

3） :password

  • 用法: $(」:password」)

  • 說明: 匹配全部密碼框。

4） :radio

  • 用法: $(」:radio」)

  • 說明: 匹配全部單選按鈕。

5） :checkbox

  • 用法: $(」:checkbox」)

  • 說明: 匹配全部複選框。

6） :submit

  • 用法: $(」:submit」)

  • 說明: 匹配全部提交按鈕。

7） :image

  • 用法: $(」:image」)

  • 說明: 匹配全部圖像域。

8） :reset

  • 用法: $(」:reset」)

  • 說明: 匹配全部重置按鈕。

9） :button

  • 用法: $(」:button」)

  • 說明: 匹配全部按鈕.這個包括直接寫的元素button。

10） :file

  • 用法: $(」:file」)

  • 說明: 匹配全部文件域。

11） :hidden

  • 用法: $(」input:hidden」)

  • 說明: 匹配全部不可見元素，或者type爲hidden的元素.這個選擇器就不只限於表單了,除了匹配input中的hidden外,那些style爲hidden的也會被匹配。

過濾選擇器：表單對象屬性

  • 此選擇器主要對所選擇的表單元素進行過濾

1） :enabled

  • 用法: $(」input:enabled」)

  • 說明: 匹配全部可用元素.意思是查找全部input中不帶有disabled=」disabled」的input.不爲disabled,固然就爲enabled啦。

2） :disabled

  • 用法: $(」input:disabled」)

  • 說明: 匹配全部不可用元素.與上面的那個是相對應的。

3） :checked

  • 用法: $(」input:checked」)

  • 說明: 匹配全部被選中的元素(複選框、單選框等，不包括下拉列表select中的option)。

    • 注意：官方文檔說明是不包括select中的option，但測試中是包含的。只是不建議你們這樣用。

4） :selected

  • 用法: $(」select option:selected」)

  • 說明: 匹配全部選中的option元素。

文檔處理（CRUD）

查找節點方法()

1） $(selector)

  • 使用jQuery選擇器查詢

  • 獲得一個包含全部匹配的dom節點對象的jQuery對象

2） find(selector)

  • 查詢jQuery對象內部數據

  • 在Jquery對象中根據selector查找其中匹配的後代節點

3） eq(index)

  • 根據索引值查找集合中指定位置的元素

  • index從0開始，也能夠爲-1，-2，...。其中-1是最後一個元素

4） filter(expr|obj|ele|fn)

  • 根據傳入的選擇器字符串等再次從調用者中篩選

5） children([expr])

  • 取得一個包含匹配的元素集合中每個元素的全部子元素的元素集合。

6） parent([expr])

  • 取得一個包含着多個匹配元素的惟一父元素的元素集合。

7） parents([expr])

  • 取得一個包含着全部匹配元素的祖先元素的元素集合（不包含根元素）。能夠經過一個可選的表達式進行篩選。

8） each(callback)

  • 遍歷jQuery對象包含的數據：$(selector1).each(function(index, itemDom){ })

  • 遍歷jQuery對象所包含的全部節點, 每取一個dom節點對象都去調用設置的回調函數, 並將取出的節點在數組中的下標和節點對象傳入函數

獲取長度

1） 屬性：length

  • jQuery 對象中元素的個數。

2） 函數：size()

  • jQuery 對象中元素的個數。與length屬性做用同樣。

內部插入節點

1） append(content)

  • 向每一個匹配的元素的內部的結尾處追加內容。

2） appendTo(content)

  • 把全部匹配的元素追加到另外一個指定的元素集合中

3） prepend(content)

  • 向每一個匹配的元素的內部的開始處插入內容

4） prependTo(content)

  • 將每一個匹配的元素插入到指定的元素內部的開始處

外部插入節點

1） after(content)

  • 在每一個匹配的元素以後插入內容

2） before(content)

  • 在每一個匹配的元素以前插入內容

3） insertAfter(content)

  • 把全部匹配的元素插入到另外一個、指定的元素集合的後面

4） insertBefore(content)

  • 把全部匹配的元素插入到另外一個、指定的元素集合的前面

建立節點

  • $(htmlString)

  • 動態建立的新元素節點不會被自動添加到文檔中, 須要使用其餘方法將其插入到文檔中;

  • 當建立單個元素時, 需注意閉合標籤和使用標準的 XHTML 格式. 例如建立一個<p>元素, 可使用 $(「<p/>」) 或 $(「<p></p>」), 但不能使用 $(「<p>」) 或 $(「</P>」)

  • 建立文本節點就是在建立元素節點時直接把文本內容寫出來; 建立屬性節點也是在建立元素節點時一塊兒建立

刪除節點

1） empty()

  • 刪除匹配的元素集合中全部的子節點(不包括自己)。

2） remove()

  • 刪除匹配的元素及其子元素(包括自己)

修改節點

1） replaceAll(selector)

  • 用匹配的元素替換掉全部 selector匹配到的元素。

2） replaceWith(content|fn)

  • 將全部匹配的元素替換成指定的HTML或DOM元素。

屬性操做

1） attr(name ,[value])

  • attr(屬性名) 返回「屬性名」對應的屬性值

  • attr(屬性名,屬性值) 將「屬性名」對應的屬性設置爲「屬性值」

2） removeAttr(name)

  • 根據屬性名刪除對應的屬性

HTML代碼/值

1）html([val])

  • 獲得元素的內容或者設置元素的內容

2）val([value])

  • val() 讀取value屬性

  • val(value值) 設置value屬性

  • val([選項值1,選項值2,…,選項值n]) 設置單選框、多選框或下拉列表被選中的值

3）text()

  • text() 獲得元素節點對象的文本內容

  • text(str) 設置元素的文本內容

CSS

1） addClass(className)

  • 添加class屬性

2） removeClass()

  • 移除class屬性

3） css(name,[value])

  • 查看某個樣式屬性, 或設置某個樣式屬性

經常使用事件

1） ready(fn)

  • 當DOM載入就緒能夠查詢及操做時，綁定一個要執行的函數

2） click([fn])

  • 觸發每個匹配元素的click事件

3） blur([fn])

  • blur事件會在元素失去焦點的時候觸發，既能夠是鼠標行爲，也能夠是按tab鍵離開的

4） change([fn])

  • change事件會在元素失去焦點的時候觸發，也會當其值在得到焦點後改變時觸發。

綁定與解綁事件

1） bind(type, fn)

  • 爲每一個匹配元素的特定事件綁定事件處理函數。

2） unbind(type)

  • bind()的反向操做，從每個匹配的元素中刪除綁定的事件

事件切換

1）hover(over,out)

  • 當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。

2） 事件冒泡

  • 描述: 事件會按照 DOM 層次結構像水泡同樣不斷向上直至頂端。即：子元素事件觸發引發父元素的事件也觸發的現象

  • 解決: 在事件處理函數中返回 false, 會對事件中止冒泡

效果

基本

1） show()

  • 顯示當前標籤

2） hide()

  • 隱藏當前標籤

3） toggle()

  • 切換當前標籤的可見性

 滑動

1） slideDown()

  • 這個動畫效果只調整元素的高度，可使匹配的元素以「滑動」的方式顯示出來

2） slideUp()

  • 這個動畫效果只調整元素的高度，可使匹配的元素以「滑動」的方式隱藏起來

3） slideToggle()

  • 經過高度變化來切換全部匹配元素的可見性

 淡入淡出

1） fadeIn()

  • 經過不透明度的變化來實現全部匹配元素的淡入效果

2） fadeOut()

  • 經過不透明度的變化來實現全部匹配元素的淡出效果

3） fadeToggle()

  • 經過不透明度的變化來開關全部匹配元素的淡入和淡出效果

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程