penapis elemen kanak-kanak jQuery

< /tr>< td width="193" valign="top" style="word-break: break-all;">:anak terakhir

Nama

Penerangan

Contoh

:nth-child(index/even/odd/equation)

名称	说明	举例
:nth-child(index/even/odd/equation)	匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)	在每个 ul 查找第 2 个li: $("ul li:nth-child(2)")
:first-child	匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素	在每个 ul 中查找第一个 li: $("ul li:first-child")
:last-child	匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素	在每个 ul 中查找最后一个 li: $("ul li:last-child")
:only-child	如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配。	在 ul 中查找是唯一子元素的 li: $("ul li:only-child")

Padankan elemen induknya Anak ke-N atau elemen ganjil-genap di bawah <🎜><🎜>':eq(index)' hanya sepadan dengan satu elemen dan ini akan sepadan dengan elemen anak untuk setiap elemen induk. :nth-child bermula dari 1, dan :eq() bermula dari 0! <🎜><🎜>Boleh digunakan: <🎜>anak ke-nth(genap) <🎜>:anak ke-nth(ganjil) <🎜>:anak-ke-ke-3(3n) <🎜>:anak-ke-2(2) < 🎜 >:nth-child(3n+1) <🎜>:nth-child(3n+2)<🎜>

Cari li ke-2 dalam setiap ul: <🎜>$("ul li:nth-child(2)")

:first-child

< 🎜>Padankan elemen anak pertama<🎜><🎜>':first' hanya sepadan dengan satu elemen dan pemilih ini akan memadankan satu elemen anak untuk setiap elemen induk<🎜>

Cari li pertama dalam setiap ul: <🎜>$("ul li:first-child")

<🎜>padanan dengan elemen anak terakhir<🎜><🎜>':last' hanya sepadan dengan satu elemen dan pemilih ini akan memadankan satu anak untuk setiap elemen induk Elemen <🎜><🎜><🎜 ><🎜>

Cari yang terakhir dalam setiap ul li: <🎜>$("ul li :last-child")

:anak-sahaja

<🎜>Jika elemen ialah satu-satunya elemen anak bagi elemen induk , itu akan dipadankan <🎜><🎜 > Jika elemen induk mengandungi elemen lain, ia tidak akan dipadankan. <🎜><🎜><🎜><🎜>

Cari satu-satunya elemen anak dalam ul li: <🎜>$("ul li:only-child")

Nota:

1 :nth-child(index) bermula dari 1, dan eq(index) bermula dari 0, iaitu $(" ul. li:nth-child(0)").css("color","red") tidak boleh mendapatkan elemen padanan dan hanya boleh bermula dari 1, iaitu $("ul li:nth-child(1) ").css ("warna","merah"), dan eq(0) boleh diperolehi, perkara yang sama adalah untuk mendapatkan elemen anak pertama

:nth-child(even) ialah untuk mendapatkan nombor genap elemen anak , Iaitu, kedua, keempat, keenam..., dan :even bermula dari indeks 0, sepadan dengan indeks kedua, indeks keempat..., iaitu, pertama, ketiga, Kelima..., ia Nampaknya mereka semua mendapat bilangan item yang ganjil, perkara yang sama berlaku untuk :nth-child (ganjil) dan :odd

2 :first-child sepadan dengan elemen anak setiap kelas induk , dan :first sepadan dengan elemen anak, dan perkara yang sama berlaku untuk :last-child dan last

3. only-child: memadankan elemen yang merupakan satu-satunya elemen anak dalam elemen induk, iaitu elemen anak semasa ialah Satu-satunya elemen dalam kelas sepadan!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        jQuery(function($){
            //  $("ul li:first-child").css("color","red");
            $("ul li:first").css("color","red");
            // $("ul li:last-child").css("color","red");
            // $("ul li:nth-child(even)").css("color","red");
            // $("ul li:odd").css("color","red");
        })
    </script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <ul>
            <li>第一个元素</li>
            <li>第二个元素</li>
            <li>第三个元素</li>
            <li>第四个元素</li>
            <li>第五个元素</li>
            <li>第六个元素</li>
        </ul>
        <ul>
            <li>第一个元素</li>
            <li>第二个元素</li>
            <li>第三个元素</li>
            <li>第四个元素</li>
            <li>第五个元素</li>
            <li>第六个元素</li>
        </ul>
    </div>
</form>
</body>
</html>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <script> $(function(){ // 1选取父元素下索引值是偶数的子元素的索引值(索引值从1开始的) //找到当前元素的父元素，在找他下面的子元素 $("span.child:nth-child(even)").css("fontSize","30px"); //2选取父元素下,索引值是奇数的元素(索引值从1开始) $("span.child:nth-child(odd)").css("color","red"); //3匹配每个父元素下，索引值为xx的子元素,索引从1开始 $("span.child:nth-child(1)").css("color","blue"); //4匹配每个父元素的第一个子元素 $("span.child:first-child").css("fontSize","50px"); //5匹配每个父元素的第一个子元素 $("span.child:last-child").css("fontSize","50px"); }) </script> <body> <div class="parent"> <span class="child">1</span> <span class="child">2</span> <span class="child">3</span> <span class="child">4</span> <span class="child">5</span> </div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik