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

2024-02-22 07:06:20

本文实例讲述了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常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

jQuery 复合选择器应用的几个例子
使用jquery选择器如何获取父级元素、同级元素、子元素
jquery选择器之属性过滤选择器详解
JQuery 选择器、过滤器介绍
jQuery Selector选择器小结
Jquery选择器中使用变量实现动态选择例子
JQuery中$之选择器用法介绍
jquery选择器排除某个DOM元素的方法（实例演示）
jquery获取css中的选择器(实例讲解)
jquery 属性选择器（匹配具有指定属性的元素）

jquery 属性选择器（匹配具有指定属性的元素）

jQuery 选择器在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("
jquery获取css中的选择器(实例讲解)

开始写之前先复习一下元素和节点的区别: 元素是W3C文档对象模型(DOM)当中使用最广泛的节点之一. 元素拥有关联的"属性". XmlElement类拥有许多方法来访问它的"属性"(GetAttribute, SetAttribute, RemoveAttribute, GetAttributeNode, 等等). 你也可以使用"Attributes"属性来返回一个支持"名字"或者"序号"访问的"
jquery选择器排除某个DOM元素的方法（实例演示）

jquery选择器众多,使用选取某个DOM的方法有很多种,如何在选取的某个元素集上面做一些排除呢?下面通过几个实例说明: 1.选择所有的img元素,排除class=phpernote的元素的个数: 复制代码代码如下: $('img:not(.phpernote)').length();//或者$('img').not('.phpernote').length(); 2.获取id=phpernote下面所有没有class=com的li元素的个数复制代码代码如下: $('#phpernote
jQuery 复合选择器应用的几个例子

 一. 复合选择器对checkbox的相关操作 <input type="checkbox" id="ckb_1" /> <input type="checkbox" id="ckb_2" disabled="true" /> <input type="checkb
使用jquery选择器如何获取父级元素、同级元素、子元素

一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素复制代码代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu
jQuery Selector选择器小结

//jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#
JQuery中$之选择器用法介绍

1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素.下面举个例子来说明一下: HTML代码 <input name="newsletter" /> <input name="milkman" /&g
JQuery 选择器、过滤器介绍

今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts
Jquery选择器中使用变量实现动态选择例子

例子一: <table> <tr> <th>用户名</th> <th>状态</th> <tr> <tr> <td>张三</td> <td data-uid="10000">正常</td> <tr> <tr> <td>李四</td> <td data-uid="10001"
jQuery中复合选择器简单用法示例

本文实例讲述了jQuery中复合选择器简单用法.分享给大家供大家参考,具体如下: 一介绍复合选择器将多个选择器(可以是ID选择器.元素选择或是类名选择器)组合在一起,两个选择器之间以逗号","分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象. 多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个选择器匹配的元素合并后一起返回. 复合选择器的使用方法如下: $(&
jQuery中内容过滤器简单用法示例

本文实例讲述了jQuery中内容过滤器简单用法.分享给大家供大家参考,具体如下: 一介绍内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选.内容过滤器共包括:contains(text).:empty.:has(selector)和:parent4种,如下表所示. 过滤器说明示例 contains(text) 匹配包含给定文本的元素 $("li:contains('DOM')") //匹配含有"DOM"文本内容的li元素 :emp
jQuery中extend函数简单用法示例

本文实例讲述了jQuery中extend函数简单用法.分享给大家供大家参考,具体如下: var result=$.extend({},item,item1); extend给对象添加新的属性:js插件经常使用来配置参数 {}:item和item1合并后的结果 item:默认属性 item1:新增属性,如果item1和item属性重合则会覆盖item1中的属性 <span id="Test"></span> var item={"name":&
jQuery中可见性过滤器简单用法示例

本文实例讲述了jQuery中可见性过滤器简单用法.分享给大家供大家参考,具体如下: 一介绍元素的可见状态有两种,分别是隐藏状态和显示状态.可见性过滤器就是利用元素的可见状态匹配元素的.因此,可见性过滤器也有两种,一种是匹配所有可见元素的:visible过滤器,另一种是匹配所有不可见元素的:hidden过滤器. 在应用:hidden过滤器时,display属性是none以及input元素的type属性为hidden的元素都会被匹配到. 二应用获取页面上隐藏和显示的input元素的值三代
jQuery分组选择器简单用法示例

本文实例讲述了jQuery分组选择器简单用法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery分组选择器</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js
jQuery中过滤器的基本用法示例

本文实例讲述了jQuery中过滤器的基本用法.分享给大家供大家参考,具体如下: HTML正文: <input type="button" id="b1" value="偶数行红色"><br> <input type="button" id="b2" value="奇数行绿色"><br> <table border=1 width=&q
Android开发中CheckBox的简单用法示例

本文实例讲述了Android开发中CheckBox的简单用法.分享给大家供大家参考,具体如下: CheckBox是一种在界面开发中比较常见的控件,Android中UI开发也有CheckBox,简单的说下它的使用,每个CheckBox都要设置监听,设置的监听为CompouButton.OnCheckedChangedListener(). package com.zhuguangwei; import android.app.Activity; import android.os.Bundle;
Python中str.join()简单用法示例

本文实例讲述了Python中str.join()简单用法.分享给大家供大家参考,具体如下: Python join() 方法用于将序列中的元素以指定的字符连接生成一个新的字符串.其中,序列中的元素应是字符串类型. join()方法语法: str.join(sequence) 例子: >>> str='-' >>> l=['2016','5','9'] >>> t=('2016','5','9') >>> str.join(l) '20
php中preg_replace_callback函数简单用法示例

本文实例讲述了php中preg_replace_callback函数用法.分享给大家供大家参考,具体如下: mixed preg_replace_callback ( mixed pattern, callback callback, mixed subject [, int limit] ) 本函数的行为几乎和 preg_replace() 一样,除了不是提供一个 replacement 参数,而是指定一个 callback 函数.该函数将以目标字符串中的匹配数组作为输入参数,并返回用于替换的
Yii2中关联查询简单用法示例

本文实例讲述了Yii2中关联查询用法.分享给大家供大家参考,具体如下: 有两张表,post和category,post.cate_id对应category.id 使用Gii上升这两张表的model 然后post的model中有如下代码 public function getCate() { return $this->hasOne(Category::className(), ['id' => 'cate_id']); } 在post这个model最下面在添加如下方法即可获取关联表内容 pub

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

您可能感兴趣的文章:

相关推荐

随机推荐