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 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 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
php导出CSV抽象类实例
2014/09/24 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
javascript中的this详解
2014/12/08 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
Python MySQLdb Linux下安装笔记
2015/05/09 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
中科方德软件测试面试题
2016/04/21 面试题
英文求职信结束语大全
2013/10/26 职场文书
采购部主管岗位职责
2014/01/01 职场文书
教研活动总结
2014/04/28 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
环保公益策划方案
2014/08/15 职场文书
律政俏佳人观后感
2015/06/09 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers