jQuery属性选择器用法示例


Posted in Javascript onSeptember 09, 2016

本文实例讲述了jQuery属性选择器用法。分享给大家供大家参考,具体如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(document).ready(function(){
  //选取含有 属性title 的div元素.
  $('#btn1').click(function(){
    $('div[title]').css("background","#bbffaa");
  })
  //选取 属性title值等于 test 的div元素.
  $('#btn2').click(function(){
    $('div[title=test]').css("background","#bbffaa");
  })
  //选取 属性title值不等于 test 的div元素.
  $('#btn3').click(function(){
    $('div[title!=test]').css("background","#bbffaa");
  })
  //选取 属性title值 以 te 开始 的div元素.
  $('#btn4').click(function(){
    $('div[title^=te]').css("background","#bbffaa");
  })
  //选取 属性title值 以 est 结束 的div元素.
  $('#btn5').click(function(){
    $("div[title$=est]").css("background","#bbffaa");
  })
  //选取 属性title值 含有 es 的div元素.
  $('#btn6').click(function(){
    $("div[title*=es]").css("background","#bbffaa");
  })
  //组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有 es 的元素.
  $('#btn7').click(function(){
    $("div[id][title*=es]").css("background","#bbffaa");
  })
});
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<h3> 属性选择器.</h3>
<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
<input type="button" value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
<br />
<br />
<div class="one" id="one" > id为one,class为one的div
  <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" > id为two,class为one,title为test的div.
  <div class="mini" title="other">class为mini,title为other</div>
  <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini"></div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div> 包含input的type为"hidden"的div
  <input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>

效果图:

jQuery属性选择器用法示例

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

Javascript 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
js实现上传图片到服务器
Apr 11 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 #Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 #Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 #Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 #Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 #Javascript
jQuery子元素过滤选择器用法示例
Sep 09 #Javascript
老生常谈JQuery data方法的使用
Sep 09 #Javascript
You might like
坏狼的PHP学习教程之第1天
2008/06/15 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
利用python代码写的12306订票代码
2015/12/20 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
pandas重新生成索引的方法
2018/11/06 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
公司年夜饭通知
2015/04/25 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
如何在python中实现ECDSA你知道吗
2021/11/23 Python