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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
JS 遮照层实现代码
Mar 31 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
vue地区选择组件教程详解
May 04 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
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防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
php定时执行任务设置详解
2015/02/06 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
js Form.elements[i]的使用实例
2011/11/13 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python中as用法实例分析
2015/04/30 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
django中related_name的用法说明
2020/05/20 Python
python打开文件的方式有哪些
2020/06/29 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
预备党员党课思想汇报
2014/01/13 职场文书
运动会稿件100字
2014/02/21 职场文书
学习计划书怎么写
2014/09/15 职场文书
师德师风学习材料
2014/12/19 职场文书