jquery选择器练习
2014-04-29 10:10
435 查看
<!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>
相关文章推荐
- jquery学习之1.6-选择器小练习,遍历复选框
- Jquery选择器练习(二)
- JQuery 常见选择器详解练习1
- jquery选择器练习
- JQuery 常见选择器详解练习2
- Jquery选择器练习产品筛选
- JQuery 常见选择器详解练习3
- jQuery 练习[二] jquery 对象选择器(1)
- jQuery 练习[二] jquery 对象选择器(1)
- jQuery 练习[二] jquery 对象选择器(1)
- [php学习十六]JQuery练习1-选择器
- 使用jquery实现小需求练习-------对应选择器的练习
- Jquery选择器练习(一)
- jQuery学习笔记2——选择器的练习
- jQuery学习笔记——jQuery选择器练习
- jQuery选择器 基本选择器 层次选择器 表单选择器 过滤选择器 练习 事例
- jQuery之选择器
- jquery学习随笔(简单选择器)
- jQuery选择器
- JQuery学习(2)选择器(1)