02-jquery 选择器

jquery用法思想1：
选择某个网页元素，然后对他进行某种操作

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

 

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

 

$('#myId') //选择id为myId的网页元素
$('.myClass') //选择class为myClass的元素
$('li') //选择所有li元素
$('#uli li span')。 //选择id为ul1元素下的所有li下的span元素
$('input[name=first]') //选择name属性等于first的input元素

 

对选择集进行过滤：
$('div').has('p'); //选择包含P元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(5); //选择第六个div元素

选择集跳转：

$('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevAll(); //选择div元素之前所有的同辈元素
$('div').next(); //选择div元素后面紧挨着的同辈元素
$('div').nextAll(); //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素，除了当前元素之外的其它同级元素，见选显卡示例
$('div').find('.myClass'); //选择div内class等于myClass的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器过滤</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            
            var $div = $("div");
            $div.css({'background-color':'gold'});

            //如果只用一次的话，可以不保存变量：
            $('div').css({'background-color':'pink'});

            $('div').has('p').css({'font-size':'30px'});

            $('div').eq(4).css({'text-indent':'20px'}); 

            $('div').eq(4).prev().css({'color':'red'}); 

            $('div').find('.tip').css({'fontSize':'30px'}) 
            $('.tip').css({'font-size':'30px'})
        })

    </script>
</head>
<body>
    <div>1</div>
    <div><p>2</p></div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div><span>8</span><span class="tip">9</span></div>
</body>
</html>

 

 

posted @ 2019-03-22 01:02  greenfan  阅读(91)  评论(0)    收藏  举报