jQuery初探 jQuery选取和操纵元素的特点

浏览数：40 / 时间：2015年06月09日

jQuery初探 jQuery选取和操纵元素的特点

JavaScript选取元素

　　先来看看不用jQuery的时候我们是怎么处理元素选取的.　

　　JavaScript选取元素的时候,可以根据id获取元素,当id不存在的时候,结果为null,并且console会报脚本执行错误.

　　所以一般的做法是先用一个if判断该元素存在.

　　比如:

<body>
<a>click me</a>
<script type="text/javascript">


    //        document.getElementById("someId").style.color = "red";//if id does not exist,report error in console.

    if (document.getElementById("hello")) {//ensure it‘s neither null nor undefined.
        document.getElementById("hello").style.color = "red";
    }
</script>

</body>

jQuery选取操纵元素

　　jQuery获取元素用的是$()运算符,比如获取某个id的对象用:$(“#idValue”).

　　不论该id的元素存在与否,都会返回一个jQuery对象(object).

　　这一点和直接用JavaScript获取DOM对象是完全不一样的.

　　一般情况下$()获取的是所有满足条件的元素,即得到的这个jQuery对象有一个属性length,表示元素的个数,可能为0,表示没有获取到元素.比如当要获取的目标id不存在时,该值为0.

　　id选择器是一个比较特殊的选择器,它只获取满足指定id的单个元素.如果id有多个,只返回第一个元素.

　　如果id不存在时,虽然可以获取jQuery对象,但是将jQuery对象转换为DOM对象(用[0]或者get(0)),将会得到一个undifined.

　　之后对这个DOM对象的任何属性操作都会报错,因为undefined不存在任何属性.

//jQuery
alert($("#hello"));//object

//method1: convert jQuery object to DOM object
alert($("#hello")[0]);//undefined
$("#hello")[0].style.color = "red";//report error here!

　　既然转换成DOM元素不太好用,那么我们就放弃转换,直接操纵jQuery元素.

　　比如:

$("#hello").css("color","red");

　　这样,虽然对应id的元素还是不存在,样式修改也没有生效,但是页面不会报任何错误,因为jQuery会将其忽略掉.

　　如果id存在,则该样式会生效.

　　jQuery对象中的大多数方法同时支持读操作和写操作.

　　下面我们给链接加上我们想要的id.

<body>
    <a id="hello">click me</a>
    <script type="text/javascript">
        //jQuery
        alert($("#hello").length);//show DOM elements count.
        $("#hello").css("color","red");//write action
        alert($("#hello").css("color"));//read action
    </script>
</body>