jquery选择器和属性对象的操作实例分析
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了jquery选择器和属性对象的操作,结合实例形式分析了jquery选择器与页面元素属性相关操作技巧,需要的朋友可以参考下
本文实例讲述了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代码运行工具：测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
上一篇：jQuery操作元素的内容和样式完整实例分析
下一篇：js实现旋转木马轮播图效果