JQuery学习之路（样式篇_选择器）

（一）jQuery选择器之id选择器: $(“#id” )

    <script type="text/javascript">
       //通过原生方法处理
        var div = document.getElementById('ccg');
        div.style.border = "3px solid blue";
    </script>

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

（二）jQuery选择器之类选择器： $( “.class” )
$(“.ccg”).css()方法内部带了一个隐式的循环处理，所以使用jQuery选择节点，不仅仅只是选择上的简单，同时还增加很多关联的便利操作

   <script type="text/javascript">
        //通过原生方法处理
        //样式是可以多选的，所以得到的是一个合集
        //需要通过循环给合集中每一个元素修改样式
        var divs = document.getElementsByClassName('ccg');
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.border = "3px solid blue";
        }
    </script>

    <script type="text/javascript">
        //通过jQuery直接传入class
        //class选择器可以选择多个元素
        $('.ccg').css("border", "3px solid red");
    </script>

（三）jQuery选择器之元素选择器： $( “element” )

  <script type="text/javascript">
    //通过原生方法处理
    //获取到所有的节点标记名为div的元素
    //给每一个div加上蓝色的边框
    var divs = document.getElementsByTagName('p');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.border = "3px solid blue";
    }
  </script>
  <script type="text/javascript">
    //通过jQuery直接传入标签名p
    //标签是可以多个的，所以得到的同样也是一个合集
    $('p').css("border", "3px solid red");
  </script>

（四）jQuery选择器之全选择器（* 选择器）：$( ” * ” )

|（五）jQuery选择器之层级选择器

（六）注意使用原生JS的浏览器兼容性：id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题，我这里顺便提及一下，比如:
①IE会将注释节点实现为元素，所以在IE中调getElementsByTagName里面会包含注释节点，这个通常是不应该的
②getElementById的参数在IE8及较低的版本不区分大小写
③IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A
④IE8及较低的版本，浏览器不支持getElementsByClassName