abstract:<div class="box"> <p>1</p> <p>1</p> <p id="num">1</p> &n
<div class="box"> <p>1</p> <p>1</p> <p id="num">1</p> <div><p>2</p></div> <p><span>11</span></p> <p>temp</p> <div></div> <div><b></b></div> <button id="btn">點(diǎn)擊 </button> </div> <script> //父級(jí)元素下匹配所有子元素 $('父級(jí)元素 > 子級(jí)元素') //$('.box > p').css('color','red'); //祖先元素下匹配所有后代元素 $('祖先元素 > 后代元素') //$('.box p').css('fontSize','26px'); //匹配緊跟在p元素后面的next元素 $('p + next')兩個(gè)必須是同級(jí)元素 //$('p+input').css('background','red'); //匹配p元素后面所有siblings同級(jí)元素 $('p ~ input') //$('p~input').css('background','blue'); //prev() 匹配同級(jí)元素緊鄰的前面的元素 //$('#num').prev(); // :first 匹配第一個(gè)元素 //$('.box p:first').css('color','green'); // :last 匹配最后一個(gè)元素 //$('.box p:last').css({'color':'orange','fontSize':'50px'}); //比較 //$('p:gt(1)').css('color','green'); //匹配大于x的元素,從0開始 //$('p:lt(1)').css('color','green'); //匹配小于x的元素,從0開始 //$('p:eq(1)').css('color','green'); //匹配等于x的元素,從0開始 //奇偶數(shù) //$('p:odd').css('color','red'); //匹配奇數(shù)行的元素,從0開始 //$('p:even').css('color','red'); //匹配偶數(shù)行的元素,從0開始 //非 //$('p:not(#num)').css('background','red'); //匹配除了id為num的所有p標(biāo)簽 //內(nèi)容選擇器 //$('p:contains(temp)').css('background','pink'); //匹配包含指定文本的元素 //$('p:has(span)').css('color','green'); //匹配包含特定選擇器的元素 //$('div:empty').css('background','red');//匹配不含有內(nèi)容的空元素,什么都沒有 //$('div:parent').css('background','green'); //匹配含有了元素或者文本的元素 和:empty相反 //表單選擇器 // 語法: // $(':enabled')所有激活的input元素(可以使用的input元素) // $(':disabled')所有禁用的input元素(不可以使用的input元素) // $(':selected')所有被選取的元素,針對(duì)于select元素 // $(':checked')所有被選中的input元素 </script>
Correcting teacher:天蓬老師Correction time:2019-04-22 13:53:48
Teacher's summary:jQuery選擇器, 是很多人選擇jQuery的重要原因, 因?yàn)橛盟x擇元素真的好簡單