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

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>