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 css float属性的特殊写法
Nov 13 Javascript
jQuery Ajax之load()方法
Oct 12 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 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中break及continue两个流程控制指令区别分析
2011/04/18 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
javascript延时加载之defer测试
2012/12/28 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
python网络编程之读取网站根目录实例
2014/09/30 Python
python修改操作系统时间的方法
2015/05/18 Python
Python中特殊函数集锦
2015/07/27 Python
python中实现k-means聚类算法详解
2017/11/11 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
使用Python处理BAM的方法
2018/09/28 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
django使用xadmin的全局配置详解
2019/11/15 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
应届生求职推荐信
2013/10/28 职场文书
二年级学生评语大全
2014/04/23 职场文书
医院院务公开实施方案
2014/05/03 职场文书
新学期开学演讲稿
2014/05/24 职场文书
高三英语教学计划
2015/01/23 职场文书
医院病假条范文
2015/08/17 职场文书