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实现图片上传前本地预览
Apr 28 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
jQuery trigger()方法用法介绍
2015/01/13 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
一篇.NET面试题
2014/09/29 面试题
自荐信要包含哪些内容
2013/11/06 职场文书
新闻专业推荐信范文
2013/11/20 职场文书
精彩的推荐信范文
2013/11/26 职场文书
工会工作先进事迹
2014/08/18 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
学术会议开幕词
2016/03/03 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技