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 相关文章推荐
javascript 面向对象继承
Nov 26 Javascript
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
js 深拷贝函数
2008/12/04 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
python计算最大优先级队列实例
2013/12/18 Python
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
业务代表的岗位职责
2013/11/16 职场文书
教师岗位职责范本
2013/12/29 职场文书
圣诞节开幕词
2015/01/29 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
学籍证明模板
2015/06/18 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
Python一些基本的图像操作和处理总结
2021/06/23 Python