jquery选择器和属性对象的操作实例分析
本文实例讲述了jquery选择器和属性对象的操作。分享给大家供大家参考,具体如下:
jQuery-选择器 functiontestId(){ //利用id获取对象,注意其在利用id的是时候必须在前面加#,毕竟是你自定义的名称 varinp=$("#inp"); alert(inp);//返回的是获取的对象类型[objectObject] alert(inp.val());//可以实时的获得对象的value值,注意:inp本质上是一个数组,所以其没有value属性(value是对象的属性),我们使用了其val方法 alert(inp.length);//返回数组的长度 } functiontestTarget(){ //利用标签获得对象 varta=$("input"); alert(ta.val());//打印了第一个input的元素的value值 alert(ta.length);//返回数组长度,就是所有的input标签的数目 } functiontestClass(){ //利用类获取对象,感觉和css的对应的选择器一样,利用类选择器时,用.类名 varcl=$(".common"); alert(cl.val()); alert(cl.length);//返回有这个类属性的数目 } functiontestComponent(){ //利用组合的各种方法获取对象 varal=$(".common,input"); alert(al.val()); alert(al.length);//返回所有类型数目之和 } functiontestComponent(){ //利用组合的各种方法获取对象 varal=$(".common,input"); alert(al.val()); alert(al.length);//返回所有类型数目之和 } functiontestChild(){ //获取父类的对象 varfa=$("#showdiv>input"); alert(fa.val()); alert(fa.length); } functiontestCj(){ //测试层次结构 //直接获得其子属性,利用jQuery的方法 varc1=$("input:first"); alert(c1.val());//利用数据的方式进行获得 //alert(c1.length); ////利用非jQuery的方法 varc2=$("input"); alert(c2[0].value);//我们获得的是js的对象,而非数组,我们从中取得了对象值 } functiontestCj2(){ //测试层次结构 vartds=$("td"); alert(tds.length);//返回值数目是6个 vartdm=$("td:not(td[width])");//返回的对象是指定对象减去后面的带限制的数据,的一个数组 alert(tdm.length);//返回值是4个,减去了td中有width属性的个数 alert(tdm.html());//返回标签内部的数据,相当于js的innerHTML } //操作数据的属性 functiontestField(){ //获得对象 varfl=$("#inp"); alert(fl.attr("type")+":"+fl.attr("value")+":"+fl.val()); //在此声明一下,对应的利用attr可以获得对象的一系列属性,其中这种方法的value只能获得其默认的已经存在的值,但是利用数组对象.val()获取的可以获得实时的值 } functiontestChange(){ //获取对象 varf2=$("#inp"); //修改对象属性 f2.attr("type","button");//注意其内部是两个带引号的,一个用来点名要修改的属性,另一个用来点名要修改为的数值 } .common{} #showdiv{ width:200px; height:100px; border:solid1px; } input[type=text]{ margin-top:10px; width:80px; margin-left:10px; } jQuery-选择器
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。