jQuery中复合属性选择器用法实例


Posted in Javascript onDecember 31, 2014

本文实例讲述了jQuery中复合属性选择器用法。分享给大家供大家参考。具体分析如下:

此选择器能够匹配同时满足多个属性条件的元素。

语法结构:

[selector1][selector2][selectorN]

参数列表:

参数 描述
selector1 属性选择器。
selector2 另一个属性选择器,用以进一步缩小范围。
selectorN 任意多个属性选择器,也是用来缩小范围。

实例代码:

<!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[class=houtai][title$=p]").css("color","blue"); 

  }) 

})  

</script>

</head>

<body>

<div>

  <ul>

    <li class="houtai" title="asp">ASP教程</li>

    <li class="houtai" title="net">ASP.NET教程</li>

    <li class="houtai" title="php">;PHP教程</li>

  </ul>

  <ul>

    <li class="qiantai" title="html">html教程</li>

    <li class="qiantai" title="div">DIV+CSS教程</li>

    <li class="qiantai" title="jquery">jQUERY教程</li>

    <li class="qiantai" title="js">jAVAScript教程</li>

  </ul>

</div>

<button>点击查看效果</button>

</body>

</html>

以上代码可以将li元素中,class属性值为“houtai”,title属性值以“p”结尾的li元素,并且其中的文本颜色设置为蓝色。

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

Javascript 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
js实现文字截断功能
Sep 14 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
js 数据类型判断的方法
Dec 03 Javascript
javascript实现左右控制无缝滚动
Dec 31 #Javascript
javascript比较两个日期的先后示例代码
Dec 31 #Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 #Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 #Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 #Javascript
修复bash漏洞的shell脚本分享
Dec 31 #Javascript
分享一个常用的javascript静态类
Dec 31 #Javascript
You might like
JS实现php的伪分页
2008/05/25 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
jQuery的三种$()
2009/12/30 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
完善的jquery处理机制
2016/02/21 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
python 爬取疫情数据的源码
2020/02/09 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
Python @property及getter setter原理详解
2020/03/31 Python
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
亿企通软件测试面试题
2012/04/10 面试题
幼儿园保育员辞职信
2014/01/12 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
未婚证明格式
2015/06/15 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
redis复制有可能碰到的问题汇总
2022/04/03 Redis
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android