jQuery选择器

发布时间：2020-05-19 12:52:37 作者：bigbeatwu
来源：网络阅读：196

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事件**

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>button</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$(function(){
    var $bTn = $('#btn');
    $bTn.click(function(){
        /*if($('.box').hasClass('btn')){
            $('.box').removeClass('btn');
        }
        else{
            $('.box').addClass('btn')
        }*/
        /*简写方式*/
        $('.box').toggleClass('btn');
    })
})
</script>

<style type="text/css">

.box{
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
}
.btn{
    width: 100px;
    height: 100px;
    background-color: aqua;
}
</style>

</head>
<body>

<input type="button" name="" value="切换" id="btn">
<div class="box">123</div>

</body>
</html>

jQuery选择器

5.索引值-选项卡

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

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

例子：选项卡

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$(function(){
    var $btn = $('.btns input');
    var $div = $('.cons div');

    /*alert($div.length),判断是否获取*/

    $btn.click(function(){
        /*移出除当前的类，siblings选择同辈元素*/
        $(this).addClass('current').siblings().removeClass('current');
        /*index（）显示索引*/
        $div.eq($(this).index()).addClass('div1').siblings().removeClass('div1');
    })
})
</script>

<style type="text/css">

.btns input{
    width: 100px;
    height: 40px;
    background-color: antiquewhite;
    border: 0;/*给宽高会有边框*/
}
.btns .current{
    background-color: aqua;
}
.cons div{
    width: 500px;
    height: 200px;
    background-color: aquamarine;
    display: none;
    line-height: 200px;
    text-align: center;
    font-size: 30px;
}
.cons .div1{
    display: block;
}
</style>

</head>

<body>

<div class="btns">
    <input type="button" name="" value="01" class="current">
    <input type="button" name="" value="02">
    <input type="button" name="" value="03">
</div>

<div class="cons">
    <div class="div1">选项卡1</div>
    <div>选项卡2</div>
    <div>选项卡3</div>
</div>

</body>
</html>

jQuery选择器

jQuery选择器

相关阅读