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 相关文章推荐
javascript学习(一)构建自己的JS库
Jan 02 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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数组及条件,循环语句学习
2012/11/11 PHP
php过滤敏感词的示例
2014/03/31 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python 文件读写操作实例详解
2014/03/12 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
高中地理教学反思
2014/01/29 职场文书
大课间活动实施方案
2014/03/06 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
校园运动会广播稿
2014/10/06 职场文书
英文感谢信格式
2015/01/21 职场文书
党员年终个人总结
2015/02/14 职场文书