脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery选择器和属性对象

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

 更新时间：2020年01月10日 08:41:09   作者：qq_42412646  
这篇文章主要介绍了jquery选择器和属性对象的操作,结合实例形式分析了jquery选择器与页面元素属性相关操作技巧,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

相关文章

  • idTabs基于JQuery的根据URL参数选择Tab插件

    idTabs基于JQuery的根据URL参数选择Tab插件

    我们的项目用了SunSean的idTabs，但每个tab里的控件会触发postback，或者转到其他页面再转回来，这样当前选中的tab必丢。印度同事不肯用AJAX，无奈今天加班给印度人写个demo，通过回传URL参数来选择tab
    2012-04-04
  • jquery实现tr元素的上下移动示例代码

    jquery实现tr元素的上下移动示例代码

    让tr元素的上下移动的方法有很多，本文为大家介绍下使用jquery是实现的，感兴趣的朋友可以参考下
    2013-12-12
  • jQuery中replaceWith()方法用法实例

    jQuery中replaceWith()方法用法实例

    这篇文章主要介绍了jQuery中replaceWith()方法用法,以实例形式分析了replaceWith()方法用于匹配元素替换的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • Lazy Load 延迟加载图片的jQuery插件中文使用文档

    Lazy Load 延迟加载图片的jQuery插件中文使用文档

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的
    2012-10-10
  • juqery 学习之四 筛选查找

    juqery 学习之四 筛选查找

    juqery 学习之四 筛选查找，学习jquery的朋友可以参考下。
    2010-11-11
  • jQuery 实现扁平式小清新导航

    jQuery 实现扁平式小清新导航

    这篇文章主要介绍了jQuery 实现扁平式小清新导航，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07
  • jquery之Document元素选择器篇

    jquery之Document元素选择器篇

    jquery 元素选择器使用方法技巧
    2008-08-08
  • 用jQuery旋转插件jqueryrotate制作转盘抽奖

    用jQuery旋转插件jqueryrotate制作转盘抽奖

    这篇文章主要为大家详细介绍了用jQuery旋转插件jqueryrotate制作转盘抽奖，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jQuery插件实现无缝滚动特效

    jQuery插件实现无缝滚动特效

    今天给大家分享一款页面无缝滚动的jquery插件，支持上下左右，淡入淡出，滚动时间设置，动画时间设置，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jquery按回车键实现表单提交的简单实例

    jquery按回车键实现表单提交的简单实例

    下面小编就为大家带来一篇jquery按回车键实现表单提交的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论