jQuery学习<五> — — 选择器（下）

其他 2018-09-09 01:43:32 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/kyle0349/article/details/51938857

七、子元素过滤选择器

  1. :nth-child ：

    • $(“ul li:nth-child(2)”)
      将所有ul中第二个li作为Dom对象放进jQuery包装集并返回
    • $(“ul li:nth-child(odd)”)
      将所有ul中第奇数个li（从1开始）元素作为Dom对象放进jQuery包装集并返回，注意这里是从1开始。基本过滤器中eq是从0开始

  2. :first-child ： $(“ul li:first-child”)
    将所有ul中的第一个li元素作为Dom对象放进jQuery包装集并返回。

  3. :last-child ： $(“ul li:last-child”)
    将所有ul中的最后一个li元素作为Dom对象放进jQuery包装集并返回。

  4. :only-child ： $(“ul li:only-child”)
    将所有有且仅有一个子元素，并且该元素是li元素的ul元素作为Dom对象放进jQuery包装集返回。

<head>
<base href="<%=basePath%>">
<title>My JSP 'ad_selector7.jsp' starting page</title>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    //获取所有ul中第二个li
    function doSelector1(){
        var nthchild = $("ul li:nth-child(2)");
        nthchild.each(function(){
                        alert($(this).html());
                    });
    }
    //获取所有ul中第奇数个li（从1开始）
    function doSelector2(){
        var nthchild = $("ul li:nth-child(odd)");
        nthchild.each(function(){
                        alert($(this).html());
                    });
    }
    //获取所有ul中第一个li
    function doSelector3(){
        var nthchild = $("ul li:first-child");
        nthchild.each(function(){
                        alert($(this).html());
                    });
    }
    //获取所有ul中最后一个li
    function doSelector4(){
        var nthchild = $("ul li:last-child");
        nthchild.each(function(){
                        alert($(this).html());
                    });
    }
    //获取所有ul中唯一的li（ul中只有一个元素，且该元素是li，才能被选中，有多个li，或者其他元素都不会被选中）
    function doSelector5(){
        var nthchild = $("ul li:only-child");
        nthchild.each(function(){
                        alert($(this).html());
                    });
    }
</script>

</head>
<body>
    <div>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        <ul>
            <li>444</li>
            <li>555</li>
            <li>666</li>
        </ul>
        <ul>
            <li>777</li>
        </ul>
    </div>
    <input type="button" value=":nth-child" onclick="doSelector1()">
    <input type="button" value=":nth-child" onclick="doSelector2()">
    <input type="button" value=":first-child" onclick="doSelector3()">
    <input type="button" value=":last-child" onclick="doSelector4()">
    <input type="button" value=":only-child" onclick="doSelector5()">
</body>

八、表单过滤选择器

  1. :input ： $(“:input”);
    将所有input元素作为Dom对象放进jQuery包装集并返回，
    注意：这里的input元素包括input, textarea, select 和 button 元素 ， 注意与 $(“input”) 的区别

  2. :text ： $(“:text”);
    将所有的文本框（text元素）作为Dom对象放进jQuery包装集并返回。
    注意：textarea是文本域，不是文本框，所以这里taxtarea元素不会被选中

  3. :password ： $(“:password”);
    将所有密码框作为Dom对象放进jQuery包装集并返回。

  4. :radio ： $(“:radio”);
    将所有单选按钮作为Dom对象放进jQuery包装集并返回。

  5. :checkbox ： $(“:checkbox”);
    将所有复选按钮作为Dom对象放进jQuery包装集并返回。

  6. :submit ： $(“:submit”);
    将所有提交表单作为Dom对象放进jQuery包装集并返回
    注意：

    • < button name=”test7” id=”test7”>test7< / button > 默认type=submit，会被认为是提交按钮，会被选中
    • 如果< button name=”test7” id=”test7”>test7< / button>增加属性 type=”button” ,只是普通按钮，则不会被选中

  7. :image ： $(“:image”);
    将所有图像域作为Dom对象放进jQuery包装集并返回

  8. :reset ： $(“:reset”);
    将所有重置按钮作为Dom对象放进jQuery包装集并返回。

  9. :button ： $(“:button”);
    将所有普通按钮作为Dom对象放进jQuery包装集并返回。
    注意：

    • 选择的是普通按钮，所以提交按钮和重置按钮在这里都不会被选中。
    • 上面第6点提到< button name=”test7” id=”test7” >test7< / button> 默认type=submit，是可以为:submit选择器选中，同时在这里也可以被:button选中。感觉有点bug
    • 另外即使明确属性type=”submit” < button type=”submit” name=”test7” id=”test7” >test7< / button>还是会被:button选择器选中，
    • 而其他的input元素，如果明确属性为type=”submit”或者type=”reset” 则不会被:button选择器选中。

  10. :file ： $(“:file”);
    将所有文件域作为Dom对象放进jQuery包装集并返回。

  11. :hidden ： $(“input:hidden”);
    将所有不可见的input元素作为Dom对象放进jQuery包装集并返回。

<head>
    <base href="<%=basePath%>">

    <title>My JSP 'ad_selector8.jsp' starting page</title>
    <script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        //获取所有的input元素（ input, textarea, select 和 button 元素）
        function doSelector1(){
            var inputs = $(":input"); //注意与 $("input")的区别
            inputs.each(function(){
                            alert($(this).val()+$(this).html());
                        });
        }

        //获取所有的文本框（ textarea是文本域，不是文本框，不会被选中）
        function doSelector2(){
            var texts = $(":text"); 
            texts.each(function(){
                            alert($(this).val()+$(this).html());
                        });
        }
        //获取所有的密码框
        function doSelector3(){
            var passwords = $(":password"); 
            passwords.each(function(){
                            alert($(this).val()+$(this).html());
                        });
        }
        //获取所有的单选按钮
        function doSelector4(){
            var radios = $(":radio"); 
            radios.each(function(){
                            alert($(this).val()+$(this).html());
                        });
        }
        //获取所有的复选按钮
        function doSelector5(){
            var checkboxs = $(":checkbox"); 
            checkboxs.each(function(){
                            alert($(this).val()+$(this).html());
                        });
        }
        //获取所有的提交按钮（type="submit"） 
        //注意：<button name="test7" id="test7">test7</button> 默认type=submit，所以会被选中
        //如果<button name="test7" id="test7">test7</button>增加属性 type="button" ,则不会被选中
        function doSelector6(){
            var submits = $(":submit"); 
            submits.each(function(){
                            alert($(this).val()+$(this).html());
                        });
        }
        //获取所有的图像域
        function doSelector7(){
            var images = $(":image"); 
            images.each(function(){
                            alert($(this).val()+$(this).html());
                        });
        }
        //获取所有的重置按钮
        function doSelector8(){
            var resets = $(":reset"); 
            resets.each(function(){
                            alert($(this).val()+$(this).html());
                        });
        }
        //获取所有的按钮(submit 和 reset 都不会被选中)
        //<button name="test7" id="test7" >test7</button> 感觉是个bug :submit和:button都可以选中,
        //即使增加属性type="submit" <button name="test7" id="test7" >test7</button>还是会被选中
        //而其他的input如果属性为type="submit"或者type="reset" 则不会被选中。
        function doSelector9(){
            var buttons = $(":button"); 
            buttons.each(function(){
                            alert($(this).val()+$(this).html());
                        });
        }
        //获取所有文件域
        function doSelector10(){
            var files = $(":file"); 
            files.each(function(){
                            alert($(this).val()+$(this).html());
                        });
        }
        //获取所有不可见的input，或者type=hidden的input
        function doSelector11(){
            var hiddens = $("input:hidden"); 
            hiddens.each(function(){
                            alert($(this).val()+$(this).html());
                        });
        }
    </script>

  </head>

  <body>
    <div>
        <form action="">
            <input type="text" id="test1" value="test1" >
            <input type="text" id="test2" value="test2" >
            <input type="password" id="test3" value="test3" >test3<br>
            <select id="test4">test4</select>test4
            <select id="test5" >test5</select>test5<br>
            <textarea id="test6" rows="5" cols="5">test6</textarea><br>
            <button name="test7" id="test7" type=button >test7</button><br>
            <input type="radio" id="test8" name="test8" value="test8">test8<br>
            <input type="checkbox" id="test9" name="test9" value="test9">test9
            <input type="checkbox" id="test9" name="test9" value="test10">test10<br>
            <input type="submit" id="test11" name="test11" value="test11"><br>
            <input type="image" id="test12" name="test12" value="test12"><br>
            <input type="reset" id="test13" name="test13" value="test13"><br>
            <input type="file" id="test14" name="test14" value="test14"><br>
            <input type="hidden" id="test15" name="test15" value="test15" >
        </form>
    </div>
    <input type="button" value=":input" onclick="doSelector1()">
    <input type="button" value=":text" onclick="doSelector2()">
    <input type="button" value=":password" onclick="doSelector3()">
    <input type="button" value=":radio" onclick="doSelector4()">
    <input type="button" value=":checkbox" onclick="doSelector5()">
    <input type="button" value=":submit" onclick="doSelector6()">
    <input type="button" value=":image" onclick="doSelector7()">
    <input type="button" value=":reset" onclick="doSelector8()">
    <input type="button" value=":button" onclick="doSelector9()">
    <input type="button" value=":file" onclick="doSelector10()">
    <input type="button" value=":hidden" onclick="doSelector11()">
  </body>

九、表单对象属性过滤选择器

  1. :enabled ： $(“input:enabled”);
    将所有有效的input元素作为Dom对象放进jQuery包装集并返回

  2. :disabled ： $(“input:disabled”);
    将所有无效的input元素作为Dom对象放进jQuery包装集并返回

  3. :checked ： $(“input:checked”);
    将所有被选中的单选框，复选框作为Dom对象放进jQuery包装集并返回（不包括select中的option）

  4. :selected ： $(“select option:selected”);
    将所有被选中的option作为Dom对象放进jQuery包装集并返回。

<head>
    <base href="<%=basePath%>">
    <title>My JSP 'ad_selector9.jsp' starting page</title>
    <script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        //获取有效的input表单元素
        function doSelector1(){
            var enableds = $("input:enabled");
            enableds.each(function(){
                            alert($(this).val());
                        });
        }
        //获取无效的input表单元素
        function doSelector2(){
            var enableds = $("input:disabled");
            enableds.each(function(){
                            alert($(this).val());
                        });
        }

        //匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
        function doSelector3(){
            var checkeds = $("input:checked");
            checkeds.each(function(){
                            alert($(this).val());
                        });
        }

        //获取所有被选中的option
        function doSelector4(){
            var options = $("select option:selected");
            options.each(function(){
                            alert($(this).val());
                        });
        }
    </script>
  </head>

  <body>
    <div>
        <input type="text" name="test1" value="test1" disabled="disabled">
        <input type="text" name="test2" value="test2" >
    </div>
    <div>
        <input type="checkbox" name="test3" value="test3" checked="checked">test3
        <input type="checkbox" name="test3" value="test4" >test4
        <input type="checkbox" name="test3" value="test5" checked="checked">test5
    </div>
    <div>
        <select>
            <option value="test6" selected="selected">test6</option>
            <option value="test7">test7</option>
            <option value="test8" >test8</option>
        </select>
    </div>
    <input type="button" value=":enabled" onclick="doSelector1()">
    <input type="button" value=":disabled" onclick="doSelector2()">
    <input type="button" value=":checked" onclick="doSelector3()">
    <input type="button" value=":selected" onclick="doSelector4()">
  </body>

猜你喜欢

转载自blog.csdn.net/kyle0349/article/details/51938857
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022