jQuery过滤

最新推荐文章于 2024-09-09 23:21:46 发布

原创最新推荐文章于 2024-09-09 23:21:46 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文介绍了jQuery中各种选择器的使用方法，包括基本的选择、过滤、筛选等操作，并通过实例展示了如何高效地操作DOM元素。

部署运行你感兴趣的模型镜像

<head>
    <meta charset="UTF-8">
    <title>过滤</title>
</head>
<body>
<ul>
    <li>烟台大学1</li>
    <li>烟台大学2</li>
    <li>烟台大学3</li>
    <li class="li4">烟台大学4</li>
</ul>

<div><ol><li>Hello</li></ol></div>
<div>How are you?</div>

<input type="checkbox" />
<form><input type="checkbox" /></form>
</body>
<script src="../jquery-3.1.1.js"></script>
<script>
    /*返回索引为1的元素*/
    console.log($("li").eq(1).html());
    /*返回第一个元素*/
    console.log($("li").first().html());
    /*返回最后一个元素*/
    console.log($("li").last().html());
    /*返回包含li4这个类的元素*/
    console.log($("li").hasClass("li4"));
    /*过滤器：返回满足过滤条件的所有元素   过滤条件可以为多个*/
    console.log($("li").filter(":first,.li4"));
    /*$(select,document):
    * 参数1：用来指定选择器
    * 参数2：用来指定查找范围  默认是整个文档document*/
    var result = $("div").filter(function(index) {
        return $("ol", this).length == 0;
    });
    console.log(result);

    /*is():如果结果中有一个元素符合条件，则返回true*/
    console.log($("input[type='checkbox']").parent().is("form"));

</script>

<head>
    <meta charset="UTF-8">
    <title>过滤</title>
</head>
<body>
<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>

<p>Hello</p>
<p id="selected">Hello Again</p>

</body>
<script src="../jquery-3.1.1.js"></script>
<script>
    var result = $("input").map(function () {
        return $(this).val();
    });
    /*伪数组：拥有数组的索引和length等。外观和数组类似。
     * 但是不能使用数组的相关方法*/
    //    console.log(result.get().join("--"));


    $('li').has('ul').css('background-color', 'red');


    console.log($("p").not($("#selected")));


    var arr = ["ccy", "jereh", "jredu"];
    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    for (item in arr) {
        console.log(arr[item]);
    }
</script>

<head>
    <meta charset="UTF-8">
    <title>slice</title>
</head>
<body>
<ul>
    <li>烟台大学1</li>
    <li>烟台大学2</li>
    <li>烟台大学3</li>
    <li>烟台大学4</li>
    <li>烟台大学5</li>
</ul>
</body>
<script src="../jquery-3.1.1.js"></script>
<script>
//    $("li:lt(3)").css("color","blue");

//    $("li:gt(2)").css("color","blue");

//    $("li:not(:last,:first)").css("color","blue");

    $("li").slice(-4,-2).css("color","blue");

    /*slice()
    * 参数1：开始索引（包含）
    * 参数2：结束索引（不包含）
    * 如果两个参数同时存在，必须保证参数2大于参数1
    *
    * 特殊情况:
    * 1:只有参数1，并且是正数，选取从参数1开始，一直到最后一个
    * 1:只有参数1，并且是负数，选取从倒数参数值开始，一直到最后一个*/
</script>