捕獲jQuery節點方法

寫在前頭，使用jQuery，應在正文sricpt標籤上再加一個引用標籤

　　　　好比 <script src="jquery-3.2.1.min.js"></script>

1  爲何有jQuery

　　jQuery是由於Javascript的命令太難打而創做出來的一個Javascript庫

　　它的宗旨就是：「Write less, do more.「

 

2  jQuery的使用場景

1. 選擇器
2. 篩選器
3. 樣式操做
4. 文本操做
5. 屬性操做
6. 文檔處理
7. 事件
8. 動畫效果
9. 插件
10. each、data、Ajax

下載連接：jQuery官網

中文文檔：jQuery AP中文文檔

 

3 jQuery版本

• 1.x：兼容IE678,使用最爲普遍的，官方只作BUG維護，功能再也不新增。所以通常項目來講，使用1.x版本就能夠了，最終版本：1.12.4 (2016年5月20日)
• 2.x：不兼容IE678，不多有人使用，官方只作BUG維護，功能再也不新增。若是不考慮兼容低版本的瀏覽器可使用2.x，最終版本：2.2.4 (2016年5月20日)
• 3.x：不兼容IE678，只支持最新的瀏覽器。須要注意的是不少老的jQuery插件不支持3.x版。目前該版本是官方主要更新維護的版本。

　　

4 jQuery對象

　　jQuery對象就是經過jQuery包裝DOM對象後產生的對象

　　jQuery對象是 jQuery獨有的。若是一個對象是 jQuery對象，那麼它就可使用jQuery裏的方法：例如$(「#i1」).html()。

　　至關於： document.getElementById("i1").innerHTML;

　　一個約定，咱們在聲明一個jQuery對象變量的時候在變量名前面加上$：

　　　  

5 捕獲jQuery對象的各類方法

　　基本的捕獲方法：

　　id捕獲：$("#id")

　　標籤類型捕獲：$("tag")

　　類名捕獲：$(".classname")

　　基於某類標籤按id或類名捕獲：$(div.classname);$(div#id.classname)

　　選擇全部元素：$("*")

　　並集選擇：$("#id,.classname,tag")   使用逗號隔開就好

　　$("x y");// x的全部後代y（子子孫孫）
　　$("x > y");// x的全部兒子y（兒子）
　　$("x + y")// 找到全部緊挨在x後面的y
　　$("x ~ y")// x以後全部的兄弟y

　　　　基本篩選器

　　　

:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配全部索引值爲偶數的元素，從 0 開始計數
:odd // 匹配全部索引值爲奇數的元素，從 0 開始計數
:gt(index)// 匹配全部大於給定索引值的元素
:lt(index)// 匹配全部小於給定索引值的元素
:not(元素選擇器)// 移除全部知足not條件的標籤
:has(元素選擇器)// 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

例子：
    $('div:first')   //找到排在第一個div標籤
    $("div:has(h1)")// 找到全部後代中有h1標籤的div標籤
    $("div:has(.c1)")// 找到全部後代中有c1樣式類的div標籤
    $("li:not(.c1)")// 找到全部不包含c1樣式類的li標籤
    $("li:not(:has(a))")// 找到全部後代中不含a標籤的li標籤

　　　使用屬性捕獲：

　　

[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於

例子
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標籤
$("input[type!='text']");// 取到類型不是text的input標籤

 

　　　使用jQuery對象的方法捕獲:

　　

$("#id").next()   //下一個同級標籤
$("#id").nextAll()   //  後面全部同級標籤
$("#id").nextUntil("#i2")   //捕獲後面的同級標籤直到碰到id爲i2的標籤

向前找：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

捕獲父親元素：

$("#id").parent()　　　　//返回父輩元素
$("#id").parents()  　　// 返回當前元素的全部的上級元素$("#id").parentsUntil() // 返回  當前元素的逐級的上級元素，直到匹配的那個元素爲止。捕獲全部子元素：$("#id").children();捕獲全部同級元素：$("id").siblings();選擇全部子元素：$(".container").find('*')  或 $('#id *');  *表明任意類型元素找出正在處理的元素的後代元素：$("div").find("p");