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功能函数(2009-06-04更新)
Jun 04 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
Jquery ui css framework
Jun 28 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 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
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
JS实现页面打印功能
2017/03/16 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Python函数参数操作详解
2018/08/03 Python
python字典的常用方法总结
2019/07/31 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
财务学生的职业生涯发展
2014/02/11 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
sql注入报错之注入原理实例解析
2022/06/10 MySQL
MySQL存储过程及语法详解
2022/08/05 MySQL