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 相关文章推荐
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jQuery实现动态操作table行
Nov 23 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加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
javascript实现微信分享
2014/12/23 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python中threading模块join函数用法实例分析
2015/06/04 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
分公司经理岗位职责
2013/11/11 职场文书
家长会学生演讲稿
2014/04/26 职场文书
小摄影师教学反思
2014/04/27 职场文书
班级旅游计划书
2014/05/03 职场文书
宣传标语大全
2014/07/01 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
初中信息技术教学反思
2016/02/16 职场文书