jQuery选择器--selector1,selector2,selectorN和ancestor descendant
selector1,selector2,selectorN
概述
将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
参数
selector1 一个有效的选择器；selector2 另一个有效的选择器；selectorN 任意多个有效选择器
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<title></title>
<script>
$(document).ready(function() {
$("button").click(function() {
//selector1,selector2,selectorN选择器
$("#li,p,.main").css("color", "#0000FF");
});
});
</script>
<style>
.main {
color: #FF0000;
}
</style>
</head> <body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<ol>
<li id="li">Java</li>
<li class="main">C#</li>
</ol>
<button>点击按钮</button>
</body> </html>
ancestor descendant
概述
在给定的祖先元素下匹配所有的后代元素
参数
ancestor 任何有效选择器；descendant 用以匹配元素的选择器，并且它是第一个选择器的后代元素
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<title></title>
<script>
$(document).ready(function() {
$("button").click(function() {
//ancestor descendant选择器
$("div p").css("color", "#0000FF");
$("div ol li[name='java']").css("color","#FF0000");
});
});
</script>
</head> <body>
<div>
<p>第一个段落。</p>
<p>第二个段落。</p>
<ol>
<li name="java">Java</li>
<li>C#</li>
</ol>
</div>
<button>点击按钮</button>
</body> </html>
jQuery选择器--selector1,selector2,selectorN和ancestor descendant的更多相关文章
- [selector1][selector2][selectorN]
复合属性选择器,需要同时满足多个条件时使用. 描述: 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的 HTML 代码: <input id="man-news& ...
- JQuery制作网页—— 第六章 jQuery选择器
1.jQuery选择器:jQuery选择器类似于CSS选择器,用来选取网页中的元素. Eg:$("h3").css("background",&qu ...
- Jquery学习总结（5）——jQuery选择器
1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签</p> <p id="not">这 ...
- jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery-强大的jQuery选择器 (详解)[转]
1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $(&quo ...
- 精通jQuery选择器
虽然jQuery上手简单,相比于其他库学习起来较为简单,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的方法和内部变化有上千种之多.初学者常常感到,入门很方便,提高很困难.本文的目标是 ...
- jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- jQuery 选择器语法
jQuery选择器分为如下几类(点击“名称”会跳转到此方法的jQuery官方说明文档): 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId&quo ...
随机推荐
- LeetCode 706 Design HashMap 解题报告
题目要求 Design a HashMap without using any built-in hash table libraries. To be specific, your design s ...
- 使用U盘为虚拟机安装系统
前提:使用虚拟机安装WIN8系统时,由于WIN8镜像文件大于4G无法使用虚拟安装,所以使用U盘安装. 1.装有U盘启动的WINPe系统 (1)下载 老毛桃U盘启动盘制作工具 (2)U盘清空 2.虚拟机 ...
- TMS WEB Core v1.2预览版：新的Electron应用程序支持
2019年2月20日,星期三 几个月前,我们已经开始与Electron进行实验.在工作概念验证之后,我们的目标是为Delphi开发人员尽可能多地包装Electron API.但当然不仅仅是可以使用的E ...
- AT2134 Zigzag MST 最小生成树
正解:最小生成树 解题报告: 先放下传送门QAQ 然后这题,首先可以发现这神奇的连边方式真是令人头大,,,显然要考虑转化掉QAQ 大概看一下可以发现点对的规律是,左边++,交换位置,再仔细想下,就每个 ...
- 内核atom机制
内核版本:linux2.6.22.6 硬件平台:JZ2440 驱动源码 atom_ipc_poll_key_int_drv.c : #include <linux/module.h> #i ...
- 对集合类的属性进行kvo观察
在进行容器对象操作时,先调用下面方法通过key或者keyPath获取集合对象,然后再对容器对象进行add或remove等操作时,就会触发KVO的消息通知了. - (NSMutableArray *)m ...
- s3存储桶：s3可扩展的云存储
S3(Simple Storage Service,简单存储服务),即可扩展的云存储,又称桶存储,S3 是一种面向 Internet 的存储服务.S3为任意类型的文件提供临时或永久的存储服务.用于存储 ...
- 009-docker-安装-redis:5.0.3
1.搜索镜像 docker search redis 2.拉取合适镜像 docker pull redis:5.0.3 docker images 3.使用镜像 docker run -p 6379: ...
- 003-RFC关于媒体类型说明
一.概述 RFC-822 Standard for ARPA Internet text messages [ARPA互连网文本信息标准]RFC-2045 MIME Part 1: Format ...
- css中 ~的作用
这是 CSS3 element1~element2 选择器 定义和用法 element1~element2 选择器 element1 之后出现的所有 element2. 两种元素必须拥有相同的父元素, ...