jQuery中复合选择器简单用法示例


Posted in jQuery onMarch 31, 2018

本文实例讲述了jQuery中复合选择器简单用法。分享给大家供大家参考,具体如下:

一 介绍

复合选择器将多个选择器(可以是ID选择器、元素选择或是类名选择器)组合在一起,两个选择器之间以逗号“,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象。

多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个选择器匹配的元素合并后一起返回。
复合选择器的使用方法如下:

$(" selector1,selector2,selectorN");

selector1:为一个有效的选择器,可以是ID选择器、无素选择器或是类名选择器等。

selector2:为另一个有效的选择器,可以是ID选择器、无素选择器或是类名选择器等。

selectorN:(可选择)为任意多个选择器,可以是ID选择器、无素选择器或是类名选择器等。

例如,要查询文档中的全部的<span>标记和使用CSS类myClass的<div>标记,可以使用下面的jQuery代码:

$("span,div.myClass");

二 应用

在页面添加3种不同元素并统一设置样式。使用复合选择器筛选<div>元素和id属性值为span的元素,并为它们添加新的样式。

三 代码

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<p class="default">p元素</p>
<div class="default">div元素</div>
<span class="default" id="span">ID为span的元素</span>
<input type="button" value="为div元素和ID为span的元素换肤" />
<script type="text/javascript">
$(document).ready(
function()
{
  $("input[type=button]").click(
  function() //绑定按钮的单击事件
  {
    var myClass = $("div,#span");   //选取DOM元素
    myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色
    myClass.css("color","#FFF");  //为选取的DOM元素设置文字颜色
  });
});
</script>

四 运行效果

jQuery中复合选择器简单用法示例

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

jQuery 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 #jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 #jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 #jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 #jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 #jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
You might like
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
js数据类型检测总结
2018/08/05 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
JavaScript简单编程实例学习
2020/02/14 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
使用python为mysql实现restful接口
2018/01/05 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python中安装django模块的方法
2020/03/12 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
python打包生成so文件的实现
2020/10/30 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
高中毕业生自我鉴定范文
2013/09/26 职场文书
接待员岗位职责
2015/02/13 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android