JavaScript

超轻量级php框架startmvc

jquery选择器和属性对象的操作实例分析

更新时间:2020-09-30 01:42:01 作者:startmvc
本文实例讲述了jquery选择器和属性对象的操作。分享给大家供大家参考,具体如下:<html&

本文实例讲述了jquery选择器和属性对象的操作。分享给大家供大家参考,具体如下:


<html>
 <head>
 <title>jQuery-选择器</title>
 <meta charset="UTF-8"/>
 <script src="http://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" name="" id="" class="common" value="测试id选择器" onclick="testId()"/>
 <input type="button" name="" id="" value="测试标签选择器" onclick="testTarget()"/>
 <input type="button" name="" id="" value="测试类选择器" onclick="testClass()"/>
 <input type="button" name="" id="" value="测试组合选择器" onclick="testComponent()"/>
 <input type="button" name="" id="" value="测试子类选择器" onclick="testChild()"/>
 <input type="button" name="" id="" value="测试层次选择器" onclick="testCj()"/>
 <input type="button" name="" id="" value="测试层次选择器-not" onclick="testCj2()"/>
 <hr />
 <input type="button" name="" id="" value="获得数据的属性" onclick="testField()"/>
 <input type="button" name="" id="" value="修改数据的属性" onclick="testChange()"/>
 <hr />
 <input type="text" name="inp" id="inp" class="common" value="" />
 <hr />
 <div id="showdiv">
 <input type="text" value="是不是我" />
 <input type="text" />
 <input type="text" />
 <input type="text" />
 </div>
 <hr />
 <table border="1px">
 <tr height="30px">
 <td width="100px"></td>
 <td width="100px"></td>
 </tr>
 <tr height="30px">
 <td>1</td>
 <td></td>
 </tr>
 <tr height="30px">
 <td></td>
 <td></td>
 </tr>
 </table>
 </body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

jquery 选择器 属性对象