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 Tools tab(幻灯片)
Jul 14 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 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生成带有雪花背景的验证码
2008/09/28 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python实现大学人员管理系统
2019/10/25 Python
详解Django配置JWT认证方式
2020/05/09 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
小学生春游活动方案
2014/08/20 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
2014年转正工作总结
2014/11/08 职场文书
泰山导游词
2015/02/02 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书