jQuery中[attribute=value]选择器用法实例

 更新时间:2014年12月31日 10:50:59   投稿:shichen2014  
这篇文章主要介绍了jQuery中[attribute=value]选择器用法,实例分析了[attribute=value]选择器的功能、定义及给定属性及属性值元素的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery中[attribute=value]选择器用法。分享给大家供大家参考。具体分析如下:

此选择器能够匹配带有给定属性和属性值的元素。

语法结构:

复制代码 代码如下:
$("[attribute=value]")

参数列表:

参数 描述
attribute 定义要查找的属性名称。
value 定义要超找的属性值。
引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。

实例代码:

实例一:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>[attribute=value]选择器</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=third]").css("color","blue");
  })
})
</script>
</head>
<body>
<ul>
  <li id="first">html专区</li>
  <li id="second">Jquery专区</li>
</ul>
<ul>
  <li id="third">欢迎来到脚本之家</li>
  <li>脚本之家欢迎您</li>
</ul>
<button>点击查看效果</button>
</body>
</html>

以上代码可以li元素中id属性值为third的li元素中的文本颜色设置为蓝色。

实例二:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>[attribute=value]选择器</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=thi]rd]").css("color","blue");
  })
})
</script>
</head>
<body>
<ul>
  <li id="first">html专区</li>
  <li id="second">Jquery专区</li>
</ul>
<ul>
  <li id="thi]rd">欢迎来到脚本之家</li>
  <li>脚本之家欢迎您</li>
</ul>
<button>点击查看效果</button>
</body>
</html>

从以上代码可以看出如何代码中含有"["或者"]"的时候,必须要带有引号,否则会造成匹配错误。

希望本文所述对大家的jQuery程序设计有所帮助。

相关文章

  • JQuery动画与特效实例分析

    JQuery动画与特效实例分析

    这篇文章主要介绍了JQuery动画与特效的用法,实例分析了显示与隐藏、滑动、淡入淡出及自定义动画的使用技巧,需要的朋友可以参考下
    2015-02-02
  • jquery 日期控件datepicker属性详细解析

    jquery 日期控件datepicker属性详细解析

    本文是对jquery中日期控件datepicker的属性进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • jQuery简单实现对数组去重及排序操作实例

    jQuery简单实现对数组去重及排序操作实例

    这篇文章主要介绍了jQuery简单实现对数组去重及排序操作,结合实例形式分析了jQuery中unique方法进行数组去重及sort方法排序的相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • jquery实现公告翻滚效果

    jquery实现公告翻滚效果

    本文给大家分享的是一则使用jQuery实现公告的翻滚效果的代码,十分简洁实用,兼容性也非常不错,这里推荐给小伙伴们
    2015-02-02
  • jquery.mousewheel实现整屏翻屏效果

    jquery.mousewheel实现整屏翻屏效果

    jQuery Mousewheel 用于添加跨浏览器的鼠标滚轮支持。 mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。
    2015-08-08
  • jQuery简单入门示例之用户校验demo示例

    jQuery简单入门示例之用户校验demo示例

    这篇文章主要介绍了jQuery简单入门示例之用户校验demo示例,分析了基于jQuery的简单用户校验功能相关实现技巧,需要的朋友可以参考下
    2016-07-07
  • jQuery实现的form转json经典示例

    jQuery实现的form转json经典示例

    这篇文章主要介绍了jQuery实现的form转json功能,结合完整实例形式分析了jQuery将form表单数据封装成json传输的具体步骤与相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】

    jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】

    这篇文章主要介绍了jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果,结合完整实例形式分析了jQuery使用插件FusionCharts载入xml格式数据绘制柱状图与折线图组合图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-04-04
  • JQuery 插件制作实践 xMarquee插件V1.0

    JQuery 插件制作实践 xMarquee插件V1.0

    今天要介绍的是实现类跑马灯效果的的广告插件。类似偶公司web-dev的同事在网站首页上做的目录广告播放器。其实很简单,LEVIN实际应用中也用到,所以稍作整理如下.
    2010-04-04
  • JQuery Ajax执行跨域请求数据的解决方案

    JQuery Ajax执行跨域请求数据的解决方案

    今天小编就为大家分享一篇关于JQuery Ajax执行跨域请求数据的解决方案,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12

最新评论