JQuery的筛选常用函数

eq,获取第N个元素

first, 获取第一个元素

last,获取最后一个元素

hasClass,获取有指定类选择器的元素

filter,筛选出与指定表达式匹配的元素

parent,获取一个包含所有匹配的元素的唯一父元素的集合

is, 检测匹配的元素，如果其中至少有一个元素符合给定的表达式就返回true

map, 将一组元素转换成数组

has，从一个集合中选取满足has 条件的子集元素

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.11.1.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>========jQuery 的筛选操作=========</p>


<p> This is just a test.</p>
<p> So is this</p>

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

<div class="protected">this is div1 class="protected"</div>
<div>this is div2</div>

<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>

<div>this is outer div
    <div>this is inner div
        <p class="testp">Hello111</p>
        <p>Hello222</p>
    </div>
</div>

<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>


<form><input type="checkbox"/></form>

<ul>
    <li><strong>list</strong> item 1 - one strong tag</li>
    <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li>
    <li>list item 3</li>
</ul>

<p class="testpp"><b>Values: </b></p>
<form>
    <input type="text" name="name" value="John"/>
    <input type="text" name="password" value="password"/>
    <input type="text" name="url" value="http://ejohn.org/"/>
</form>


<ul>
    <li>list item 1</li>
    <li>list item 2
        <ul>
            <li>list item 2-a</li>
            <li>list item 2-b</li>
        </ul>
    </li>
    <li>list item 3</li>
    <li>list item 4</li>
</ul>


</body>
</html>

<script>
    $(function () {

        //eq
        //$("p").eq(1).css("color", "red");
        //$("p").eq(-1).css("color", "red");

        //first
        // $('li').first().css("color", "red");


        //last
        //$('li').last().css("color", "red");


        //hasClass
        // $("div").click(function () {
        //     if ($(this).hasClass("protected")) {
        //         $(this).css("color", "red");
        //     }
        // });

        //filter
        //$("p").filter(".selected, :first").css("color", "red");

        //parent
        //$("p.testp").parent().css("color", "red");
        // $("p").parent(".selected").css("color", "red");


        //is 返回一个boolean
        //alert($("input[type='checkbox']").parent().is("form"));

        /**
         * 判断点击li标签增加背景色为红色，如果点击的是第2个strong,当前的li增加背景色为绿色，
         */
        // $("li").click(function () {
        //     var $li = $(this);
        //     var isTwoStrong  = $li.is(function () {
        //         return $("strong", this).length === 2;//当前点击的是strong的标签的个数为2的li
        //     })
        //     if(isTwoStrong){
        //         $li.css("color", "red");
        //     }else{
        //         $li.css("color", "blue");
        //     }
        //
        // })

        //map
        // $("p.testpp").append($("input:text").map(function () {
        //     return $(this).val();
        // }).get().join(", "))


        //has 给含有ul的li加上背景色
        // $('li').has('ul').css('color', 'red');

    });

</script>

jQuery 的筛选操作1

JQuery的筛选常用函数

猜你喜欢