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的一个简单的脚本验证插件
Apr 05 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP脚本的10个技巧(7)
2006/10/09 PHP
php4的session功能评述(三)
2006/10/09 PHP
生成静态页面的PHP类
2006/11/25 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php利用header函数下载各种文件
2016/08/24 PHP
深入理解Javascript闭包 新手版
2010/12/28 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
顶岗实习协议书
2015/01/29 职场文书
法院个人总结
2015/03/03 职场文书
自荐信格式范文
2015/03/04 职场文书
2015年中秋节活动总结
2015/03/23 职场文书