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自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
JavaScript实现商品评价五星好评
Nov 30 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
php的ajax简单实例
2014/02/27 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
Nginx实现反向代理
2017/09/20 Servers
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
详解python的argpare和click模块小结
2019/03/31 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Python如何读写字节数据
2020/08/05 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
如何填写个人简历自我评价
2013/12/10 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
考博导师推荐信范文
2015/03/27 职场文书
推销搭讪开场白
2015/05/28 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
bose降噪耳机音能消除人声吗
2022/04/19 数码科技