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表单验证(简单)
May 23 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python实现抢购IPhone手机
2018/02/07 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
详解python 爬取12306验证码
2019/05/10 Python
python解析yaml文件过程详解
2019/08/30 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
小学生成长感言
2014/01/30 职场文书
师德个人剖析材料
2014/02/02 职场文书
初中作文评语大全
2014/04/23 职场文书
工作说明书范文
2014/05/07 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
教师节领导致辞
2015/07/29 职场文书