<html> <head> <title>jQuery-选择器</title> <meta charset="UTF-8"/> <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> function testId(){ //利用id获取对象，注意其在利用id的是时候必须在前面加#，毕竟是你自定义的名称 var inp=$("#inp"); alert(inp); //返回的是获取的对象类型[object Object] alert(inp.val()); //可以实时的获得对象的value值，注意：inp本质上是一个数组，所以其没有value属性(value是对象的属性)，我们使用了其val方法 alert(inp.length); //返回数组的长度 } function testTarget(){ //利用标签获得对象 var ta=$("input"); alert(ta.val()); //打印了第一个input的元素的value值 alert(ta.length); //返回数组长度，就是所有的input标签的数目 } function testClass(){ //利用类获取对象,感觉和css的对应的选择器一样，利用类选择器时，用.类名 var cl=$(".common"); alert(cl.val()); alert(cl.length); //返回有这个类属性的数目 } function testComponent(){ //利用组合的各种方法获取对象 var al=$(".common,input"); alert(al.val()); alert(al.length); //返回所有类型数目之和 } function testComponent(){ //利用组合的各种方法获取对象 var al=$(".common,input"); alert(al.val()); alert(al.length); //返回所有类型数目之和 } function testChild(){ //获取父类的对象 var fa=$("#showdiv>input"); alert(fa.val()); alert(fa.length); } function testCj(){ //测试层次结构 //直接获得其子属性，利用jQuery的方法 var c1=$("input:first"); alert(c1.val()); //利用数据的方式进行获得 // alert(c1.length); // //利用非jQuery的方法 var c2=$("input"); alert(c2[0].value); //我们获得的是js的对象，而非数组，我们从中取得了对象值 } function testCj2(){ //测试层次结构 var tds=$("td"); alert(tds.length); //返回值数目是6个 var tdm=$("td:not(td[width])");//返回的对象是指定对象减去后面的带限制的数据，的一个数组 alert(tdm.length); //返回值是4个，减去了td中有width属性的个数 alert(tdm.html()); //返回标签内部的数据，相当于js的innerHTML } //操作数据的属性 function testField(){ //获得对象 var fl=$("#inp"); alert(fl.attr("type")+":"+fl.attr("value")+"："+fl.val()); //在此声明一下，对应的利用attr可以获得对象的一系列属性，其中这种方法的value只能获得其默认的已经存在的值，但是利用数组对象.val()获取的可以获得实时的值 } function testChange(){ //获取对象 var f2=$("#inp"); //修改对象属性 f2.attr("type","button");//注意其内部是两个带引号的，一个用来点名要修改的属性，另一个用来点名要修改为的数值 } </script> <style type="text/css"> .common{} #showdiv{ width: 200px; height: 100px; border: solid 1px; } input[type=text]{ margin-top: 10px; width: 80px; margin-left: 10px; } </style> </head> <body> <h3>jQuery-选择器</h3> <input type="button" value="测试id选择器"/> <input type="button" value="测试标签选择器"/> <input type="button" value="测试类选择器"/> <input type="button" value="测试组合选择器"/> <input type="button" value="测试子类选择器"/> <input type="button" value="测试层次选择器"/> <input type="button" value="测试层次选择器-not"/> <hr /> <input type="button" value="获得数据的属性"/> <input type="button" value="修改数据的属性"/> <hr /> <input type="text" value="" /> <hr /> <div> <input type="text" value="是不是我" /> <input type="text" /> <input type="text" /> <input type="text" /> </div> <hr /> <table> <tr> <td></td> <td></td> </tr> <tr> <td>1</td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》