对比选择:

1. CSS依靠CSS选择器使得网页的结构和表现样式完全分离,CSS选择器能轻松定位并修改指定元素样式,CSS选择器包括标签选择器(以文档元素作为选择器),ID选择器(以文档元素的唯一标识ID作为选择器),类选择器(以文档元素的class作为选择器),群组选择器(多个选择器应用同样的样式规则),后代选择器(元素X的任意后代元素Y),通配选择器(以文档的所有元素作为选择器),伪类选择器(以元素特定行为作为选择器),子选择器(元素X的直接子属元素Y),兄弟选择器(元素X的直属兄弟元素Y),属性选择器(以文档元素特定属性为选择器),详情参考(http://www.w3school.com.cn/css/css_selector_type.asp)

2. jQuery选择器完全继承了CSS选择器的风格,CSS选择器能轻松定位并修改指定元素属性和行为,而无需担心浏览器是否支持这一选择器,jQuery的行为规则都必须在获取到元素后才能生效

说明: jQuery不仅可以像原生CSS样修改元素样式,而且还可以修改元素行为,需要注意的是jQuery中涉及操作CSS样式的部分比单纯的CSS功能更为强大,并且拥有跨浏览器的兼容性.


错误处理:

说明: 原生JS如果返回的对象不存在则浏览器会报错,如果加if判断会增加代码量,而jQuery中$('selector')返回的永远是封装后的jQuery对象,因此不能直接if判断,也不需要if判断,如果非要去判断的话可通过判断$('selector').length属性是否大于0或$('selector')[0]转换为DOM对象(其实是调用的$('selector').toArray()转换为DOM对象数组然后再取指定DOM对象的)判断对象是否存在



    
        
        前端开发
    
    
    
    
    
        // 方式一: 通过判断其length属性
        if ($("body").length > 0){
            alert("存在")
        } 
        // 方式二: 转换为DOM对象判断是否存在
        if ($('body')[0]){
            alert("存在")
        }
    


JQ选择器:



    
        
        前端开发
        
            div, span, p {
                width: 200px;
                height: 200px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
            }
            div.mini {
                width: 66px;
                height: 66px;
                background-color: #aaa;
                font-size: 12px;
            }
            div.hide {
                display: none;
            }
        
    
    
        
just for test

        
            id为one,class为one的div
            class为mini的div