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^=s]").css("color","blue"); 

  })

})

</script>

</head>

<body>

<ul>

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

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

</ul>

<ul>

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

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

</ul>

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

</body>

</html>

以上代码可以将li元素中id属性值以s开头的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^=[s]").css("color","blue"); 

  }); 

}); 

</script>

</head>

<body>

<ul>

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

  <li id="[second" title="jquery">Jquery专区</li>

</ul>

<ul>

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

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

</ul>

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

</body>

</html>

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

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

Javascript 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
js特殊字符转义介绍
Nov 05 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
vue中appear的用法
Aug 17 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 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
jQuery中[attribute!=value]选择器用法实例
Dec 31 #Javascript
You might like
中篇:安装及配置PHP
2006/12/13 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP _construct()函数讲解
2019/02/03 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python实现的科学计算器功能示例
2017/08/04 Python
python清理子进程机制剖析
2017/11/23 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
Python中的pack和unpack的使用
2018/03/12 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
python数据爬下来保存的位置
2020/02/17 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
会计专业个人自我鉴定
2014/03/21 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
处级干部考察材料
2014/12/24 职场文书
孟佩杰观后感
2015/06/17 职场文书
九不准学习心得体会
2016/01/23 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers