好资源导航 » 文章资讯 » jquery选择器和属性对象的操作实例分析

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

2023-08-03 07:56:04 71

本文实例讲述了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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

jQuery-选择器

热门推荐

随机推荐