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 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
vue3.0 上手体验
2020/09/21 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
Python多线程扫描端口代码示例
2018/02/09 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python基于百度云文字识别API
2018/12/13 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python序列化pickle模块使用详解
2020/03/05 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
毕业生简单求职信
2013/11/19 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
高二语文教学反思
2016/02/16 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android