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 相关文章推荐
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
js实现扫雷小程序的示例代码
Sep 27 Javascript
vuex 的简单使用
Mar 22 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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 批量删除 sql语句
2009/06/05 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP7内核之Reference详解
2019/03/14 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
javascript实现循环广告条效果
2017/12/12 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
详解React 条件渲染
2020/07/08 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
仓库门卫岗位职责
2013/12/22 职场文书
初中英语教学反思
2014/01/25 职场文书
考试诚信承诺书
2014/05/23 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
二胎满月酒致辞
2015/07/29 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书