愈來愈少人用JQuery，但你就不學了嗎？（2）

時間 2020-07-14

原文原文鏈接

如須要跟多資料請點擊下方圖片⬇（掃碼加好友→備註66）

Jquery選擇器

和使用js操做Dom同樣，獲取文檔中的節點對象是很頻繁的一個操做，在jQuery中提供了簡便的方式供咱們查找|定位元素，稱爲jQuery選擇器，選擇器能夠說是最考驗一我的 jQuery 功力的地方，通俗的講, Selector 選擇器就是"一個表示特殊語意的字符串"。只要把選擇器字符串傳入上面的方法中就可以選擇不一樣的Dom 對象而且以 jQuery 包裝集的形式返回。javascript

jQuery 選擇器按照功能主要分爲"選擇"和"過濾"。而且是配合使用的，具體分類以下。基礎選擇器掌握便可 ,其餘用到再查閱。css

基礎選擇器

選擇器	名稱	舉例
id選擇器	#id	$("#testDiv")選擇id爲testDiv的元素
元素名稱選擇器	element	$("div")選擇全部div元素
類選擇器	.class	$(".blue")選擇全部class=blue的元素
選擇全部元素	*	$("*")選擇頁面全部元素
組合選擇器	selector1,selector2,selectorN	$("#testDiv,span,.blue")同時選中多個選擇器匹配的元素

<style type="text/css">
    .blue{
        background: blue;
    }
</style>

<body>
    <div id="mydiv1">id選擇器1<span>span中的內容</span></div>
    <div id="mydiv2" class="blue">元素選擇器</div>
    <span class="blue">樣式選擇器</span>
</body>

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // id選擇器
    console.log("======id====");
    var idSelecter = $('#mydiv1');
    console.log(idSelecter.html());
    console.log(idSelecter.text()); 
    // 元素選擇器
    console.log("======name====");
    var nameSe = $('div'); // 有多個div元素
    nameSe.each(function(){
        // this是dom對象，$(this)是jquery對象
        console.log($(this).text());
    });
    // 類選擇器，class
    console.log("======class====");
    var classSe = $('.blue'); // 有多個class=blue的元素
    classSe.each(function(){
        console.log($(this).text());
    });
    // 通用選擇器：*
     console.log("======全部元素====");
     var all = $("*");
     console.log(all.length);
    // 組合選擇器
    console.log("======組合====");
    var unionSe = $('span, .blue,div');
    unionSe.each(function(){    
        console.log($(this).text());
    });
</script>

層次選擇器

選擇器	名稱	舉例
後代選擇器	ancestor descendant	$("#parent div")選擇id爲parent的元素的全部div元素
子代選擇器	parent > child	$("#parent>div")選擇id爲parent的直接div子元素
相鄰選擇器	prev + next	$(".blue + img")選擇css類爲blue的下一個img元素
同輩選擇器	prev ~ sibling	$(".blue ~ img")選擇css類爲blue的以後的img元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>層次選擇器</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
        <style type="text/css">
            .testColor{
                background: green;
            }
            .gray{
                background: gray;
            }
        </style>
    </head>
    <body>
        <div id="parent">層次擇器
            <div id="child" class="testColor">父選擇器
                <div class="gray">子選擇器</div>
                <img src="http://www.baidu.com/img/bd_logo1.png" 
                      width="270" height="129" />
                <img src="http://www.baidu.com/img/bd_logo1.png" 
                      width="270" height="129" />
            </div>  
            <div>
                選擇器2<div>選擇器2中的div</div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        console.log("=========後代選擇器-選擇全部後代=====");
        var ancestorS = $('#parent div');
        ancestorS.each(function(){
            console.log($(this).text());
        });

        console.log("=========子代選擇器-選擇兒子輩=====");
        var child = $('#parent>div');
        child.each(function(){
            console.log($(this).text());
        });

        console.log("=========相鄰選擇器=====");
        var pre_next = $(".gray + img");
        console.log(pre_next.length);

        console.log("=========同輩選擇器,其後，（弟弟）=====");
        var pre_siblings = $(".gray ~ img");
        console.log(pre_siblings.length);
    </script>
</html>

表單選擇器

Forms	名稱	舉例
表單選擇器	:input	查找全部的input元素：$(":input")；<br />注意：會匹配全部的input、textarea、select和button元素。
文本框選擇器	:text	查找全部文本框：$(":text")
密碼框選擇器	:password	查找全部密碼框：$(":password")
單選按鈕選擇器	:radio	查找全部單選按鈕：$(":radio")
複選框選擇器	:checkbox	查找全部複選框：$(":checkbox")
提交按鈕選擇器	:submit	查找全部提交按鈕：$(":submit")
圖像域選擇器	:image	查找全部圖像域：$(":image")
重置按鈕選擇器	:reset	查找全部重置按鈕：$(":reset")
按鈕選擇器	:button	查找全部按鈕：$(":button")
文件域選擇器	:file	查找全部文件域：$(":file")

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表單驗證</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <form id='myform' name="myform"  method="post">     
            <input type="hidden" name="uno" value="9999" disabled="disabled"/>
            姓名:<input type="text" id="uname" name="uname" /><br />
            密碼:<input type="password" id="upwd" name="upwd" value="123456" /><br />
            年齡:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
                 <input type="radio" name="uage" value="1"/>你懂得  <br /> 
            愛好:<input type="checkbox" name="ufav" value="籃球"/>籃球
                 <input type="checkbox" name="ufav" value="爬牀"/>爬牀
                 <input type="checkbox" name="ufav" value="代碼"/>代碼<br />
            來自:<select id="ufrom" name="ufrom">
                    <option value="-1" selected="selected">請選擇</option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                </select><br />
            簡介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
            頭像:<input type="file"  /><br />
            <input type="image" src="http://www.baidu.com/img/bd_logo1.png" 
                   width="20" height="20"/>
            <button type="submit" onclick="return checkForm();">提交</button>
            <button type="reset" >重置</button>       

        </form>
    </body>
</html>
<script type="text/javascript">
    function checkForm(){
        // 獲取 全部的表單元素
        $(":input").each(function(){
            // console.log($(this)[0]);
            console.log($(this)[0].tagName);
        })
        console.log("------+++++++++++++++++++++--------")
        // 獲取 text
        console.log("text-->" + $(":text").length); // 1
        // 獲取 password
        console.log("password-->" + $(":password").length); // 1
        // 獲取radio
        console.log("radio-->" + $(":radio").length); // 2
        // 獲取checkbox
        console.log("checkbox-->" + $(":checkbox").length); // 3
        // 獲取file
        console.log("file-->" + $(":file").length); // 1
        // 獲取按鈕
        console.log("button-->" + $(":button").length); // 2
        // 獲取submit按鈕
        console.log("submit-->" + $(":submit").length); // 1
        // 獲取image按鈕
        console.log("image-->" + $(":image").length); // 1
        // 獲取reset按鈕
        console.log("reset-->" + $(":reset").length); // 1
        return false;       
    }
</script>