web前端学习之jQuery选择器的记录

1、id选择器-用来查找用来查找的ID，即元素的id属性

$( "#id" )

//div标签 
<div id="aaron">
    	<p>id="aaron"</p>
    	<p>选中</p>
    </div>   

//构建jQuery对象
 <script type="text/javascript">
    	//通过jQuery直接传入id
    	//id的唯一，只选择到了第一个匹配的id为imooc的div节点
        $("#arron").css("border", "3px solid red");
    </script>

2、类选择器  

$( ".class" )

//div标签组
<div class="aaron">
    	<p>class="aaron"</p>
    	<p>选中</p>
    </div>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>

    <div class="pjx">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div class="pjx">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
//获取jQuery对象
<script type="text/javascript">
        //通过jQuery直接传入class
        //class选择器可以选择多个元素
        $(".pjx").css("border", "3px solid red");
    </script>
//此时获取了一个pjx类，里面存在两个对象

3、元素选择器，根据给定（html）标记名称选择所有的元素

$( "element" )

    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="pjx">
        <p>class="pjx"</p>
        <p>jQuery选中</p>
    </div>
    <div class="pjx">
        <p>class="pjx"</p>
        <p>jQuery选中</p>
    </div>  


//$("p")选取所有的<p>元素，通过css方法直接赋予样式
    </script>
    <script type="text/javascript">
    //通过jQuery直接传入标签名p
    //标签是可以多个的，所以得到的同样也是一个合集
    $("p").css("border", "3px solid red");
    </script>