2.1jQuery 选择器

1、css选择器与jq选择器

    jq与css选择器非常的相似，这里列出一些常用的css选择器作为参考；

    

选择器	语法	描述	例子
标签选择器	E{ .... }	选择标签	li{ ... }
ID选择器	#ID{ ... }	选择一个id标签	#div1{ ... }
类名选择器	E.className{ ... }	选择类名标签	.list{ ... }
群组选择器	E,E2,E3{ ... }	选择一组标签	a,#div1,.list{ ... }
后代选择器	E F{ ... }	选择E的后代标签	div span{ ... }

通配选择器

*{ ... }

选择所有标签

*{ ... }

   上表就是常见的css选择器了，在此就不详细说明。

    

    1.2 jq选择器的优点：

        1.简写代码

            像原生的 document.getElementById( 'div1' );真是又臭又长，jq只需要 $( '#div1' );就可以完成了，省去撸那么多代码。

        2.解决兼容问题

        例：

            

<span style="font-size:14px;">    <div></div>
    <script>
        document.getElementById('p1').style.color = 'red';
    </script></span>

    正如上面的代码这样，必然报错，因为id为p1的元素并不存在，当然你可以增加判断条件处理。

<span style="font-size:14px;">          if( document.getElementById('p1') ){
            document.getElmentById('p1').style.color = 'red';
        }</span>

    不过这样如果工程项目比较大，判断条件将会变得复杂多变。

    $('#p1').css('background','red');

    而 jq，即使对象不存在也不会报错。有了这个预防措施，即使有天改动了HTML文档也不会导致错误。所以，如果想要用jq检查某个元素是否存在，是不可行的。

<span style="font-size:14px;">    if( $('#p1') ){
        $('#p1').css('background','red');
    }</span>

    jq永远返回的都是一个对象，应该根据获取到的元素长度来判断，代码如下

<span style="font-size:14px;">    if( $('#p1') .length > 0){
        $('#p1').css('background','red');
    }</span>

    或者转化成DOM对象来判断，代码如下：

<span style="font-size:14px;">    if( $('#p1')[0]){
        $('#p1').css('background','red');
    }</span>