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 相关文章推荐
jQuery焦点图插件SaySlide
Dec 21 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
canvas 实现中国象棋
Feb 17 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
react redux入门示例
Apr 19 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
Angular单元测试之事件触发的实现
Jan 20 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隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
DataFrame中的object转换成float的方法
2018/04/10 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
python实现四人制扑克牌游戏
2020/04/22 Python
Python 没有main函数的原因
2020/07/10 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
家长会邀请书
2014/01/25 职场文书
安全生产承诺书范文
2014/05/22 职场文书
采购内勤岗位职责
2015/04/13 职场文书
公司年夜饭通知
2015/04/25 职场文书
党支部季度考核意见
2015/06/02 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技