jquery选择器和属性对象的操作实例分析
程序员文章站
2022-07-02 19:34:51
本文实例讲述了jquery选择器和属性对象的操作。分享给大家供大家参考，具体如下：
jq...</div>
<div class="content">
<p>本文实例讲述了jquery选择器和属性对象的操作。分享给大家供大家参考，具体如下：</p>
<div class="jb51code">
<pre class="brush: javascript;">
<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>
</pre>
</div>
<p>感兴趣的朋友可以使用<span style="color: #ff6600"><strong>在线html/css/javascript代码运行工具</strong></span>：<a target="_blank" href="http://tools.jb51.net/code/htmljsrun" rel="nofollow">http://tools.jb51.net/code/htmljsrun</a>测试上述代码运行效果。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1614584.html">
微信小程序新闻网站详情页实例代码 </a>
</p>
<p>
下一篇： <a href="/article/1614586.html">
一看就会的vuex实现登录验证（附案例） </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2117743.html" target="_blank" title="HTML5的自定义属性data-*详细介绍和JS操作实例">
<h2>
HTML5的自定义属性data-*详细介绍和JS操作实例 </h2>
</a>
</li>
<li>
<a href="/article/2111633.html" target="_blank" title="jQuery之DOM对象和jQuery对象的转换与区别分析">
<h2>
jQuery之DOM对象和jQuery对象的转换与区别分析 </h2>
</a>
</li>
<li>
<a href="/article/2097097.html" target="_blank" title="jQuery动态生成的元素绑定事件操作实例分析">
<h2>
jQuery动态生成的元素绑定事件操作实例分析 </h2>
</a>
</li>
<li>
<a href="/article/2089374.html" target="_blank" title="JS获得一个对象的所有属性和方法实例">
<h2>
JS获得一个对象的所有属性和方法实例 </h2>
</a>
</li>
<li>
<a href="/article/2057290.html" target="_blank" title="Laravel框架中的路由和控制器操作实例分析">
<h2>
Laravel框架中的路由和控制器操作实例分析 </h2>
</a>
</li>
<li>
<a href="/article/2049464.html" target="_blank" title="vue给对象动态添加属性和值的实例">
<h2>
vue给对象动态添加属性和值的实例 </h2>
</a>
</li>
<li>
<a href="/article/2048676.html" target="_blank" title="Python面向对象之类和对象属性的增删改查操作示例">
<h2>
Python面向对象之类和对象属性的增删改查操作示例 </h2>
</a>
</li>
<li>
<a href="/article/2009363.html" target="_blank" title="前端笔记知识点整合之jQuery（一）加载函数的区别&对象&操作HTML/CSS&动画&选择器">
<h2>
前端笔记知识点整合之jQuery（一）加载函数的区别&对象&操作HTML/CSS&动画&选择器 </h2>
</a>
</li>
<li>
<a href="/article/2005824.html" target="_blank" title="javascript遍历json对象的key和任意js对象属性实例">
<h2>
javascript遍历json对象的key和任意js对象属性实例 </h2>
</a>
</li>
<li>
<a href="/article/2003980.html" target="_blank" title="JS高级---实例对象使用属性和方法层层的搜索 （实例对象-->原型对象-->报错）">
<h2>
JS高级---实例对象使用属性和方法层层的搜索 （实例对象-->原型对象-->报错） </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>