JQuery02

4.jQuery選擇器02

4.3過濾選擇器

4.3.1基礎過濾選擇器

$("li:first")    //第一個li
$("li:last")     //最后一個li
$("li:even")     //挑選下標為偶數的li
$("li:odd")      //挑選下標為奇數的li
$("li:eq(4)")    //下標等于 4 的li(第五個 li 元素)
$("li:gt(2)")    //下標大于 2 的li
$("li:lt(2)")    //下標小于 2 的li
$("li:not(#runoob)") //挑選除 id="runoob" 以外的所有li

基礎過濾選擇器介紹：

:first用法：$("tr:first");，回傳值：單個元素的組成的集合

說明：匹配找到的第一個元素
:last用法：$("tr:last");，回傳值：集合元素

說明：匹配找到的最后一個元素
:not(selector)用法：$("input:not(:checked)");，回傳值：集合元素

說明：取出所有與給定選擇器匹配的元素，有點類似于“非”，這里的例子為沒有選擇的input(input的type=“checkbox”)
:even用法：$("tr:even");，回傳值：集合元素

說明：匹配所有索引值為偶數的元素，從0開始計數，js的資料都是從0開始計數的，所以第一個選中的元素下標為0
:odd用法：$("tr:odd");，回傳值：集合元素

說明：匹配所有索引值為奇數的元素，從0開始計數，
:eq(index)用法：$("tr:eq(0)");，回傳值：集合元素

說明：匹配一個給定索引值的元素，eq(0)就是獲取第一個tr元素，括號里面的是索引值
:gt(index)用法：$("tr:gt(0)");，回傳值：集合元素

說明：匹配所有大于給定索引值的元素，
:lt(index)用法：$("tr:lt(2)");，回傳值：集合元素

說明：匹配所有小于給定索引值的元素，
:header（固定寫法）用法：$(":header").css("background","#EEE");，回傳值：集合元素

說明：匹配如h1，h2，h3之類的標題元素，是專門用來獲取標題元素的
:animated（固定寫法），回傳值：集合元素

說明：匹配所有正在執行影片效果的元素

基礎過濾選擇器-應用實體

改變第一個 div 元素的背景色為 #0000FF
改變最后一個 div 元素的背景色為 #0000FF
改變 class 不為 one 的所有 div 元素的背景色為 #0000FF
改變索引值為偶數的 div 元素的背景色為 #0000FF
改變索引值為奇數的 div 元素的背景色為 #0000FF
改變索引值為大于 3 的 div 元素的背景色為 #0000FF
改變索引值為等于 3 的 div 元素的背景色為 #0000FF
改變索引值為小于 3 的 div 元素的背景色為 #0000FF
改變所有的標題元素的背景色為 #0000FF

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基礎過濾選擇器-應用實體</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="https://www.cnblogs.com/liyuelian/p/script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1. 改變第一個 div 元素的背景色為 #0000FF
            $("#b1").click(function () {
                $("div:first").css("background", "#0000FF")
                //或者 $("div:eq(0)").css("background","#0000FF")
            })
            // 2. 改變最后一個 div 元素的背景色為 #0000FF
            //所謂的最后一個是從上到下，從左到右去搜，最后一個
            $("#b2").click(function () {
                $("div:last").css("background", "#0000FF")
            })
            // 3. 改變 class 不為 one 的所有 div 元素的背景色為 #0000FF
            $("#b3").click(function () {
                $("div:not(.one)").css("background", "#0000FF")
            })
            // 4. 改變索引值為偶數的 div 元素的背景色為 #0000FF
            $("#b4").click(function () {
                $("div:even").css("background", "#0000FF")
            })
            // 5. 改變索引值為奇數的 div 元素的背景色為 #0000FF
            $("#b5").click(function () {
                $("div:odd").css("background", "#0000FF")
            })
            // 6. 改變索引值為大于 3 的 div 元素的背景色為 #0000FF
            $("#b6").click(function () {
                $("div:gt(3)").css("background", "#0000FF")
            })
            // 7. 改變索引值為等于 3 的 div 元素的背景色為 #0000FF
            $("#b7").click(function () {
                $("div:eq(3)").css("background", "#0000FF")
            })
            // 8. 改變索引值為小于 3 的 div 元素的背景色為 #0000FF
            $("#b8").click(function () {
                $("div:lt(3)").css("background", "#0000FF")
            })
            // 9. 改變所有的標題元素的背景色為 #0000FF
            $("#b9").click(function () {
                $(":header").css("background", "#0000FF")
            })
        })
    </script>
</head>
<body>
<h1>H1 標題</h1>
<h2>H2 標題</h2>
<h3>H3 標題</h3>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變第一個 div 元素的背景色為 #0000FF" id="b1"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變最后一個 div 元素的背景色為 #0000FF" id="b2"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變 class 不為 one 的所有 div 元素的背景色為 #0000FF" id="b3"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變索引值為偶數的 div元素的背景色為 #0000FF" id="b4"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變索引值為奇數的 div元素的背景色為 #0000FF" id="b5"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變索引值為大于3 的div元素的背景色為 #0000FF" id="b6"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變索引值為等于3 的div元素的背景色為 #0000FF" id="b7"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變索引值為小于3 的div元素的背景色為 #0000FF" id="b8"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變所有的標題元素的背景色為 #0000FF" id="b9"/>
<hr/>
<div id="one" >
    div id 為 one
</div>
<div id="two">
    div id 為 two
    <div id="two01">
        id two01
    </div>
    <div id="two02">
        id two02
    </div>
</div>
<div id="three" >
    div id 為 three class one
    <div id="three01">
        id three01
    </div>
</div>
</body>
</html>

4.3.2內容過濾選擇器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有選擇器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素

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

:contains(text)用法：$("div:contains('Hello')")回傳值：集合元素

說明：匹配包含給定文本的元素，這個選擇器比較有用，當我們要選擇的不是dom標簽元素時，它就派上了用場，它的作用是查找被標簽圍起來的文本內容是否符合指定的內容的，
:empty用法：$("td:empty")回傳值：集合元素

說明：匹配所有不包含子元素或者文本的空元素
:has(selector)用法：$("div:has(p)").addClass("test")回傳值：集合元素

說明：匹配含有選擇器所匹配的元素的元素，這里的例子是：給所有包含p元素的div標簽加上
:parent用法：$("td:parent")回傳值：集合元素

說明：匹配含有子元素或者文本的元素，和上面empty相反，

內容過濾選擇器-應用實體

改變含有文本 'di' 的 div 元素的背景色為 #0000FF
改變不包含子元素(或者文本元素) 的 div 空元素的背景色為 pink
改變含有 class 為 mini 元素的 div 元素的背景色為 green
改變含有子元素(或者文本元素)的div元素的背景色為 yellow
改變不含有文本 'di' 的div元素的背景色為 pink

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內容過濾選擇器應用實體</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="https://www.cnblogs.com/liyuelian/p/script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1. 改變含有文本 ‘di’ 的 div 元素的背景色為 #0000FF
            $("#b1").click(function () {
                $("div:contains('di')").css("background", "#0000FF")
            })
            // 2. 改變不包含子元素(或者文本元素) 的 div 空元素的背景色為 pink
            $("#b2").click(function () {
                $("div:empty").css("background", "pink")
            })
            // 3. 改變含有 class 為 mini 元素的 div 元素的背景色為 green
            $("#b3").click(function () {
                //這個是選擇有  class='.mini' div 的父div元素
                // $("div:has(.mini)").css("background","green")
                //這個才是選擇有 class='.mini' div
                $("div.mini").css("background", "green")
            })
            // 4. 改變含有子元素(或者文本元素)的div元素的背景色為 yellow
            $("#b4").click(function () {
                $("div:parent").css("background", "yellow")
            })
            // 5. 改變不含有文本 di 的 div 元素的背景色 為pink
            $("#b5").click(function () {
                $("div:not(:contains('di'))").css("background", "pink")
            })
        })
    </script>
</head>
<body>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變含有文本'di' 的 div 元素的背景色為 #0000FF" id="b1"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變不包含子元素(或者文本元素) 的 div 空元素的背景色為 pink" id="b2"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變含有 class 為 mini 元素的 div 元素的背景色為 green" id="b3"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變含有子元素(或者文本元素)的div元素的背景色為 yellow" id="b4"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變不含有文本'di' 的div元素的背景色為pink" id="b5"/>
<hr/>
<div id="xxxx">
    <div id="one" >
        div id 為 one
    </div>
</div>
<div id="two">
    div id 為 two
    <div id="two01">
        id two01
    </div>
    <div id="two02">
        id two02
    </div>
</div>
<div id="three" >
    div id 為 three class one
    <div id="three01">
        id three01
    </div>
</div>
<div id="four" >
    XXXXXXXXXX
</div>
<div id="five" ></div>
<div id="mover">
    執行影片
</div>
</body>
</html>

4.3.3可見性過濾選擇器

$("li:hidden")       //匹配所有不可見元素，或type為hidden的元素
$("li:visible")      //匹配所有可見元素

可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素

:hidden用法：$("tr:hidden")回傳值：集合元素

說明：匹配所有的不可見元素，input元素的type屬性為"hidden"的話也會被匹配到，意思是css中display:none和input type="hidden"的都會被匹配到
:visible用法：$("tr:visible")回傳值：集合元素

說明：匹配所有的可見元素

應用實體

改變所有可見的div元素的背景色為 #0000FF
選取所有不可見的div元素, 利用 jQuery 中的 show() 方法將它們顯示出來, 并設定其背景色為 #0000FF
選取所有的文本隱藏域, 并列印它們的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可見性過濾選擇器-應用實體</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="https://www.cnblogs.com/liyuelian/p/script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1. 改變所有可見的div元素的背景色為 #0000FF
            $("#b1").click(function () {
                $("div:visible").css("background", "#0000FF")
            })
            // 2. 選取所有不可見的div元素, 利用 jQuery 中的 show() 方法將它們顯示出來, 并設定其背景色為 #0000FF
            $("#b2").click(function () {
                var $div = $("div:hidden");
                $div.show().css("background", "#0000FF")

            })
            // 3. 選取所有的文本隱藏域, 并列印它們的值
            $("#b3").click(function () {
                //先得到所有的hidden input
                var $inputs = $("input:hidden");
                //$inputs是一個jquery物件，而且是一個陣列物件
                //遍歷
                //方式一：for回圈
                // for (let i = 0; i < $inputs.length; i++) {
                //     //這里是dom物件
                //     var input = $inputs[i];
                //     // alert(input)//[object HTMLInputElement]
                //     console.log("值是："+input.value)
                // }
                //方式二：jquery each() 可以對陣列遍歷
                //1.each方法每遍歷一次，會將$input陣列的元素取出，傳給 this 物件
                $inputs.each(function () {
                    //這里可以使用this獲取每次遍歷的物件
                    //this物件是一個dom物件
                    // console.log("值是= "+this.value)
                    //也可以將this物件轉成jquery物件，使用jquery方法
                    alert("值是= " + $(this).val())
                })
            })
        })
    </script>
</head>
<body>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/改變所有可見的 div 元素的背景色為 #0000FF" id="b1"/> <br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/選取所有不可見的 div, 利用 jQuery 中的 show() 方法將它們顯示出來, 并設定其背景色為 #0000FF" id="b2"/> <br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/選取所有的文本隱藏域, 并列印它們的值" id="b3"/> <br/><br/>
<hr/>
<input type="hidden" value="https://www.cnblogs.com/liyuelian/p/hidden1"/>
<input type="hidden" value="https://www.cnblogs.com/liyuelian/p/hidden2"/>
<input type="hidden" value="https://www.cnblogs.com/liyuelian/p/hidden3"/>
<input type="hidden" value="https://www.cnblogs.com/liyuelian/p/hidden4"/>
<div id="one" >
    div id 為 one
</div>
<div id="two" >
    div id 為 two
</div>
<div id="three" >
    div id 為 three
</div>
</body>
</html>

4.3.4屬性過濾選擇器

$("div[id]")        //所有含有 id 屬性的 div 元素
$("div[id='123']")        // id屬性值為123的div 元素
$("div[id!='123']")        // id屬性值不等于123的div 元素
$("div[id^='qq']")        // id屬性值以qq開頭的div 元素
$("div[id$='zz']")        // id屬性值以zz結尾的div 元素
$("div[id*='bb']")        // id屬性值包含bb的div 元素
$("input[id][name$='man']") //多屬性選過濾，同時滿足兩個屬性的條件的元素

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

[attribute]用法：$("div[id]")回傳值：集合元素

說明：匹配包含給定屬性的元素，例子中是選取所有帶id 屬性的 div 元素
[attribute=value]用法：$("div[id='one']")回傳值：集合元素

說明：匹配給定屬性是某個特定值的元素，例子中是選取id 屬性的值為one的 div 元素
[attribute!=value]用法：$("input[name!='newsletter']回傳值：集合元素

說明：匹配所有不含有指定的屬性，或者屬性不等于特定值的元素，此選擇器等價于:not([attr=value])，即含有特定屬性但該屬性不含有指定值的元素，
[attribute^=value]用法：$("input[name^='news']")回傳值：集合元素

說明：匹配給定的屬性值是以某些值開始的元素
[attribute$=value]用法：$("input[name$='letter']")回傳值：集合元素

說明：匹配給定的屬性值是以某些值結尾的元素
[attribute*=value]用法：$("input[name*='man']")回傳值：集合元素

說明：匹配給定的屬性是包含某些值的元素
[attr1][attr2][attrN]用法：$("input[id][name$='man']")回傳值：集合元素

說明：多屬性選過濾，同時滿足兩個屬性的條件的元素

應用實體

選取下列元素,改變其背景色為 #0000FF

含有屬性title 的div元素.
屬性title值等于"test"的div元素.
屬性title值不等于"test"的div元素(沒有屬性title的也將被選中).
屬性title值以"te"開始的div元素.
屬性title值以"est"結束的div元素.
屬性title值含有"es"的div元素.
選取有屬性id的div元素，然后在結果中選取屬性title值含有“es”的 div 元素.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性過濾選擇器-應用實體</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="https://www.cnblogs.com/liyuelian/p/script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 選取下列元素,改變其背景色為 #0000FF
            // 1. 含有屬性title 的div元素.
            $("#b1").click(function () {
                $("div[title]").css("background", "#0000FF")
            })
            // 2. 屬性title值等于"test"的div元素.
            $("#b2").click(function () {
                $("div[title='test']").css("background", "#0000FF")
            })
            // 3. 屬性title值不等于"test"的div元素(沒有屬性title的也將被選中).
            $("#b3").click(function () {
                $("div[title!='test']").css("background", "#0000FF")
            })
            // 4. 屬性title值 以"te"開始 的div元素.
            $("#b4").click(function () {
                $("div[title^='te']").css("background", "#0000FF")
            })
            // 5. 屬性title值 以"est"結束 的div元素.
            $("#b5").click(function () {
                $("div[title$='est']").css("background", "#0000FF")
            })
            // 6. 屬性title值 含有"es"的div元素.
            $("#b6").click(function () {
                $("div[title*='es']").css("background", "#0000FF")
            })
            // 7. 選取有屬性id的div元素，然后在結果中選取屬性title值含有“es”的 div 元素.
            $("#b7").click(function () {
                $("div[id][title*='es']").css("background", "#0000FF")
            })
        })
    </script>
</head>
<body>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/含有屬性 title 的 div 元素" id="b1"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/屬性 title 值等于 test 的 div 元素" id="b2"/><br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/屬性 title 值不等于 test 的 div 元素(沒有屬性 title 的也將被選中)" id="b3"/><br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/屬性 title 值 以 te 開始 的 div 元素" id="b4"/><br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/屬性 title 值 以 est 結束 的 div 元素" id="b5"/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/屬性 title 值 含有 es 的 div 元素" id="b6"/><br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/選取有屬性 id 的 div 元素，然后在結果中選取屬性 title 值含有“es”的 div元素" id="b7"/><br/><br/>
<div id="one" title="test">
    div id 為 one test
</div>
<div id="one-1" title="texxx">
    div id 為 one-1 texxx
</div>
<div id="one-2" title="xxxest">
    div id 為 one-2 xxxest
</div>
<div id="one-3" title="xxxesxxxxxt">
    div id 為 one-3 xxxesxxxxxt
</div>
<div id="two" title="ate">
    div id 為 two
</div>
<div id="three" >
    div id 為 three
</div>
</body>
</html>

4.3.5子元素過濾選擇器

:nth-child(index/even/odd/equation)用法：$("ul li:nth-child(2)")回傳值：集合元素

說明：匹配其父元素下的第N個子或奇偶元素，這個選擇器和之前說過的基礎過濾(Bade Filters)中的eq()有些類似，不同的地方就是前者是從0開始，后者是從1開始，
:first-child用法：$("ul li:first-child")回傳值：集合元素

說明：匹配第一個子元素，':first'只匹配一個元素，而此選擇符將為每個父元素匹配其第一個子元素，這里需要區分
:last-child用法：$("ul li:last-child")回傳值：集合元素

說明：匹配最后一個子元素，':last'只匹配一個元素，而此選擇符將為每個父元素匹配其最后一個子元素，這里需要區分
:only-child用法：$("ul li:only-child")回傳值：集合元素

說明：如果某個元素是父元素中唯一的子元素，那將會被匹配
nth-child() 選擇器詳解如下：

(1):nth-child(even/odd): 能選取每個父元素下的索引值為偶(奇)數的元素

(2):nth-child(2): 能選取每個父元素下的索引值為 2 的元素

(3):nth-child(3n): 能選取每個父元素下的索引值是 3 的倍數的元素

(4):nth-child(3n + 1): 能選取每個父元素下的索引值是 3n + 1 的元素

應用例子

選取下列元素,改變其背景色為 #0000FF

每個class為one的div父元素下的第2個子元素.
每個class為one的div父元素下的第一個子元素
每個class為one的div父元素下的最后一個子元素
如果class為one的div父元素下的僅僅只有一個子元素，那么選中這個子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素過濾選擇器示例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 70px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="https://www.cnblogs.com/liyuelian/p/script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 選取下列元素,改變其背景色為 #0000FF
            // 1. 每個class為one的div父元素下的第2個子元素.
            $("#b1").click(function () {
                //div .one 應該理解成層級關系，類似ul li
                $("div .one:nth-child(2)").css("background", "#0000FF")
            })
            // 2. 每個class為one的div父元素下的第一個子元素
            $("#b2").click(function () {
                $("div .one:first-child").css("background", "#0000FF")
            })
            // 3. 每個class為one的div父元素下的最后一個子元素
            $("#b3").click(function () {
                $("div .one:last-child").css("background", "#0000FF")
            })
            // 4. 如果class為one的div父元素下的僅僅只有一個子元素，那么選中這個子元素
            $("#b4").click(function () {
                $("div .one:only-child").css("background", "#0000FF")
            })
        })
    </script>
</head>
<body>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/每個class為 one 的 div父元素下的第 2 個子元素" id="b1"/><br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/每個class為 one 的 div父元素下的第一個子元素" id="b2"/><br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/每個class為 one 的 div父元素下的最后一個子元素" id="b3"/><br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/如果class為 one 的 div父元素下的僅僅只有一個子元素，那么選中這個子元素" id="b4"/><br/><br/>
<div >
    <div id="one" >
        XXXXXXXXX id=one
    </div>
    <div id="two" >
        XXXXXXXXX id=two
    </div>
    <div id="three" >
        XXXXXXXXX id=three
    </div>
    <div id="four" >
        XXXXXXXXX id=four
    </div>
</div>
<div >
    <div id="five" >
        XXXXXXXXX id=five
    </div>
</div>
</body>
</html>

4.3.6表單屬性過濾選擇器

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

:enabled用法：$("input:enabled")回傳值：集合元素

說明：匹配所有可用元素，意思是查找所有input中不帶有disabled=“disabled”的input
:disabled用法：$("input:disabled")回傳值：集合元素

說明：匹配所有不可用元素
:checked用法：$("input:checked")回傳值：集合元素

說明：匹配所有選中的被選中元素(復選框，單選框等，不包括select中的option)
:selected用法：$("select option:selected")回傳值：集合元素

說明：匹配所有選中的option元素

應用實體

利用 jQuery 物件的 val() 方法改變表單內可用 < input> 元素的值
利用 jQuery 物件的 val() 方法改變表單內不可用 < input> 元素的值
利用 jQuery 物件的 length 屬性獲取多選框選中的個數
利用 jQuery 物件的 text() 方法獲取下拉框選中的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單物件屬性過濾選擇器</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="https://www.cnblogs.com/liyuelian/p/script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1. 利用jQuery 物件的val() 方法改變表單內 type=text 可用<input> 元素的值
            $("#b1").click(function () {
                //jquery物件.val()表示回傳value
                //jquery物件.val("值")表示給該物件設定值
                $("input[type='text']:enabled").val("臺球")
            })
            // 2. 利用 jQuery 物件的 val() 方法改變表單內不可用 < input> 元素的值
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("足球")
            })
            // 3. 利用 jQuery 物件的 length 屬性獲取多選框/復選框 選中的個數
            $("#b3").click(function () {
                alert("復選框選中個數= " + $("input[type='checkbox']:checked").length)
            })
            // 4. 利用 jQuery 物件的 text() 方法獲取下拉框選中的內容
            $("#b4").click(function () {
                //如果我們希望選擇指定的select，可以加入屬性過濾選擇器
                //如：$("select[屬性=‘值’] option:selected")
                var $selects = $("select option:selected");
                $selects.each(function () {
                    alert("你選擇了= " + $(this).text())
                })
            })
        })
    </script>
</head>
<body>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/利用jQuery 物件的val() 方法改變表單內 type=text 可用 元素的值" id="b1"/><br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/利用jQuery 物件的val() 方法改變表單內 type=text 不可用 元素的值" id="b2"/><br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/利用jQuery 物件的length 屬性獲取多選框選中的個數" id="b3"/><br/><br/>
<input type="button" value="https://www.cnblogs.com/liyuelian/p/利用jQuery 物件的text() 方法獲取下拉框選中的內容" id="b4"/><br/><br/>
<br>
<input type="text" value="https://www.cnblogs.com/liyuelian/p/籃球 1"/>
<input type="text" value="https://www.cnblogs.com/liyuelian/p/籃球 2"/>
<input type="text" value="https://www.cnblogs.com/liyuelian/p/籃球 3" disabled="true"/>
<input type="text" value="https://www.cnblogs.com/liyuelian/p/籃球 4" disabled="true"/>
<br>
<h1>選擇你的愛好</h1>
<input type="checkbox" value="https://www.cnblogs.com/liyuelian/p/愛好 1"/>愛好 1
<input type="checkbox" value="https://www.cnblogs.com/liyuelian/p/愛好 2"/>愛好 2
<input type="checkbox" value="https://www.cnblogs.com/liyuelian/p/愛好 3"/>愛好 3
<input type="checkbox" value="https://www.cnblogs.com/liyuelian/p/愛好 4"/>愛好 4
<br>
<h1>選項如下:</h1>
<select name="job" size=9 multiple="multiple">
    <option value="https://www.cnblogs.com/liyuelian/p/選項 1">選項 1</option>
    <option value="https://www.cnblogs.com/liyuelian/p/選項 2">選項 2</option>
    <option value="https://www.cnblogs.com/liyuelian/p/選項 3">選項 3</option>
    <option value="https://www.cnblogs.com/liyuelian/p/選項 4">選項 4</option>
    <option value="https://www.cnblogs.com/liyuelian/p/選項 5">選項 5</option>
    <option value="https://www.cnblogs.com/liyuelian/p/選項 6">選項 6</option>
</select>
<select id="lili" name="edu">
    <option value="https://www.cnblogs.com/liyuelian/p/博士">博士</option>
    <option value="https://www.cnblogs.com/liyuelian/p/碩士">碩士</option>
    <option value="https://www.cnblogs.com/liyuelian/p/本科">本科</option>
    <option value="https://www.cnblogs.com/liyuelian/p/小學">小學</option>
</select>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539062.html

標籤：jQuery

上一篇：大前端html基礎學習03-定位錨點透明

下一篇：除了 filter 還有什么置灰網站的方式？

day29-JQuery02

JQuery02

4.jQuery選擇器02

4.3過濾選擇器

4.3.1基礎過濾選擇器

4.3.2內容過濾選擇器

4.3.3可見性過濾選擇器

4.3.4屬性過濾選擇器

4.3.5子元素過濾選擇器

4.3.6表單屬性過濾選擇器