jQuery属性选择器用法实例分析


Posted in jQuery onJune 28, 2019

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

属性选择器

在HTML文档中,元素的开始标记中通常包含有多个属性(attribute)

<input id="txtUsername" type="text" value="qiyisoft" name="email" style="display:block" />

在jQuery中,除了直接使用id和class属性作为选择器之外,还可以根据各种属性(如title等)对由选择器查询到的元素进行过滤。

属性选择器包含在中括号"[]"中

语法如下:

  • "$基本选择器[属性过滤选择器]"
  • 可以根据是否包含指定属性或者根据属性值从查询到的元素中进行筛选。

属性选择器种类

  • 属性过滤器
    • 用于筛选给定属性等于某特定值的所有元素
    • 格式:$("selector[attribute=value]");
  • 开始过滤器
    • 用于选择给定属性是以某特定值开始的所有元素
    • 格式:$("selector[attribute^=value]")
  • 结尾过滤器
    • 用于选择给定属性是以某特定值结尾的所有元素
    • 格式:$("selector[attribute$=value]")
  • 任意匹配过滤器
    • 用于选择指定属性值包含给定字符串的所有元素
    • 格式:$("selector[attribute*=value]")
  • 包含过滤器
    • 用于选择包含给定属性的所有元素
    • 格式:$("selector[attribute]")
  • 复合过滤器
    • 用于选择同时满足多个条件的所有元素
    • 格式:$("selector[selector1][selector2]…[selector[N]")

如操作:

  • 所有文本框
  • 所有.com结尾的超链接
  • value属性包含"input"字符串的组件
  • 拥有rows属性的组件
  • 被选中的单选框/复选框
  • 所有"http://"开头的超链接
  • 被禁用的文本框
<script>
  $(function(){
    //利用属性选择器获取当前页面所有的文本框
    //$("input[type='text']").css("border" , "1px solid red");
    //利用尾匹配完成对于.com结尾的超链接筛选
    //$=代表以XXX结尾的情况
    //$("a[href$='.com']").css("border" , "1px solid red");
    //^= 代表头 匹配,筛选http://开头的超链接
    //$("a[href^='http://']").css("border" , "1px solid red");
    //*= 代表任意匹配,获取所有value属性中包含input字符串的对象
    //$("*[value*='input']").css("border" , "1px solid red");
    //在不考虑属性值的情况下,可以直接在中括号内写属性名即可
    //$("*[rows]").css("border" , "1px solid red");
    //对于多个属性条件同时生效的情况下,我们可以使用多条件筛选,多条件筛选通过增加多个[]来实现的
    $("input[type='radio'][checked='checked'],input[type='checkbox'][checked='checked']").css("width" , "100px");
    //多条件筛选
    $("input[type='text'][disabled='disabled']").css("border" , "1px solid red");
  });
</script>

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

jQuery 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery插件之validation插件
Mar 29 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jQuery位置选择器用法实例分析
Jun 28 #jQuery
jQuery层叠选择器用法实例分析
Jun 28 #jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 #jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 #jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
jQuery事件委托代码实践详解
Jun 21 #jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 #jQuery
You might like
PHP 采集程序原理分析篇
2010/03/05 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
php使用google地图应用实例
2014/12/31 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
[转]JS宝典学习笔记
2007/02/07 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
python中类的一些方法分析
2014/09/25 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
深入理解python多进程编程
2016/06/12 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
师范生自荐信
2013/10/27 职场文书
高三地理教学反思
2014/01/11 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
原告代理词范文
2015/05/25 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python