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 Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery实现简单三级联动效果
Sep 05 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语法速查表
2006/12/06 PHP
PHP 编程安全性小结
2010/01/08 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
详解vue slot插槽的使用方法
2017/06/13 Javascript
解读ES6中class关键字
2017/11/20 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Python 元类实例解析
2018/04/04 Python
django-allauth入门学习和使用详解
2019/07/03 Python
实例详解Python装饰器与闭包
2019/07/29 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
教师师德演讲稿
2014/05/06 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
研修心得体会
2014/09/04 职场文书
与美同行演讲稿
2014/09/13 职场文书
汽车转让协议书范本
2014/12/07 职场文书
期末复习计划
2015/01/19 职场文书
自主招生专家推荐信
2015/03/26 职场文书