jQuery的选择器

#转载请联系

  •  jQuery选择器

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

  • 对选择集进行过滤

$('div').has('p') // 选择包含p元素的div元素
$('div').not('.myClass') //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素

  • 选择集转移

$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
$('#box').next(); //选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
$('#box').parent(); //选择id是box的元素的父元素
$('#box').children(); //选择id是box的元素的所有子元素
$('#box').siblings(); //选择id是box的元素的同级元素
$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素

 注意：选择器获取的多个元素，获取信息获取的是第一个！

例如：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            var list=$('#i li');
            console.log(list.html())
        })
    </script>
</head>
<body>
    <ul id="i">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

终端输出结果：
1

 

posted @ 2018-09-25 21:30  苦瓜爆炒牛肉  阅读(167)  评论(0)  编辑  收藏  举报