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 tip提示插件(实例分享)
Apr 28 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jquery插件实现搜索历史
Apr 24 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模板,主要想体现一下思路
2006/12/25 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP线程的内存回收问题
2016/07/08 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
python使用分治法实现求解最大值的方法
2015/05/12 Python
python处理大数字的方法
2015/05/27 Python
Python教程之全局变量用法
2016/06/27 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
医院后勤自我鉴定
2013/10/13 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
环保证明
2015/06/23 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
Python中Permission denied的解决方案
2021/04/02 Python