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+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
Javascript动画效果(3)
Oct 11 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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制作静态网站的模板框架(二)
2006/10/09 PHP
php 远程关机操作的代码
2008/12/05 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP静态成员变量
2017/02/14 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
vue实现点击图片放大效果
2017/08/15 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python类属性的延迟计算
2016/10/22 Python
Python中with及contextlib的用法详解
2017/06/08 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
个人授权委托书范本
2014/04/03 职场文书
小学领导班子对照材料
2014/08/23 职场文书
安全环保演讲稿
2014/08/28 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书