jqery选择器

根据可见性属性匹配元素

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery</title>

<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

$(function(){

    //选择器 内容

    $('ul li:contains(1)').css('color','red');//选中内容中含有1的元素

    $('ul li:empty').css('color','red');//选中空元素

    $('div:has(p)').css('color','red');//选中有指定子元素的元素

    $('ul li:parent').css('color','green');//匹配含有元素或文本的元素，与empty相反

    //可见性

    $('ul li:hidden');//匹配所有不可见元素

    $('ul li:visible');//匹配所有可见元素

    $('ul li[id]').css('color','yellow');//含有id属性的元素

    $('ul li[id="one"]');//匹配id是one的元素

    $('ul li[id!="one"]');//匹配id不是one的li元素

    $('ul li[id^="on"]');//匹配id以on开头的li元素one符合要求

    $('li[id$="ne"]');//匹配id以ne结尾的li元素

    $('li[id*="n"]');//匹配id包含n的li元素

    //以上功能可以重复写多个

})

</script>

</head>

<body>

<ul>

    <li>1</li>

    <li id="one">2</li>

    <li>3</li>

    <li>4</li>

    <li></li>

</ul>

<div>

    <p>我是div里的p标签</p>

</div>

<div>

    我是div标签

</div>

</body>

</html>

aaarticlea/png;base64,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" alt="" />