jquery 属性选择器(匹配具有指定属性的元素)


Posted in Javascript onSeptember 06, 2016

jQuery 选择器

在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例。

关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中:

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:

实例

$("p").css("background-color","red");

更多的选择实例

语法 描述
$(this) 当前 HTML 元素
$("p") 所有

元素

$("p.intro") 所有 class="intro" 的

元素

$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个
    的第一个
  • 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的
元素中的所有 class="head" 的元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>属性选择器</title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <style type="text/css">
 .yang{ border-collapse: collapse; width:500px;height:30px;border:1px solid red;"}
 </style>
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 <script type="text/javascript">
 /*
  [attribute] :匹配具有指定属性的元素
  [attribute=value] :匹配属性为指定值的元素
  [attribute!=value] :匹配属性值不等于指定值的元素
  [attribute^=value] :匹配属性值以指定值开始的元素
  [attribute$=value] :匹配属性值以指定值结束的元素
  [attribute*=value] :匹配属性值中包含指定值的元素
  [selector1][selector2][selectorN] :同时指定多个匹配条件
 */
    window.onload=function(){
    $(‘#btnOk‘).click(function(){
    //匹配具有color属性的font并把内容改为jquery
      $(‘font[color]‘).html(‘jquery‘);
      });
    };
 </script>
 </head>
 <body>
  <font>字体1</font>
  <hr />
  <font color="#336699">字体2</font>
  <hr />
  <font color="#667788">字体3</font>
  <hr />
  <font color="#338899">字体4</font>
  <hr />
  <font color="#FFAA99">字体5</font>
  <hr />
 <hr/>
 <input type="button" id=‘btnOk‘ value=‘确定‘ />
 </body>
</html>

以上就是对jquery 属性选择器的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
jquery validate表单验证插件
Sep 06 #Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 #Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 #Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 #Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 #Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 #Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 #Javascript
You might like
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
移动端js图片查看器
2016/11/17 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
详解Vue中的自定义指令
2020/12/07 Vue.js
python多线程扫描端口示例
2014/01/16 Python
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python3基础之基本数据类型概述
2014/08/13 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python输入错误后删除的方法
2019/10/12 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
基于python操作ES实例详解
2019/11/16 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
python 读取.nii格式图像实例
2020/07/01 Python
Python实现手势识别
2020/10/21 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
软件工程专业推荐信
2013/10/28 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
春节联欢会策划方案
2014/05/16 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
会议接待欢迎标语
2014/10/08 职场文书
感恩主题班会教案
2015/08/12 职场文书