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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
Javascript基础之数组的使用
May 13 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP APC缓存配置、使用详解
2014/03/06 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
跟老齐学Python之用while来循环
2014/10/02 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
django框架两个使用模板实例
2019/12/11 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
介绍一下JMS编程步骤
2015/09/22 面试题
入党申请自荐书范文
2014/02/11 职场文书
暑期培训随笔感言
2014/03/10 职场文书
十八大演讲稿
2014/05/22 职场文书
计算机专业求职信
2014/06/02 职场文书
承诺书格式范文
2014/06/03 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server