jquery学习（2）--选择器

jquery-李炎恢学习视频学习笔记。自己手写。

简单的选择器
    css 写 法： #box{ color:#f00;}    //id选择器
    jquery获取：$('#box').css('color','#f00');//获取DOM对象，并添加行为，id是唯一的，返回单个元素生效

css 写 法： .box{ color:#f00;}    //class选择器
    jquery获取：$('.box').css('color','#f00');//获取DOM对象，并添加行为，返回多个元素生效

css 写 法： div{ color:#f00;}    //标签选择器
    jquery获取：$('div').css('color','#f00');//获取DOM对象，并添加行为，返回多个元素生效

$(function(){
    $('#box').css('color','blue');//添加行为（行为中包括样式）
    $('div').css('color','#f00');
    $('.box').css('color','#f00');

//alert($('#box').size());
    //alert($('.pox').size());
    alert($('div').size());    //用get 0 1 2获取对应的第几个

//很多情况下有动态DOM生成的问题，会导致执行不存在的id选择器

if($('#pox').size()>0){
        $('#pox').css('color','red');
    }

$('div').get(1).css('color','#000');//用get(1)获取第二个div，改变字体颜色为#000。-get原生
    $('div').get(1).css('color','#000');//用eq(1)获取第二个div，改变字体颜色为#000。-
    alert($('div').length);    //属性不用加()

$('#box > p ').css('color','blue');//jquery兼容ie6
    $('#pox').css('color','blue');
   
})

$(function(){
//原生js：
    if(document.getElementById('pox')){    //判断是否存在--防止动态DOM生成问题导的ID不存在问题
        document.getElementById('pox').style.color='blue';//
    }

//jquery：--解决了容错的问题
    $('#box').css('color','blue');

})

if($('#pox').get(0)){

}
if(('#pox')[0]){
}

常规选择器：
$(function(){
    //群组选择去==》相同的样式进行合并
    span,.pox,#box{color:red;}//--->css代码
    span,p,#box{color:blue;}//--->css代码
    $('#div,p,span').css('color','blue');
    $('#box,.pox,span').css('color','red');
    
    //后代选择器
    ul li a{color:red;}//css代码
    $('ul li a').css('color','red');

//通配符选择器
    *{color：#ccc;}
    $('*').css('color','#ccc');

/*注意：在全局范围使用*（通配符），会极大地消耗资源，不建议在全局使用*/

<li>11111</li>
    <li>22222</li>
    <li><em>123333</em></li>

$('ul li a,ul li em').css('color','blue');
    $('ul li *').css('color','blue');
    alert($('ul li *').size());//通配符选择器一般用在局的环境内

//在id和class中指定元素前缀
    $('div.box');        //限定是.box元素获取的必须是是div
    $('p#box div.side');    //同上

//class有一个特殊的模式，就是同一个dom节点可以声明多个class类，对于这种格式，有多个class选择器可以使用，但要注意和class群组选择器的区别。、

.box,.pox{color：red;}//群组选择器
    .box.pox{color：red;}//双class选择器，ie6会出异常
    $('.box.pox').css('color','red');

$('div#box p ul li a#link');//写法无错，选择器越复杂，那么字符串解析就越慢-->jquery的选择器从右边往左一层层的解析
$('#link');//单个id，不需要字符型的解析就可以获取到。--》id一个页面只有一个。这个速度是最快的。
})

/*注意：构造选择器时，有一个通用的优化原则：只追求必要的确定性，选择器筛选越复杂，jquery内部的选择器引擎处理字符串的时间就越长*/