<!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>