jQuery基本筛选器-表单筛选器-关系筛选器

最新推荐文章于 2024-10-30 18:24:25 发布

weixin_30895603

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量141

点赞数

文章标签： javascript swift ViewUI

原文链接：http://www.cnblogs.com/weihengblog/p/8885039.html

版权

一、基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

<!DOCTYPE html>
<html>
<head>
    <title>基本筛选器</title>
</head>
<body>
    <ul id="ul1">
        <li>1</li>
        <li>2</li>
        <li id="li3">3</li>
        <li>4</li>
        <li>5</li>

    </ul>

<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    var ulfirst = $("#ul1>li:first");
    // 第一个标签
    console.log(ulfirst);

    //最后一个li标签
    var ullast = $("#ul1>li:last");
    console.log(ullast);

    //eq(index) 索引等于index的那个元素
    var uleq = $("#ul1>li:eq(2)");  // 索引是从0开始的
    console.log(uleq);

    //匹配索引是偶数的元素
    var uleven = $("#ul1>li:even");
    console.log(uleven);
    //匹配索引是奇数的元素
    var ulodd = $("#ul1>li:odd");
    console.log(ulodd);

    //匹配所有大于给定值的元素  
    var ulgt = $("#ul1>li:gt(3)");//不包括3
    console.log(ulgt);
    //匹配所有小于给定值的元素
    var ullt = $("#ul1>li:lt(3)");//不包括3
    console.log(ullt);

    // 移除所有满足not条件的标签
    var ulnot = $("#ul1>li:not(#li3)");
    console.log(ulnot);

    // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
    var ulhas = $("#ul1:has(li)");  //返回包含li标签的ul，本页面就是一个ul
    console.log(ulhas);

</script>
</body>
</html>

基本筛选器demo

二、表单常用筛选器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

<!DOCTYPE html>
<html>
<head>
    <title>表单基本筛选器</title>
</head>
<body>
    <form>
        <input type="radio" name="sex" value="男" checked="checked">男
        <input type="radio" name="sex" value="女">女
        <select>
            <option>1</option>
            <option>2</option>
            <option selected="selected">3</option>
            <option>4</option>
        </select>
        <input type="checkbox" name="" value="" checked="checked" />足球
        <input type="checkbox" name="" value="" />篮球
        <input type="checkbox" name="" value="" />乒乓球
    </form>

<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    // 获取所有checked
    var checkinpu = $("input:checked");
    var selectedinpu = $(":selected");
    console.log(checkinpu);
    console.log(selectedinpu);

    var checkinpu = $(":checked"); //将会把select也命中
    console.log(checkinpu);
</script>
</body>
</html>

表单常用筛选器demo

三、关系筛选器

下一个元素

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找元素

$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

补充：

.first()// 获取匹配的第一个元素
.last()// 获取匹配的最后一个元素
.not()// 从匹配元素的集合中删除与指定表达式匹配的元素
.has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

<!DOCTYPE html>
<html>
<head>
    <title>关系筛选器</title>
</head>
<body>
    <ul id="ul1">
        <li id="li1">1</li>
        <li>2</li>
        <li id="li3">3</li>
        <li>4</li>
        <li id="li5">5</li>
    </ul>

    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        // 下一个元素
        var li3 = $("#li3");
        console.log(li3.next()); // 下一个元素
        console.log(li3.nextAll());//下面所有的元素
        console.log(li3.nextUntil("#li5"))//下面所有的元素直到xx停止,只有一个<li>4</li>
        //上一个元素
        console.log(li3.prev());
        console.log(li3.prevAll());
        console.log(li3.prevUntil("#li1"));

        console.log("============父亲=======================");
        //父亲元素
        console.log(li3.parent()); // ul
        console.log(li3.parents());// 一直往上 ul  body  html
        console.log(li3.parentsUntil("body")); //就只会得到ul。因为到body就终止了
        console.log("============儿子和兄弟======================");
        //儿子和兄弟元素
        console.log(li3.parent().children()); // 获取所有父亲的子元素
        console.log(li3.siblings()); // 除他本身外，上面下面全部获取
        console.log("============补充======================");
        console.log(li3.parent().children().first()); // 获取第一个
        console.log(li3.parent().children().last()); // 获取最后一个
        console.log(li3.parent().children().not("#li3")); // 从匹配元素的集合中（结果）删除与指定表达式匹配的元素  把#li3过滤掉
        console.log(li3.parent().children().has("#li3"));//保留包含特定后代的元素，去掉那些不含有指定后代的元素.



    </script>
</body>
</html>

关系筛选器demo

<!DOCTYPE html>
<html>
<head>
    <title>find以jQuery对象为基准，查找子节点</title>
</head>
<body>

<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    //使用find()查找
    var ul1 = $(".lang");
    console.log(ul1); 
    console.log(ul1.find(".dy"));  // 以ul1为基准，查找子节点中包含类dy的节点
    console.log(ul1.find("#swift")); 
    console.log(ul1.find("[name='haskell']")); 

    // 如果要想从当前节点向上查找，使用parent()方法；
    var swf = $("#swift");
    console.log(swf.parent()); // 得到父标签ul
    console.log(swf.parent(".red")); // 同时可以传入条件，如果不符合条件的话，返回空


    //同级的话使用next()和prev()
    var swf = $("#swift");
    console.log(swf.prev());  //  <li class="dy">Python</li>
    console.log(swf.next());// <li class="dy">Scheme</li>

</script>    
</body>
</html>