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 showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
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使用文本统计访问量的方法
2016/05/12 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
用javascript实现自定义标签
2007/05/08 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
微信小程序实现消息框弹出动画
2020/04/18 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
文明学生标兵事迹
2014/01/21 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
员工工作表扬信
2015/05/05 职场文书
起诉书格式范文
2015/05/20 职场文书
小学生暑假安全公约
2015/07/14 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
python实现简易自习室座位预约系统
2021/06/30 Python