6.20 jquery基礎選擇器

阿新 • • 發佈：2018-06-20

sele 條件 edge 按鈕 In jquer last res ctype

===============基本選擇器=================
1.獲取唯一id:$("#")
$("#myid").css("color","blue");
2.獲取所有class:$(".")
$(".class").css("color","yellow");
3.獲取所有元素:$("*")
$("*").css("color","green");
4.獲取所有標簽:$("標簽")
$("p").css("color","red");
5.獲取同時滿足兩個選擇器的元素:$("選擇器1選擇器2")
$("#id,.class").css("color","orange");
===============層疊選擇器==================
1.父元素中包含的所有元素:($"選擇器1 選擇器2")
$("#second .second").css("color","red");
2.父元素的子元素:($"選擇器1>選擇器2")
$("#second>div").css("color","grey");
3.相鄰的下一個兄弟元素:$("選擇器1+選擇器2")
$("h2+h3").css("color","orange");
4.後面的所有兄弟元素
$("#as1~div").css("color","orange");
================方法選擇器==================
1.符合條件的第一個元素
$(".first:first").css("color","yellow");
2.符合條件的最後一個元素
$(".first:last").css("color","red");
3.符合條件的索引為偶數的元素
$(".first:even").css("color","red");
4.符合條件的索引為奇數的元素
$(".first:odd").css("color","green");
5.符合條件的索引值元素
$(".first:eq(0)").css("color","greenyellow");
6.符合條件的大於索引值的元素
$(".first:gt(0)").css("color","blue");
7.符合條件的小於索引值的元素
$(".first:lt(1)").css("color","green");
8.獲取滿足第一個條件且不滿(滿足)足第二個條件(empty、checked...)的元素:$("選擇器:條件")
$("div:not(empty)").css("background","yellow");
$("div:empty").css("background","green");
9.所有標題元素
$(":header").css("background","green");
10.所有動畫元素
$(":animated").css("background","green");
11.包含指定字符串的所有元素
$("div:contains(‘child‘)").css("width","500px");
12.所有帶有匹配選擇的元素
$("h5,.child_child,#myid").css("background","green");
================屬性選擇器==================
1.屬性等於屬性值的元素
$("[href=‘#‘]");
2.屬性不等於屬性值的元素
$("[href!=‘#‘]");
3.屬性以屬性值結尾的元素
$("[href$=‘.jpg‘]");
4.帶有某屬性的元素
$("[href]");
================表單選擇器==================
1.所有input元素
$(":input");
2.通過input的類型選則元素
$(":text");文字框
$(":password");密碼框
$(":radio");單選框
$(":checkbox");復選框
$(":submit");提交按鈕
$(":buttom");普通按鈕
$(":reset");重置按鈕
$(":image");圖片按鈕
$(":file");上傳文件
3.通過input的狀態選則元素
$(":endabled");所有激活的input元素
$(":disable");所有禁用的input元素
$(":selecte");所有被選取的input元素
$(":checked");所有被選中的input元素

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../public/bootstrap.min.css"/>
    <script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../public/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <p id="one">德國</p>
    <p class 
="first">巴西</p>
    <p class="first">葡萄牙</p>
    <p class="first">法國</p>
    <p class="first">西班牙</p>
    <div id="second">
        <div id="secondl">
            你好
        </div>
        <p class="second">葡萄牙</p>
        <p class 
="second">法國</p>
        <p class="second">西班牙</p>
    </div>
    <div id="third">
        <h1>巴西</h1>
        <h2>印度</h2>
        <h3>中國</h3>
    </div>
    <div id="forth">
        <div id="as1">巴西</div>
        <div id="as2">巴拿馬</div>
        <div id="as3">巴比倫</div>
    </div>
    
</body>
</html>
<script type="text/javascript">
    //$("#one").css("color","blue");
    //$(".first").css("color","yellow");
    //$("*").css("color","green");
    //$("p").css("color","red");
    //$("#one,.first").css("color","orange");
    //$("#second p").css("color","red");
    //$("#second>div").css("c","grey");
    //$("h2+h3").css("color","orange");
    //$("#as1~div").css("color","orange");
     // $(".first:first").css("color","yellow");
    //  $(".first:last").css("color","red");
     // $(".first:even").css("color","red");
     // $(".first:odd").css("color","green");
     /*$(".first:eq(0)").css("color","greenyellow");
     $(".first:gt(0)").css("color","blue");
     $(".first:lt(1)").css("color","green");*/
     //$(".first:not(empty)").css("color","green");
     //$(".first:empty").css("color","yellow");
</script>

6.20 jquery基礎選擇器

sele 條件 edge 按鈕 In jquer last res ctype ===============基本選擇器================= 1.獲取唯一id:$("#") $("#myid").css("color","blue"); 2.

6.20 jquery基礎選擇器

6.20 jquery基礎選擇器

淺談jQuery基礎選擇器的簡單使用(1)

jQuery基礎 | 選擇器

jQuery基礎選擇器

jQuery的簡單介紹、jQuery基礎選擇器、jQuery的簡單過濾器的介紹

jquery的基礎知識復習(基礎選擇器，屬性選擇器，層級選擇器)

6. jQuery層次選擇器

jQuery-過濾選擇器二

jQuery常用選擇器總結

關於JQuery Class選擇器的一點

jquery城市選擇器

jQuery的選擇器中的通配符[id^='code']

jquery基本選擇器

jquery過濾選擇器-----------（表單對象屬性過濾選擇器與表單選擇器）

jQuery name選擇器帶正則寫法示例

jQuery層次選擇器

css基礎選擇器

jquery之選擇器

jquery 常用選擇器回顧 ajax() parent() parents() children() siblings() find() eq()

JQuery :eq() 選擇器與 eq()遍歷方法

6.20 jquery基礎 選擇器

相關推薦

6.20 jquery基礎選擇器