【jquery入门】学习01(2)_H5之家 - 中国HTML5教程资源分享第一站

需要注意的是：jquery对象只能调用jquery对象的方法或属性，不能调用dom对象的方法或属性，反之一样。

五：jQuery九类选择器【在网页中获取你需要的节点(参见jQueryAPI.chm手册)】
1）基本选择器
$("#div1ID")
$("div")
$(".myClass")
$("div,span,p")
$("#div1ID,.myClass,p")
<body> <div>div1</div> <div>div2</div> <span>span</span> <p>p</p> </body> <script type="text/javascript"> //1)查找ID为"div1ID"的元素个数 //alert($("#div1ID").size()); //alert($("#div2ID").size()); //2)查找DIV元素的个数(标签名大小写不敏感，但id属性值大小写敏感) //alert($("div").size()); //3)查找所有样式是"myClass"的元素的个数(标签名大小写不敏感，但class属性值大小写敏感) //alert($(".myClass").size()); //4)查找所有DIV,SPAN,P元素的个数 //alert($("div,span,p").size()); //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数 alert($("#div1ID,.myClass,p").size()); </script>

2）层次选择器

$("from input")祖先后代
$("form>input")父亲孩子
$("form+input")第一个兄弟
$("form~input")所有兄弟
<body> <form> <input type="text" value="a"/> <table> <tr> <td> <input type="checkbox" value="b"/> </td> </tr> </table> </form> <input type="radio" value="a"/> <input type="radio" value="d"/> <input type="radio" value="e"/> </body> <script type="text/javascript"> //1)找到表单form下[后代]所有的input元素的个数 //alert($("form input").size()); //2)找到表单form下所有的子级[第一级孩子]input元素个数 //alert($("form>input").size()); //3)找到表单form同级[兄弟]第一个input元素的value属性值 //alert($("form+input").val()); //4)找到所有与表单form同级[兄弟]的input元素个数 alert($("form~input").size()); </script>
3）增强基本选择器
$("ul li:first")
$("ul li:last")
$(":checkbox:not(:checked)")找查所有未选中的复选框
$(":checkbox:checked")找查所有选中的复选框
$("table tr:even")，索引号为偶数
$("table tr:odd")，索引号为奇数
$("table tr:eq(0)"，从0开始
$("table tr:gt(1)"
$("table tr:eq(1)"
$(":header")
<body> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <input type="checkbox" checked/> <input type="checkbox" checked/> <input type="checkbox"/> <table> <tr><td>line1[0]</td></tr> <tr><td>line2[1]</td></tr> <tr><td>line3[2]</td></tr> </table> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <p>p</p> <script type="text/javascript"> //1)查找UL中第一个元素的内容 //alert($("ul li:first").html()); //2)查找UL中最后个元素的内容 //alert($("ul li:last").html()); //3)查找所有未选中的input元素个数 //alert($(":checkbox:not(:checked)").size()); //4)查找表格的1、3、5...奇数行个数，索引号，从0开始 //alert($("table tr:even").size()); //5)查找表格的2、4、6...偶数行个数，索引号，从0开始 //alert($("table tr:odd").size()); //6)查找表格中第二行的内容，从索引号0开始 //alert($("table tr:eq(1)").html()); //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大 //alert($("table tr:gt(0)").size()); //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小 //alert($("table tr:lt(2)").size()); //9)给页面内所有标题<h1><h2><h3>加上红色背景色 //$(":header").css("color","red"); </script>
4）内容选择器：
$("div:contains('John')")
$("p:empty")
$("div:has(p:has(span))")
$("p:parent")
<script type="text/javascript" src="js/jquery-1.8.2.js"></script> <style type="text/css"> .myClass{ font-size:44px; color:blue } </style> </head> <body> <div><p>John Resig</p></div> <div><p>George Martin</p></div> <div>Malcom John Sinclair</div> <div>J. Ohn</div> <p></p> <p></p> <div></div> <script type="text/javascript"> //1)查找所有包含文本"John"的div元素的个数 //alert($("div:contains('John')").size()); //2)查找所有p元素为空的元素个数 //alert($("p:empty").size()); //3)给所有包含p元素的div元素添加一个myClass样式 // alert($("div:has(p:has(span))").size()); //4)查找所有含有子元素或者文本的p元素个数,即p为父元素 alert($("p:parent").size()); </script>
5）可见性选器
$("table tr:hidden")
$("table tr:visible")
<table> <tr> <td>Value 1</td> </tr> <tr> <td>Value 2</td> </tr> <tr> <td>Value 3</td> </tr> </table> <script type="text/javascript"> //1)查找隐藏的tr元素的个数 //alert($("table tr:hidden").size()); //alert($("tr:hidden").size()); //2)查找所有可见的tr元素的个数 alert($("tr:visible").size()); </script>6）属性选择器
$("div[id]")
$("input[name='newsletter']")
$("input[name!='newsletter']")
$("input[name^='news']")
$("input[name$='letter']")
$("input[name*='letter']")
$("input[id][name$='letter']")
<div> <p>Hello!</p> </div> <div></div> <input type="checkbox" value="Hot Fuzz" /> <input type="checkbox" value="Cold Fusion" /> <input type="checkbox" value="Evil Plans" /> <script type="text/javascript"> //1)查找所有含有id属性的div元素个数 //alert($("div[id]").size()); //2)查找所有name属性是newsletter的input元素，并将其选中 //$("input[name='newsletter']").attr("checked","checked"); //3)查找所有name属性不是newsletter的input元素，并将其选中 //$("input[name!='newsletter']").attr("checked","checked"); //4)查找所有name属性以'news'开始的input元素，并将其选中 //$("input[name^='news']").attr("checked","checked"); //5)查找所有name属性以'letter'结尾的input元素，并将其选中 //$("input[name$='letter']").attr("checked","checked"); //6)查找所有name属性包含'news'的input元素，并将其选中 //$("input[name*='ws']").attr("checked","checked"); //7)找到所有含有id属性，并且它的name属性是以"letter"结尾的，并将其选中 $("input[id][name$='letter']").attr("checked","checked"); </script>
7）子元素选择器：
$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child")
$("ul li:nth-child(1)")从1开始
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> <ul> <li>Jack</li> </ul> <script type="text/javascript"> //1)迭代每个ul中第1个li元素中的内容,索引从1开始 //$("ul li:first")---size---1 //$("ul li:first-child")size---3 //$("ul li:first-child").each(function(){ // //此时this表示<li>元素节点 // //将this这个dom对象转成jquery对象 // alert($(this).html()); // } //); $("ul li:nth-child(2)").each(function(){ alert($(this).html()); }); //2)迭代每个ul中最后1个li元素中的内容,索引从1开始 //$("ul li:last-child").each(function(){ // alert($(this).html()); //}); //3)在ul中查找是唯一子元素的li元素的内容 //$("ul li:only-child").each(function(){ // alert($(this).html()); //}); </script>
8）表单选择器：
$(":input")
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$(":input:hidden")
<form> <input type="button" value="Input Button"/><br/> <input type="checkbox" /><br/> <input type="file" /><br/> <input type="hidden" /><br/> <input type="image" /><br/> <input type="password" /><br/> <input type="radio" /><br/> <input type="reset" /><br/> <input type="submit" /><br/> <input type="text" /><br/> <select><option>Option</option></select><br/> <textarea></textarea><br/> <button>Button</button><br/> </form> <script type="text/javascript"> //1)查找所有input元素的个数 //alert($(":input").size()); //2)查找所有文本框的个数 //alert($(":text").size()); //3)查找所有密码框的个数 //alert($(":password").size()); //4)查找所有单选按钮的个数 //alert($(":radio").size()); //5)查找所有复选框的个数 //alert($(":checkbox").size()); //6)查找所有提交按钮的个数 //alert($(":submit").size()); //7)匹配所有图像域的个数 //alert($(":image").size()); //8)查找所有重置按钮的个数 //alert($(":reset").size()); //9)查找所有普通按钮的个数 //alert($(":button").size()); //10)查找所有文件域的个数 //alert($(":file").size()); //11)查找所有input元素为隐藏域的个数 //alert($(":input:hidden").size()); alert($("input[type='hidden']").size()); </script>
9）表单对象属性选择器：
$("input:enabled")
$("input:disabled")
$(":checkbox:checked")
$(":checkbox:not(:checked)")
$("select option:selected")
$("select option:selected")
<form> <input disabled="disabled" /> <input disabled="disabled" /> <input /> <input type="checkbox" checked="checked" value="Daily" /> <input type="checkbox" value="Weekly" /> <input type="checkbox" checked="checked" value="Monthly" /> <select> <option value="1">北京</option> <option value="2" selected="selected">广州</option> <option value="3">上海</option> </select> </form> <script type="text/javascript"> //1)查找所有可用的input元素的个数 //alert($("input:enabled").size()); //2)查找所有不可用的input元素的个数 //alert($("input:disabled").size()); //3)查找所有选中的复选框元素的个数 //alert($(":checkbox:checked").size()); //4)查找所有未选中的复选框元素的个数 //alert($(":checkbox:not(:checked)").size()); //5)查找所有选中的选项元素的个数 //alert($("select option:selected").size()); //6)查找所有选中的选项元素的内容 //alert($("select option:checked").html()); //alert($("select option:selected").html()); </script>
六：jQuery中常用方法（上）【在网页中操作需要的节点】
1）val()：取得标签的value属性值