<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">点击 </button> </div> <script> //父级元素下匹配所有子元素 $('父级元素 > 子级元素') //$('.box > p').css('color','red'); //祖先元素下匹配所有后代元素 $('祖先元素 > 后代元素') //$('.box p').css('fontSize','26px'); //匹配紧跟在p元素后面的next元素 $('p + next')两个必须是同级元素 //$('p+input').css('background','red'); //匹配p元素后面所有siblings同级元素 $('p ~ input') //$('p~input').css('background','blue'); //prev() 匹配同级元素紧邻的前面的元素 //$('#num').prev(); // :first 匹配第一个元素 //$('.box p:first').css('color','green'); // :last 匹配最后一个元素 //$('.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开始 //奇偶数 //$('p:odd').css('color','red'); //匹配奇数行的元素,从0开始 //$('p:even').css('color','red'); //匹配偶数行的元素,从0开始 //非 //$('p:not(#num)').css('background','red'); //匹配除了id为num的所有p标签 //内容选择器 //$('p:contains(temp)').css('background','pink'); //匹配包含指定文本的元素 //$('p:has(span)').css('color','green'); //匹配包含特定选择器的元素 //$('div:empty').css('background','red');//匹配不含有内容的空元素,什么都没有 //$('div:parent').css('background','green'); //匹配含有了元素或者文本的元素 和:empty相反 //表单选择器 // 语法: // $(':enabled')所有激活的input元素(可以使用的input元素) // $(':disabled')所有禁用的input元素(不可以使用的input元素) // $(':selected')所有被选取的元素,针对于select元素 // $(':checked')所有被选中的input元素 </script>