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技术-屏蔽类
Aug 15 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
Ext.MessageBox工具类简介
Dec 10 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
vue2中使用less简易教程
Mar 27 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
OpenLayers3实现图层控件功能
Sep 25 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不写闭合标签的好处
2014/03/04 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
js opener的使用详解
2014/01/11 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
OpenCV 模板匹配
2019/07/10 Python
PyTorch中的Variable变量详解
2020/01/07 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
优秀村官事迹材料
2014/01/10 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
依法行政工作汇报
2014/10/28 职场文书
2014年科室工作总结
2014/11/20 职场文书
公司员工手册范本
2015/05/14 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书