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


Posted in jQuery onJanuary 10, 2020

本文实例讲述了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代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
详解jQuery-each()方法
Mar 13 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
jquery实现吸顶导航效果
Jan 08 #jQuery
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
详解jQuery中的prop()使用方法
Jan 05 #jQuery
jQuery 选择器用法基础入门示例
Jan 04 #jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 #jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 #jQuery
You might like
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
python实现FTP服务器服务的方法
2017/04/11 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
django创建超级用户过程解析
2019/09/18 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
软件测试笔试题
2012/10/25 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
员工评语大全
2014/01/19 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
小学综合实践活动总结
2014/07/07 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
女性励志书籍推荐
2019/08/19 职场文书