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 相关文章推荐
JQuery教学之性能优化
May 14 Javascript
js实现简单的验证码
Dec 25 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
python标准日志模块logging的使用方法
2013/11/01 Python
Python类属性与实例属性用法分析
2015/05/09 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
python输出带颜色字体实例方法
2019/09/01 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
杭州-DOTNET笔试题集
2013/09/25 面试题
便利店的创业计划书
2014/01/15 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
导师鉴定意见
2015/06/05 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
MySQL系列之三 基础篇
2021/07/02 MySQL
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫