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实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 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
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
Yii清理缓存的方法
2016/01/06 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
canvas实现钟表效果
2017/02/13 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
对python多线程与global变量详解
2018/11/09 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
见义勇为事迹材料
2014/12/24 职场文书
实习计划书范文
2015/01/16 职场文书
学习保证书100字
2015/02/26 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
java解析XML详解
2021/07/09 Java/Android
React四级菜单的实现
2022/04/08 Javascript