jQuery分组选择器用法实例


Posted in Javascript onDecember 23, 2014

本文实例讲述了jQuery分组选择器用法。分享给大家供大家参考。具体分析如下:

分组选择器将每一个选择器匹配到的元素合并后一起返回,能够对它们进行相同的操作。

实例代码:

$(".mydiv ,span")

以上代码能够匹配类名为mydiv的元素和所有的span元素。两个选择器之间要用逗号分割。
实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $(".mydiv ,span").css("color","red"); 

  }) 

}) 

</script>

</head>

<body>

  <div class="mydiv">三水点靠木</div>

  <span>三水点靠木欢迎您</span>

  <button>点击查看效果</button>

</body>

</html>

以上代码可以将类名为mydiv的div和span中的字体颜色设置为红色。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
常用的JS验证和函数汇总
Dec 23 #Javascript
jQuery后代选择器用法实例
Dec 23 #Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 #Javascript
javascript实现微信分享
Dec 23 #Javascript
JSON取值前判断
Dec 23 #Javascript
jQuery基础语法实例入门
Dec 23 #Javascript
jQuery回调函数的定义及用法实例
Dec 23 #Javascript
You might like
php htmlspecialchars加强版
2010/02/16 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
许愿墙中用到的函数
2006/10/07 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
优秀食品类广告词
2014/03/19 职场文书
师德师风自我评价范文
2014/09/11 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
任命书格式范文
2015/09/22 职场文书
六年级作文之关于梦
2019/10/22 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
如何使用PyCharm及常用配置详解
2021/06/03 Python
Java常用函数式接口总结
2021/06/29 Java/Android