jquery知识整理(一)---jquery基本选择器和后代选择器

 <p id="p1">昔我往矣</p>
    <p class="p2"></p>
    <p class="p2">今我来思</p>
    <p id="p2">雨雪霏霏</p>

一.基本选择器

1.Id选择器

语法:$("#id")

注意:(1)不要忘了写#
(2)id 选择器 id唯一的,返回的是单个节点,标签选择器 / 类选择器,返回的是数组

 $("#p1").css("background-color","blue");

2.标签选择器

语法:$(“tag”)

$('p').css("background-color","blue");

3.类选择器

语法:$(".class")

 $('.p2').css("background-color","green");

4.并集选择器

例:拿到所有 p标签下面 ,有p2 的标签

$('p.p2').css("background-color","green")

二.层级选择器

   
    <div id="div1">
        <p id="p1">
            <span>我是孙子标签 sapn</span>
        </p>

        <div id="div2">我是儿子div标签 </div>

         <span id="p2">儿子span标签 hello span1 </span> <br>   
         <span>儿子span标签 hello span2 </span> <br>
         <span>儿子span标签 hello span3 </span> <br>
    </div>

1.后代选择器

语法:$(父代子代)例如:$( div span),div下面的 span 都能获取到(不论 儿子还是孙子都可以拿到 )

$("div span").css("background-color","red");

2. 子代选择器

语法:父代>子代
例如:div > span div 下面的 span 是儿子才可以拿到

$("div > span").css("background-color","yellow");

3. 拿同级

语法:prev + next 拿到第一个兄弟

/$("#div2 + span").css("background-color","blue");

4.拿到后面所有兄弟

语法: prev ~ next

 $("#p1 ~ span").css("background-color","red");