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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
js实现照片墙功能实例
Feb 05 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 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
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php生成随机颜色的方法
2014/11/13 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
员工团队活动方案
2014/08/28 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
太行山上观后感
2015/06/05 职场文书
闪闪红星观后感
2015/06/08 职场文书
主婚人致辞精选
2015/07/28 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书