首页 > 代码库 > jquery选择器练习

jquery选择器练习

2024-07-02 00:56:02   230人阅读

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <script type="text/javascript">
        //选择器总结
        //jquery中选择器编写均可以以元素名为开头  后跟id,class或则属性选择器来组成。
        //$("input[name$=‘3‘]")  input为元素名,[]中包含属性name,name的值以3结尾
        //$("input#none5")                                              不能有空格
        //$("input.cls1")                                               不能有空格
        //$("input:first")
        //$("input[class][name^=‘none‘]") 复合选择器，返回含有class属性且name属性的值以none值开头
        //$("input.cls1[name^=‘none‘]") 返回class为.cls1且name属性的值以none值开头


        //form所有后代input元素
        var Init1 = function () {
            $("form input").each(function () {
                alert($(this).attr("name"));
            })
        };
        //form所有input子元素
        var Init2 = function () {
            $("form > input").each(function () {
                alert($(this).attr("name"));
            })
        };
        //紧接form后的所有input同辈元素
        var Init3 = function () {
            $("form ~ input").each(function () {
                alert($(this).attr("name"));
            })

            //$("input[name=‘none2‘] ~ input").each(function () {
            //    alert($(this).attr("name"));
            //})
        };
        //紧接form的第一个input同辈元素
        var Init4 = function () {
            $("form + input").each(function () {
                alert($(this).attr("name"));
            })
        };
        //返回属性name包含none的所有input元素
        var Init5 = function () {
            $("input[name*=‘none‘]").each(function () {
                alert($(this).attr("name"));
            })
        }
        //返回class为cls1的所有input元素
        var Init6 = function () {
            //alert($("input.cls1").attr("name"));
            $("input.cls1").each(function () {
                alert($(this).attr("name"));
            })
        }
        //返回id为none5的所有input元素
        var Init7 = function () {
            //alert($("input.cls1").attr("name"));
            $("input#none5").each(function () {
                alert($(this).attr("name"));
            })
        }
        //返回第一个input元素
        var Init8 = function () {
            $("input:first").each(function () {
                alert($(this).attr("name"));
            })
        }

        //返回第一个input元素
        var Init9 = function () {
            //$("input[class][name^=‘none‘]").each(function () {
            //    alert($(this).attr("name"));
            //})
            $("input.cls1[name^=‘none‘]").each(function () {
                alert($(this).attr("name"));
            })
        }
        $(Init9);
    </script>
</head>
<body>
    <input name="none2" />
    <form>
        <label>Name:</label> 
        <input name="name" />
        <fieldset>
            <label>Newsletter:</label> 
            <input name="newsletter" />
        </fieldset>
    </form>
    <input class="cls1" name="none" />
    <input class="cls1" name="none5" />
    <input id="none6" class="cls1" name="none6" />
    <input name="none3" />
</body>
</html>

 


联系
我们