jQuery中[attribute^=value]选择器用法实例
更新时间：2014年12月31日 11:11:13 投稿：shichen2014
这篇文章主要介绍了jQuery中[attribute^=value]选择器用法,实例分析了[attribute^=value]选择器的功能、定义及匹配以某些值开始的元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery中[attribute^=value]选择器用法。分享给大家供大家参考。具体分析如下：
此选择器能够选取属性值是以某些值开始的元素。
语法结构:
复制代码 代码如下:
$("[attribute^=value]")
参数列表:
实例代码:
实例一:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<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://www.jb51.net/" />
<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程序设计有所帮助。
相关文章
jQuery)扩展jQuery系列之一 模拟alert，confirm（一）
很多人都为了使alert系统的调用函数在自己的控制范围之内，都选择了去封装一个属于自己的alert组件，现在我们就动手实现一个这样的小部件。2010-12-12
jquery UI Datepicker时间控件的使用及问题解决
这篇文章主要介绍了jquery UI Datepicker时间控件的使用及与asp.net中的UpdatePanel联合使用时的失效问题解决，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要为大家详细介绍了jquery+h5实现九宫格抽奖特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
jquery对表单的基本操作，里面对于checkbox等表单的获取，都有很详细的说明。2010-07-07
jQuery扁平化风格下拉框美化插件FancySelect使用指南
这篇文章主要介绍了jQuery扁平化风格下拉框美化插件FancySelect使用指南,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jQuery调用ajax请求的常见方法,实例汇总了三种常见的jQuery调用Ajax的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
本文主要介绍jQuery插件uploadify3.1的简单使用，希望能帮到大家，有需要的朋友可以参考一下。2016-06-06
这篇文章主要为大家介绍了jquery实现tab菜单切换内容的精简方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
本文主要分享了基于jQuery实现立体式数字动态增加（animate方法）的实例代码。有很好的参考价值，需要的朋友一起来看下吧2016-12-12
本篇文章主要是对jquery选择器之层级过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论