jQuery选择器

1.jQuery用法思想一

选择某个网页元素，然后对它进行某种操作

2.jQuery选择器

（1）可以快速地选择元素，选择规则和css样式相同，使用length属性判断选择是否成功。

$(function(){

    /*选择类*/
    var $div01 = $('.div1');
    $div01.css({'color':'red'});

    /*选择ID*/
    var $div02 = $('#box2');
    $div02.css({'fontSize':'40px'});

    /*选择类下地标签，像css的类，也可以直接写li，表示选择所以li*/
    var $li = $('.list li');
    /*横杆式或者驼峰式都可以*/
    $li.css({'backgroundColor':'green'});

    /*input里name为GOon*/
    var $li01 = $('input[name=GOon]');
    $li01.css({'color':'pink'});
})

（2）对选择集进行过滤

/*选择含有p元素的div过滤*/
    var $div03 = $('.filter div').has('p');
    $div03.css({'backgroundColor':'gold'});

    /*简写方式，适合一次调用，选择除div1类外div元素过滤*/
    $('div').not('.div1').css({'backgroundColor':'gold'});

    /*选择filter类过滤出第五个div*/
    $('.filter div').eq('5').css({'color':'red'});

（3）选择集转移

/prev()第五块的前面一块紧挨着的/
$('.filter div').eq('5').prev().css({'color':'green'});

    /*选择div内，类为nine的块*/
    $('.filter div').find('.nine').css({'color':'red'});

    /*prevAll()选择前面类内所有div*/
    $('.filter div').eq('3').prevAll().css({'color':'red'});

    /*0表示第一块，next表示后面同辈元素，nextAll同上*/
    $('.filter div').eq('0').next().css({'color':'green'});

    /*父级div,children()所有子元素，siblings（）所有同级元素*/
    $('.filter div').eq('5').parent().css({'backgroundColor':'pink'});

（4）判断是否选择到了元素

jQuery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素，length等于0，就是没选择到元素，length大于0，就是选择到了元素。

/>0表示获取元素/
alert($div02.length);

3.jQuery用法思想二

同一个函数完成取值和赋值

（1）操作行间样式
注意：选择器获取的多个元素，获取信息获取的是第一个，比如：$（‘div’）.css('width'),获取的是第一个div的width

（2）操作样式类名

/在原来样式名的基础上加bug/
$div.addClass('bug');
/除去样式名/
/$div.removeClass('bug another');/

    /*重复切换another样式*/
    $div.toggleClass('another')

    **4.绑定click事件**

123

5.索引值-选项卡

获取元素的索引值
有时需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index（）方法获取

$(function(){
var $li = $('.list li');
/index,获取索引值，第一个为0/
alert($li.filter('.mylist').index());
})

例子：选项卡

    
    
    



    
选项卡1
    
选项卡2
    
选项卡3