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 相关文章推荐
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
jquery获取radio值实例
Oct 16 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 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中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python中表示字符串的三种方法
2017/09/06 Python
Django 解决由save方法引发的错误
2020/05/21 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
佳能英国官方网站:Canon UK
2017/08/08 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
运动会广播稿500字
2014/01/28 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书