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中setAttribute用法介绍
Jul 20 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
JavaScript变量声明详解
Nov 27 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
Vue防止白屏添加首屏动画的实例
Oct 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
用javascript操作xml
2006/11/04 Javascript
用javascript获取地址栏参数
2006/12/22 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python处理文本换行符实例代码
2018/02/03 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
Python调用C/C++的方法解析
2020/08/05 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
区域销售经理岗位职责
2013/12/10 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android