jQuery中[attribute*=value]选择器用法实例


Posted in Javascript onDecember 31, 2014

本文实例讲述了jQuery中[attribute*=value]选择器用法。分享给大家供大家参考。具体分析如下:

此选择器能够匹配给定的属性包含某些值的元素。

语法结构:

$("[attribute*=value]")

参数列表:

参数 描述
attribute 定义要查找的属性。
value 定义要查找的值。 引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("li[id*='ir']").css("color","blue"); 

  })

})

</script>

</head>

<body>

<ul>

  <li id="first">html专区</li>

  <li id="second">Jquery专区</li>

</ul>

<ul>

  <li id="third">欢迎来到三水点靠木</li>

  <li>三水点靠木欢迎您</li>

</ul>

<button>点击查看效果</button>

</body>

</html>

以上代码可以将li元素中,id属性值中带有“ir”的li元素中文本颜色设置为蓝色。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("li[id*=[ir]").css("color","blue"); 

  })

})

</script>

</head>

<body>

<ul>

  <li id="f[irst">html专区</li>

  <li id="second">Jquery专区</li>

</ul>

<ul>

  <li id="third">欢迎来到三水点靠木</li>

  <li>三水点靠木欢迎您</li>

</ul>

<button>点击查看效果</button>

</body>

</html>

从以上代码可以看出如何代码中含有"["或者"]"的时候,必须要带有引号,否则会造成匹配错误。

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

Javascript 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
javascript vvorld 在线加密破解方法
Nov 13 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
一些实用性较高的js方法
Apr 19 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 #Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 #Javascript
修复bash漏洞的shell脚本分享
Dec 31 #Javascript
分享一个常用的javascript静态类
Dec 31 #Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 #Javascript
使用jquery+CSS实现控制打印样式
Dec 31 #Javascript
浅谈javascript中字符串String与数组Array
Dec 31 #Javascript
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python os模块学习笔记
2015/06/21 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
初中优秀班集体申报材料
2014/05/01 职场文书
医学求职自荐信
2014/06/21 职场文书
优秀党员个人总结
2015/02/14 职场文书
龙猫观后感
2015/06/09 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
用python画城市轮播地图
2021/05/28 Python
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
如何使用SQL Server语句创建表
2022/04/12 SQL Server
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript