jquery选择器练习

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>