jQuery 對象、基本選擇器、篩選選擇器

時間  2019-11-15
標籤 jquery 對象 基本 選擇器 篩選 欄目 JQuery 简体版
原文   原文鏈接

DOM對象轉化成jQuery對象

若是傳遞給$(DOM)函數的參數是一個DOM對象，jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象javascript

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
<script type="text/javascript">
    var div = document.getElementsByTagName('div'); //dom對象         
    //將dom節點div轉化爲$div的jquery對象
    $div = $(div);          
    var $first = $div.first(); //找到第一個div元素
    $first.css('color', 'red'); //給第一個元素設置顏色
</script>
</body>
</html>

jQuery基本選擇器

id選擇器

id選擇器：一個用來查找的ID，即元素的id屬性：$("#id")css

注：id是惟一的，每一個id值在一個頁面中只能使用一次。若是多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。但這種行爲不該該發生;有超過一個元素的頁面使用相同的id是無效的html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>   
     <div id="aaron">
        <p>id="aaron"</p>
        <p>選中</p>
    </div>
    <div id="imooc">
        <p>id="imooc"</p>
        <p>jQuery選中</p>
    </div>
    <div id="imooc">
        <p>id="imooc"</p>
        <p>jQuery未選中</p>
    </div>
    <script type="text/javascript">
       //經過原生方法處理
        var div = document.getElementById('aaron');
        div.style.border = "3px solid blue";
    </script>
    <script type="text/javascript">
        //經過jQuery直接傳入id
        //id的惟一，只選擇到了第一個匹配的id爲imooc的div節點
        $("#aaron").css("border", "3px solid red");
    </script>
</body>
</html>

類選擇器

類選擇器，經過class樣式類名來獲取節點：$( ".class" )java

類選擇器，相對id選擇器來講，效率相對會低一點，可是優點就是能夠多選jquery

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>選中</p>
    </div>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>選中</p>
    </div>

    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery選中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery選中</p>
    </div>

    <script type="text/javascript">
        //經過原生方法處理
        //樣式是能夠多選的，因此獲得的是一個合集
        //須要經過循環給合集中每個元素修改樣式
        var divs = document.getElementsByClassName('aaron');
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.border = "3px solid blue";
        }
    </script>

    <script type="text/javascript">
        //經過jQuery直接傳入class
        //class選擇器能夠選擇多個元素
        $(".imooc").css("border", "3px solid red");
    </script>


</body>

</html>

元素選擇器

元素選擇器，根據給定(html)標記名稱選擇全部的元素：$( "element" )瀏覽器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>選中</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>選中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery選中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery選中</p>
    </div>

    <script type="text/javascript">
    //經過原生方法處理
    //獲取到全部的節點標記名爲div的元素
    //給每個div加上藍色的邊框
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.border = "3px solid blue";
    }
    </script>
    <script type="text/javascript">
    //經過jQuery直接傳入標籤名p
    //標籤是能夠多個的，因此獲得的一樣也是一個合集
    $("p").css("border", "3px solid red");
    </script>
</body>

</html>

全選擇器（*選擇器）

傳遞*選擇器來選中文檔頁面中的元素：$( " * " )dom

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>選中</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>選中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery選中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery選中</p>
    </div>

    <script type="text/javascript">
        //獲取頁面中全部的元素
        var elements1 = document.getElementsByTagName('*');
    </script>
    <script type="text/javascript">
        //獲取頁面中全部的元素
        var elements2 = ?       ;
        //原生與jQuery方法比較
        //===表示數據和類型都相等
        if(elements2.length === elements1.length){
           elements2.css("border","1px solid red");
        }
    </script>
</body>
</html>

層級選擇器

選擇器中的層級選擇器就是用來處理如下關係：函數

子元素 後代元素 兄弟元素 相鄰元素

clipboard.png

層級選擇器之間的類似點與不一樣點：佈局

  1. 層級選擇器都有一個參考節點
  2. 後代選擇器包含子選擇器的選擇的內容
  3. 通常兄弟選擇器包含相鄰兄弟選擇的內容

  4. 相鄰兄弟選擇器和通常兄弟選擇器所選擇到的元素，必須在同一個父元素下測試

    <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子選擇器與後代選擇器</h2>
    <div class="left">
        <div class="aaron">
            <p>div下的第一個p元素</p>
        </div>
        <div class="aaron">
            <p>div下的第一個p元素</p>
        </div>
    </div>
    <div class="right">
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
    </div>

    <script type="text/javascript">
        //子選擇器
        //$('div > p') 選擇全部div元素裏面的子元素P
        $('div > p').css("border", "1px groove red");
    </script>

    <script type="text/javascript">
        //後代選擇器
        //$('div  p') 選擇全部div元素裏面的p元素
        $('div  p').css("border", "1px groove red");
    </script>


    <h2>相鄰兄弟選擇器與通常兄弟選擇器</h2>
    <div class="bottom">
        <div>兄弟節點div, +~選擇器不能向前選擇</div>
        <span class="prev">選擇器span元素</span>
        <div>span後第一個兄弟節點div</div>
        <div>兄弟節點div
            <div class="small">子元素div</div>
        </div>
        <span>兄弟節點span,不可選</span>
        <div>兄弟節點div</div>
    </div>

    <script type="text/javascript">
        //相鄰兄弟選擇器
        //選取prev後面的第一個的div兄弟節點
        $(".prev + div").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
        //通常相鄰選擇器
        //選取prev後面的全部的div兄弟節點
        $(".prev ~ div").css("border", "3px groove blue");
    </script>

</body>

</html>

jQuery篩選選擇器

基本篩選選擇器

篩選選擇器的用法與CSS中的僞元素類似，選擇器用冒號「：」開頭，以下是基本篩選器的描述：

clipboard.png

注意事項：

  1. :eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素，根據以前匹配的元素在進一步篩選，注意jQuery合集都是從0開始索引

  2. gt是一個段落篩選，從指定索引的下一個開始，gt(1) 實際從2開始

    <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>基本篩選器</h2>
    <h3>:first/:last/:even/:odd</h3>
    <div class="left">
        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>
    </div>
    <script type="text/javascript">
    //找到第一個div
    $(".div:first").css("color", "#CD00CD");
    </script>
    
    <script type="text/javascript">
    //找到最後一個div
    $(".div:last").css("color", "#CD00CD");
    </script>
    
    <script type="text/javascript">
    //:even 選擇所引值爲偶數的元素，從 0 開始計數
    $(".div:even").css("border", "3px groove red");
    </script>
    
    <script type="text/javascript">
    //:odd 選擇所引值爲奇數的元素，從 0 開始計數
    $(".div:odd").css("border", "3px groove blue");
    </script>
    
    
    <h3>:eq/:gt/:lt</h3>
    <div class="left">
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:eq(2)</p>
        </div>
        <div class="aaron">
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
    </div>
    <script type="text/javascript">
    //:eq
    //選擇單個
    $(".aaron:eq(2)").css("border", "3px groove blue");
    </script>
http://img.mukewang.com/57cd1df2000146de06020498.jpg    
    <script type="text/javascript">
    //:gt 選擇匹配集合中全部索引值大於給定index參數的元素
    $(".aaron:gt(3)").css("border", "3px groove blue");
    </script>
    
     <script type="text/javascript">
    //:lt 選擇匹配集合中全部索引值小於給定index參數的元素
    //與:gt相反
    $(".aaron:lt(2)").css("color", "#CD00CD");
    </script>
    
    <h3>:not</h3>
    <div class="left">
        <div>
            <input type="checkbox" name="a" />
            <p>Aaron</p>
        </div>
        <div>
            <input type="checkbox" name="b" />
            <p>慕課</p>
        </div>
        <div>
            <input type="checkbox" name="c" checked="checked" />
            <p>其餘</p>
        </div>
    </div>
    <script type="text/javascript">
        //:not 選擇全部元素去除不匹配給定的選擇器的元素
        //選中全部緊接着沒有checked屬性的input元素後的p元素，賦予顏色
        $("input:not(:checked) + p").css("background-color", "#CD00CD");
    </script>
</body>

</html>

內容篩選選擇器

基本篩選選擇器針對的都是元素DOM節點，若是要經過內容來過濾，使用內容篩選選擇器，其規則體如今它所包含的子元素或者文本內容上，內容過濾器描述以下表：

clipboard.png

注意事項：

  1. :contains與:has都有查找的意思，可是contains查找包含「指定文本」的元素，has查找包含「指定元素」的元素
    若是:contains匹配的文本包含在元素的子元素中，一樣認爲是符合條件的。

  2. :parent與:empty是相反的，二者所涉及的子元素，包括文本節點

    <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>內容篩選器</h2>
    <h3>:contains/:has</h3>
    <div class="left">
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>
                <span>:has</span>
            </p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
    </div>

    <script type="text/javascript">
        //查找全部class='div'中DOM元素中包含"contains"的元素節點
        //而且設置顏色
        $(".div:cotains(':contains')").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找全部class='div'中DOM元素中包含"span"的元素節點
        //而且設置顏色
        $(".div:has(span)").css("color", "blue");
    </script>


    <h3>:parent/:empty</h3>
    <div class="left">
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a></a>
        </div>
    </div>
    <script type="text/javascript">
       //選擇全部包含子元素或者文本的a元素
       //增長一個藍色的邊框
       $("a:parent").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
       //找到a元素下面的全部空節點(沒有子元素)
       //增長一段文本與邊框
       $("a:empty").text(":empty").css("border", "3px groove red"); 
    </script>

</body>

</html>

可見性篩選選擇器

元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden。描述以下：

clipboard.png

:hidden選擇器，不只僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等

隱藏元素有以下的方法：

  1. CSS display的值是none
  2. type=" hidden "的表單元素
  3. 寬度和高度都顯式設置爲0
  4. 一個祖先元素是隱藏的，該元素是不會在頁面上顯示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0

若是元素中佔據文檔中必定的空間,元素被認爲是可見的。可見元素的寬度或高度，是大於零。元素的visibility: hidden 或 opacity: 0被認爲是可見的，由於他們仍然佔用空間佈局

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>可見性篩選選擇器</h2>
    <h3>:visible/:hidden</h3>
    <div class="left">
        <div class="div">
            <a>display</a>
            <p id="div1" style="display:none;">display</p>
        </div>
        <div class="div">
            <a>width</a>
            <a>height</a>
            <p id="div2" style="width:0;height:0">width/height</p>
        </div>
        <div class="div">
            <a>visibility</a>
            <a>opacity</a>
            <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
        </div>
    </div>

    <p id="show"></p>
    <script type="text/javascript">
        function show (ele) {
            if (ele instanceof jQuery) {
                $("#show").html('元素的長度的 = ' + ele.length)
            } else {
                alert(ele+' 不是jQuery對象')
            }
        }
    </script>


    <script type="text/javascript">
        //查找id = div1的DOM元素,是否可見
        show( $('#div1:visible') );
    </script>

    <script type="text/javascript">
        //查找id = div2的DOM元素,是否可見
        show( $('#div2:visible') );
    </script>

    <script type="text/javascript">
        //查找id = div3的DOM元素,是否可見
        show( $('#div3:visible') );
    </script>

    <script type="text/javascript">
        //查找id = div1的DOM元素,是否隱藏
        show( $('#div1:hidden') );
    </script>

    <script type="text/javascript">
        //查找id = div2的DOM元素,是否隱藏
        show( $('#div2:hidden') );
    </script>

    <script type="text/javascript">
        //查找id = div3的DOM元素,是否隱藏
        show( $('#div3:hidden') );
    </script>

</body>

</html>

屬性篩選選擇器

屬性選擇器能夠基於屬性來定位一個元素。只需指定該元素的某個屬性，那麼全部使用該屬性且不考慮其屬性值的元素都將被定位，也可更加明確並定位在這些屬性上使用特定值的元素

clipboard.png

其中，[attr="value"]和[attr*="value"]最爲實用：

  • [attr="value"]能定位不一樣類型的元素，特別是表單form元素的操做，好比input[type="text"],input[type="checkbox"]等
  • [attr*="value"]能在網站中幫助咱們匹配不一樣類型的文件

$(selector)中selector有三種形式:
①字符串：用於元素的選取；②DOM元素：封裝Dom元素，提供一系列jquery方法；③function 就是初始化時的$(fn)形式
$("div[data=pmx]")括號裏能夠是單引號，也能夠是雙引號。目的是表示$(selector)裏面的參數是個字符串。[attribute = value]這種形式中value能夠不加引號，若是要加引號，須要參照selector。若是selector是單引號，那麼value必須是雙引號

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>屬性篩選選擇器</h2>
    <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true" name='p1'>
            <a>[att=val]</a>
        </div>
        <div class="div" testattr="true" p2>
            <a>[att]</a>
        </div>
        <div class="div" testattr="true" name="-">
            <a>[att|=val]</a>
        </div>
        <div class="div" testattr="true" name="a b">
            <a>[att~=val]</a>
        </div>
    </div>

    <script type="text/javascript">
         //查找全部div中，屬性name=p1的div元素
         $("div[name=p1]"]).css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有屬性p2的div元素
        $("div[p2]").css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有屬性name中的值只包含一個連字符「-」的div元素
        $("div[name|='-']").css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有屬性name中的值包含一個連字符「空」和「a」的div元素
        $("div[name~='a']").css("border", "3px groove #668B8B"); 
    </script>


    <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true"  name='imooc-aaorn'>
            <a>[att^=val]</a>
        </div>
        <div class="div" testattr="true"  name='aaorn-imooc'>
            <a>[att$=val]</a>
        </div>
        <div class="div" testattr="true"  name="attr-test-selector">
            <a>[att*=val]</a>
        </div>
        <div class="div" name="a b">
            <a>[att!=val]</a>
        </div>
    </div>


    <script type="text/javascript">
         //查找全部div中，屬性name的值是用imooc開頭的
         $("div[name^='imooc']").css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
         //查找全部div中，屬性name的值是用imooc結尾的
         $("div[name$='imooc']").css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有屬性name中的值包含一個test字符串的div元素
        $("div[name*=test]").css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有屬性testattr中的值沒有包含"true"的div
        $("div[name!=true]").css("border", "3px groove #668B8B"); 
    </script>


</body>

</html>

子元素篩選選擇器

子元素篩選選擇器不常使用，其篩選規則比起其它的選擇器稍微要複雜點

子元素篩選選擇器描述表：

clipboard.png

注意事項：

  1. :first只匹配一個單獨的元素，可是:first-child選擇器能夠匹配多個：即爲每一個父級元素匹配第一個子元素。這至關於:nth-child(1)
  2. :last 只匹配一個單獨的元素， :last-child 選擇器能夠匹配多個元素：即，爲每一個父級元素匹配最後一個子元素
  3. 若是子元素只有一個的話，:first-child與:last-child是同一個
  4. :only-child匹配某個元素是父元素中惟一的子元素，就是說當前子元素是父元素中惟一的元素，則匹配
  5. jQuery實現:nth-child(n)是嚴格來自CSS規範，因此n值是「索引」，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的
  6. nth-child(n) 與 :nth-last-child(n) 的區別前者是從前日後計算，後者從後往前計算
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子元素篩選選擇器</h2>
    <h3>:first-child、:last-child、:only-child</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查找class="first-div"下的第一個a元素
        //針對全部父級下的第一個
        $(".first-div a:first-child").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的最後一個a元素
        //針對全部父級下的最後一個
        //若是隻有一個元素的話，last也是第一個元素
        $(".first-div a:last-child").css("color", "red");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的只有一個子元素的a元素
        $(".first-div a:only-child").css("color", "blue");
    </script>


    <h3>:nth-child、:nth-last-child</h3>
    <div class="left last-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>第三個元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>第三個元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查找class="last-div"下的第二個a元素
        $('.last-div a:nth-child(2)').css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="last-div"下的倒數第二個a元素
        $('.last-div a:nth-last-child(2)').css("color", "red");
    </script>

</body>

</html>

表單元素選擇器

表單選擇器的具體方法描述：

clipboard.png

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style> 
        input{
            display: block;
            margin: 10px;
            padding:10px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子元素篩選選擇器</h2>
    <h3>input、text、password、radio、checkbox</h3>
    <h3>submit、image、reset、button、file</h3>
    <div class="left first-div">
        <form>
            <input type="text" value="text類型"/>
            <input type="password" value="password"/>
            <input type="radio"/> 
            <input type="checkbox"/>
            <input type="submit" />
            <input type="image" />
            <input type="reset" />
            <input type="button" value="Button" />
            <input type="file" />
        </form>
    </div>

    <script type="text/javascript">
        //查找全部 input, textarea, select 和 button 元素
        //:input 選擇器基本上選擇全部表單控件
        $(':input').css("border", "1px groove red"); 
    </script>

    <script type="text/javascript">
        //匹配全部input元素中類型爲text的input元素
        $('input:text').css("background", "#A2CD5A");
    </script>

    <script type="text/javascript">
        //匹配全部input元素中類型爲password的input元素
        $('input:password').css("background", "yellow");
    </script>

    <script type="text/javascript">
        //匹配全部input元素中的單選按鈕,並選中
        $('input:radio').attr('checked','true');
    </script>

    <script type="text/javascript">
        //匹配全部input元素中的複選按鈕,並選中
        $('input:checkbox').attr('checked','true'); 
    </script>

    <script type="text/javascript">
        //匹配全部input元素中的提交的按鈕,修改背景顏色
        $('input:submit').css("background", "#C6E2FF");
    </script>

    <script type="text/javascript">
        //匹配全部input元素中的圖像類型的元素,修改背景顏色
        $('input:image').css("background", "#F4A460");
    </script>

    <script type="text/javascript">
        //匹配全部input元素中類型爲按鈕的元素
        $('input:button').css("background", "red");
    </script>

    <script type="text/javascript">
        //匹配全部input元素中類型爲file的元素
        $('input:file').css("background", "#CD1076");
    </script>

</body>

</html>
  • 選擇器適用於複選框和單選框，對於下拉框元素, 使用 :selected 選擇器
  • 在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素，因此保險起見換用選擇器input:checked，確保只會選取<input>元素

特殊選擇器this

this，表示當前的上下文對象是一個html對象，能夠調用html對象所擁有的屬性和方法。$(this),表明的上下文對象是一個jQuery的上下文對象，能夠調用jQuery的方法和屬性值

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>特殊選擇器this</h2>

    <p id="test1">點擊測試：經過原生DOM處理</p>
    
    <p id="test2">點擊測試：經過原生jQuery處理</p>

    <script type="text/javascript">
        var p1 = document.getElementById('test1')
        p1.addEventListener('click',function(){
            //直接經過dom的方法改變顏色
            this.style.color = "red"; 
        },false);
    </script>

    <script type="text/javascript">
        $('#test2').click(function(){
            //經過包裝成jQuery對象改變顏色
            $(this).css('color','blue');
        })
    </script>

</body>

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