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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
vue二级路由设置方法
Feb 09 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 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
Terran热键控制
2020/03/14 星际争霸
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Django 路由控制的实现
2019/07/17 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
Django通过json格式收集主机信息
2020/05/29 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
历史博物馆观后感
2015/06/05 职场文书
趣味运动会口号
2015/12/24 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript