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

2020-05-27 17:59:45易采站长站整理

}
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相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。