jQuery中的選擇器及篩選器

1.jQuery的介紹

1.jQuery是繼prototype之後又一個優秀的Javascript架構。其宗旨是——WRITE LESS,DO MORE!
2.它是輕量級的js庫,這是其它的js庫所不及的
3.它相容CSS3，還相容各種浏覽器
4.jQuery是一個快速的，簡潔的javaScript庫，使使用者能更友善地處理HTMLdocuments、events、實作動畫效果，并且友善地為網站提供AJAX互動。
5.jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。

下載下傳位址:

jQuery官網

2.jQuery對象

jQuery對象是通過jQuery包裝DOM對象後産生的對象

jQuery對象是jQuery獨有的,如果一個對象是jQuery對象,那麼它就可以使用jQuery裡的方法.

$(".class_name")    意思是擷取目前html檔案中所有class名為class_name的标簽

如果用DOM來實作的代碼:

document.getElementsByClassName("class_name")

雖然jQuery對象是包裝DOM對象後産生的,但是jQuery無法使用DOM對象的任何方法,同理DOM對象也不能使用jQuery裡的方法.

約定:如果擷取的是jQuery對象,那麼要在變量前面加上

例如:

var $variable=jQuery對象
var variable=DOM對象

把jQuery對象轉化為DOM對象的方法:

$("#msg").html()
$("#msg")[0].innerHTML

jQuery的基礎文法:

$(selector).action()

參考

在一個HTML文檔中使用jQuery,必須在HTML文檔中的title下面插入一句話:

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

3.尋找元素(選擇器和篩選器)

3.1 基本選擇器:

$("*")              選取所有的css标簽
$("#id1")           選取所有的id名為id1的标簽
$(".class_name")    選取所有的class名為class_name的标簽
$("element1")       選取所有的标簽名為element1的标簽
$(".class,p,div")   選取符合這三個條件中任何一個條件的标簽

例子:

标簽代碼:

<p id="p1">p1</p>
<div class="c1">div1</div>

處理代碼:

var ele1=document.getElementById("p1");//擷取目前HTML文檔中id号為"p1"的标簽
var ele2=document.getElementsByClassName("c1");//擷取目前HTML文檔中class名為"c1"的标簽

console.log(ele1.innerHTML);//列印id号為"p1"的标簽的值
console.log($("#p1").html());//使用jQuery方法擷取目前文檔中id号為"p1"的标簽并列印其值

console.log(ele2[0].innerHTML);//列印class名為"c1"的第一個标簽的值
console.log($(".c1").html());//使用jQuery方法擷取目前文檔中class名為"c1"的标簽并列印其值

列印結果如下:

jQuery與javascript最大的不同表現在批量處理:
用javascript處理标簽時,如果查找到的是一個集合的話,必須在使用循環一個一個的處理,
而jQuery則不需要使用循環就可以直接批量處理這個集合

<div class="c1">div1</div>
<div class="c1">div2</div>
<div class="c1">div3</div>
<div class="c1">div4</div>

現在想把這四個标簽都變成紅顔色的,使用javascript處理的代碼如下:

var eles_div=document.getElementsByClass("c1");
for (var i=0;i<eles_div.length;i++){
    eles_div[i].style.color="red";
}

而使用jQuery實作批量處理這些标簽的代碼:

$(".c1").css("color","red");

實作結果如下:

3.2 層級選擇器

$(".father_div div")        後代選擇器
$(".father_div>div")        子代選擇器
$(".father_div+div")        毗鄰選擇器
$(".father_div~div")        普通相鄰選擇器

用法跟CSS的選擇器用法一樣

3.3 基本篩選器

$("div:first")      選取第一個div标簽
$("div:last")       選取最後一個div标簽

$("div:eq(2)")      選取索引為2的div标簽
$("div:lt(2)")      選取索引小于2的div标簽
$("div:gt(2)")      選取索引大于2的div标簽

$("div:even")       選取索引為偶數的div标簽
$("div:odd")        選取索引為奇數的div标簽

$(":focus")         目前擷取焦點的元素
$(":animated")      正在執行動畫效果的元素

<div class="c1">div1</div>
<div class="c1">div2</div>
<div class="c1">div3</div>
<div class="c1">div4</div>
<div class="c1">div5</div>
<div class="c1">div6</div>
<div class="c1">div7</div>

例子一:

$("div:first").css("color","red");//把第一個div标簽的顔色設定為紅色
$("div:eq(2)").css("color","blue");//把索引為2的div标簽顔色設定為藍色
$("div:gt(2)").css("color","pink");//把索引大于2的div标簽顔色設定為粉色

效果如下:

例子二:

$("div:lt(4)").css("color","blue");//把索引小于4的div标簽顔色設定為藍色

例子三:

$("div:even").css("color","red");//把索引為偶數的div标簽顔色設定為紅色

3.4 屬性選擇器

$("[id='div1']")//擷取所有的"id='div1'"這個屬性的标簽
$("[name='img_list']")//擷取所有的"name='img_list'"這個屬性的标簽

<div class="c1" name="test">div1</div>
<div name="test">div2</div>
<div class="c1" id="c100">div3</div>

$("[name='test']").css("color","red");//把含有"name='test'"這類标簽的顔色變成紅色
$("[id='c100']").css("color","blue");//把含有"id='c100'"這類标簽的顔色變成藍色

操作二:

$("[name='test'][class]").css("color","red");//把含有"name='test'"又含有class這個類的标簽顔色變成紅色

3.5 表單選擇器(隻适用于input表單)

$("input:checked")      擷取所有處于選中狀态的複選框
$(":input")             擷取所有的input,textarea,select和button元素
$(":text")              擷取所有的單行文本框
$(":password")          擷取所有的密碼框
$("radio")              擷取所有的單選按鈕
$("checkbox")           擷取所有的複選框
$("submit")             擷取所有的送出按鈕
$("reset")              擷取所有的重置按鈕
$("button")             擷取所有的button按鈕
$("file")               擷取所有的檔案域

<input type="text">
<input type="checkbox">

$("[type='text']").css("border","2px solid red");//把"type='text'"這種輸入框的邊框設定為2px的紅色實線邊框

顯示如下:

上面的代碼也可以寫成下面這樣:

$(":text").css("border","2px solid red");//把"type='text'"這種輸入框的邊框設定為2px的紅色實線邊框

3.6 過濾篩選器

其用法與基本篩選器一樣

$("li").eq(2)                   擷取清單中索引為2的标簽
$("li").first()                 擷取清單中的第一個标簽
$("ul li").hasclass("test")     查詢清單中是否有"test"這個類

3.7查找篩選器

3.7.1 查找子标簽

$("div").children(".div1")  查找div标簽中包含div1的所有子類标簽
$("div").find(".div2")  查找div标簽中包含div2的所有的後代标簽

标簽如下：

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>
<div class="div4">
    <p class="p10" id="p3">p3</p>
    <p class="p10">p4</p>
    <p class="p10" id="p5">p5</p>
    <p class="p10">p6</p>
    <p class="p10">p7</p>
    <p class="p10" id="p8">p8</p>
</div>

例子一：

$(".div1").find("p").css("color","blue")//查找類名為div1的标簽的後代中所有的p标簽，并把顔色設定成藍色

顯示如下：

例子二：

$(".div1").children("p").css("color","blue")//查找類名為div1的标簽的子代中所有的p标簽，并把顔色設定成藍色

3.7.2 向下查找兄弟标簽

$(".div1").next()               擷取div1這個類的下一個标簽
$(".div1").nextAll()            擷取div1這個類的後面的所有标簽
$(".div1").nextUntil("div2")    擷取div1這個類後面,直到div2(不含div2)之間的所有标簽

标簽如下:

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>
<div class="div4">
    <p class="p10" id="p3">p3</p>
    <p class="p10">p4</p>
    <p class="p10" id="p5">p5</p>
    <p class="p10">p6</p>
    <p class="p10">p7</p>
    <p class="p10" id="p8">p8</p>
</div>

$("#p3").next().css("color","red");//把id為"p3"的标簽的下一個标簽,也即"p4"标簽顔色設定為紅色
$("#p5").nextAll().css("color","blue");//把id為"p5"以後的所有的标簽顔色都設定成為藍色的

$("#p5").nextUntil("#p8").css("color","pink");//把id為"p5"以後的直到"p8"(不包含p8)标簽前的所有标簽顔色都設定成為粉色的

3.7.3 向上查找兄弟标簽

$(".div1").prev()                   擷取div1類的前一個标簽
$(".div1").prevAll()                擷取div1類的所有的标簽
$(".div1").prevUntil(div2)          擷取div1類之前,直到div2(不含div2)的所有的标簽

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>
<div class="div4">
    <p class="p10" id="p3">p3</p>
    <p class="p10">p4</p>
    <p class="p10" id="p5">p5</p>
    <p class="p10">p6</p>
    <p class="p10">p7</p>
    <p class="p10" id="p8">p8</p>
</div>

$("#p8").prev().css("color","red");//把id為"p8"的标簽的上一個标簽,也即"p7"标簽顔色設定為紅色
$("#p5").prevAll().css("color","yellow");//把id為"p5"的标簽的上面的所有标簽顔色設定為黃色

$("#p8").prevUntil("#p5").css("color","blue");//把id為"p8"上面直到"p5"(不包含p5标簽)之前的所有的标簽顔色都設定成為藍色的

3.7.4 查找所有兄弟标簽

$(".div1").siblings()       擷取div1類的所有的同級标簽

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>
<div class="div4">
    <p class="p10" id="p3">p3</p>
    <p class="p10">p4</p>
    <p class="p10" id="p5">p5</p>
    <p class="p10">p6</p>
    <p class="p10">p7</p>
    <p class="p10" id="p8">p8</p>
</div>

例子：

$("#p5").siblings().css("color","red");//把id為"p5"所有的兄弟标簽顔色都設定成為紅色的

3.7.5 查找父标簽

$(".div1").parent()                 擷取div1類的父标簽
$(".div1").parents()                擷取div1類所有的父标簽(包括父标簽,父标簽的父标簽等,直到最上一級标簽為止)
$(".div1").parentsUntil()           擷取div1類所有的父标簽,直到指定的條件停止

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>
<div class="div4">
    <p class="p10" id="p3">p3</p>
    <p class="p10">p4</p>
    <p class="p10" id="p5">p5</p>
    <p class="p10">p6</p>
    <p class="p10">p7</p>
    <p class="p10" id="p8">p8</p>
</div>

console.log($(".p10").parent().attr("class"));//列印"p10"類的父标簽的類名

$(".p10").parents().css("color","red");//把"p10"的父标簽的樣式設為紅色

$(".div3").parentsUntil(".div1").css("color","red")//擷取從"div3"類直到"div1"類之前的父标簽,并把其父标簽的顔色高為紅色

$("p").hasClass("test") 查找p标簽中class名為test的标簽

3.8更多選擇器

$("[href]")                    選取所有的href屬性的元素
 $("a[target='_blank']")        選取所有的target屬性值等于"_blank"的<a>标簽
 $("a[target!='_blank']")       選取所有的target屬性值不等于"_blank"的<a>标簽

jQuery中的選擇器及篩選器

1.jQuery的介紹

2.jQuery對象

3.尋找元素(選擇器和篩選器)

3.1 基本選擇器:

3.2 層級選擇器

3.3 基本篩選器

3.4 屬性選擇器

3.5 表單選擇器(隻适用于input表單)

3.6 過濾篩選器

3.7查找篩選器

3.7.1 查找子标簽

3.7.2 向下查找兄弟标簽

3.7.3 向上查找兄弟标簽

3.7.4 查找所有兄弟标簽

3.7.5 查找父标簽

3.8更多選擇器

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條