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实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
jQuery实现全选按钮
Jan 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函数)
2006/10/09 PHP
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
php 随机生成10位字符代码
2009/03/26 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
PHP代码加密的方法总结
2020/03/13 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
python difflib模块示例讲解
2017/09/13 Python
美国批发供应商:Kole Imports
2019/04/10 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
采购主管的岗位职责
2013/12/17 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
高中生家长寄语大全
2014/04/03 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript