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中使用inline函数的问题
Mar 08 Javascript
网上抓的一个特效
May 11 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
js实现聊天对话框
2020/02/08 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python学习小技巧总结
2018/06/10 Python
python pygame模块编写飞机大战
2018/11/20 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
.net面试题
2015/12/22 面试题
个人找工作自荐信格式
2013/09/21 职场文书
大学生求职中的自我评价
2013/10/01 职场文书
打架检讨书500字
2014/01/29 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript