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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
vue实现跨域的方法分析
May 21 Javascript
Js图片点击切换轮播实现代码
Jul 27 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
批量修改RAR文件注释的php代码
2010/11/20 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
浅谈php冒泡排序
2014/12/30 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
python求解水仙花数的方法
2015/05/11 Python
Python使用minidom读写xml的方法
2015/06/03 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Tostadora意大利:定制T恤
2019/04/08 全球购物
日语求职信范文
2013/12/17 职场文书
车辆工程专业求职信
2014/06/14 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python