jQuery中的基本选择器（四、一）：* 、 . 、element(直接标签名)、 或者用逗号隔开跟多个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.divCls {
width:180px;
height:180px;
color: white;
border: solid 1px white;
margin-left: 10px;
float: left;
}
.subDivCls {
width:60px;
height:60px;
color:white;
border: solid 1px white;
font-size: 12px;
margin: 5px;
float: right;
}
div span{
border: solid 1px white;
font-size: 12px;
margin-left:5px;
}
.cGreen{background-color: #4CA902}
.cPink{background-color: #ED4A9F}
.cBlue{background-color: #0092E7}
.cCyan{background-color: #01A6A2}
.cYellow{background-color: #DCA112}
.cRed{background-color: #B7103B}
.cPurple{background-color: #792F7C}
.cBlack{background-color: #110F10}
.hide{display: none;}
</style>
<script type="text/javascript">
/*
基本选择器中：有 * 、 . 、element(直接标签名)、 或者用逗号隔开跟多个要选的元素。
*/
$(document).ready(function() {
/* 为其换一个背景色就算是选中了，但是注意addClass之前要保证存在此class */
/* <input type="button" id="btn1" value="选取id为div1的元素"> */
$("#btn1").click(function() {
$("#div1").addClass("cBlack");
});
/* <input type="button" id="btn2" value="选取所有div"> */
$("#btn2").click(function() {
$("div").addClass("cBlack");
});
/* <input type="button" id="btn3" value="选取类为subDivCls的元素"> */
$("#btn3").click(function() {
$(".subDivCls").addClass("cBlack");
});
/* <input type="button" id="btn4" value="选取所有元素"> */
$("#btn4").click(function() {
// $('*').addClass("cBlack"); // 单引号，双引号均可，不敏感。
$("*").addClass("cBlack");
});
/* <input type="button" id="btn5" value="选取类为subDivCls或span元素"> */
$("#btn5").click(function() {
$(".subDivCls, span, #div1").addClass("cBlack");
});
});
</script>
</head>
<body>
<div id="div1" class="divCls cGreen">
id 为div1 的div<br>
<br>
<div class="subDivCls">class为subDivCls的div</div>
</div>
<div id="div2" class="divCls cPink">
id 为div2 的div <br>
<br> <span id="span1">div2里面的span,id为span1</span> <br>
<br>
<div class="subDivCls" style="float: left;">class为subDivCls的div</div>
<div class="subDivCls">class为subDivCls的div</div>
</div>
<div id="div3" class="divCls cBlue" title="itcast">
id 为div3 的div，title为itcast，包含隐藏输入框 <input type="hidden" value="hello">
</div>
<div id="div4" class="divCls cYellow">
id 为div4 的div<br>
<div class="subDivCls" style="float: left;">class为subDivCls的div</div>
<div class="subDivCls" title="itcast">title为itcast</div>
<div class="subDivCls" style="float: left;">class为subDivCls的div</div>
<div class="subDivCls"></div>
</div>
<div style="clear: both;"></div>
<br>
<br>
<hr>
<input type="button" id="btn1" value="选取id为div1的元素">
<input type="button" id="btn2" value="选取所有div">
<input type="button" id="btn3" value="选取类为subDivCls的元素">
<input type="button" id="btn4" value="选取所有元素">
<input type="button" id="btn5" value="选取类为subDivCls或span元素">
</body>
</html>jQuery中的基本选择器（四、一）：* 、 . 、element(直接标签名)、 或者用逗号隔开跟多个的更多相关文章
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- js进阶 10-5 jquery中的层级选择器有哪些
js进阶 10-5 jquery中的层级选择器有哪些 一.总结 一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...
- jQuery中的:input选择器
jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> < ...
- js进阶 10-6 jquery中的属性选择器有哪些
js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...
- jquery 中多条件选择器,相对选择器,层次选择器的区别
一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$(&qu ...
- jQuery中的层级选择器
话不多说,请看效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素
<!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...
- JQuery中的id选择器含有特殊字符时，不能选中dom元素
1.jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素.但是:当id含有特殊字符的时候,是不能选中的 2.jquery的id选择器只支持,单词.阿拉伯数字.下 ...
- JQuery中常用的选择器
属性选择器 1> [attribute] 概述:匹配包含给定属性的元素. 示例 jQuery 代码:$("div[id]") 描述:查找所有含有 id 属性的 div 元素 ...
随机推荐
- 北京大公司二面：了解Redis持久化机制吗？
今日总结 Redis持久化机制:RDB和AOF RDB持久化:定时任务,BGSAVE命令 fork一个子进程生成RDB文件(二进制) AOF持久化:根据配置将写命令存储至日志文件中,顺序写&& ...
- C#/.NET/.NET Core学习视频汇总（持续更新ing）
前言: 之前有很多小伙伴在我的公众号后台留言问有没有C#/.NET/.NET Core这方面相关的视频推荐,我一般都会推荐他们去B站搜索一下.今天刚好有空收集了网上一些比较好的C#/.NET/.NET ...
- MongoDB 基础学习
1.MongoDB 概念解析 SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table collection 数据库表/集合 row docume ...
- Java-数组有关
1.复制数组 复制数组主要有三类方法: 1.使用循环语句逐个赋值数组元素 2.使用System类中的静态方法arraycopy 3.使用clone方法复制数组 对于2,详述如下: arraycopy( ...
- Windows配置深度学习环境详细教程（一）：安装Pycharm和Miniconda、conda环境介绍
序言 对于想要入门Python或者深度学习的初学者而言,配置环境一直是一个令人头疼的问题.相信有许多人经历过安装第三方包失败,安装好了却在使用中报错,安装CUDA.tensorflow.pytorch ...
- VM12升级VM15
之前一直用的12,现在想要升级为15.主要是为了解决kali操作系统版本兼容问题 打开VM12,点击[帮助]-->[软件更新]--> [检查更新] 发现有VM15,点击[了解详情] VM1 ...
- Scrapy+splash报错 Connection was refused by other side
报错信息如下: Traceback (most recent call last): File "/usr/local/lib/python3.7/site-packages/scrap ...
- Aapache Tomcat AJP 文件包含漏洞（CVE-2020-1938）
受影响版本 Apache Tomcat 6 Apache Tomcat 7 < 7.0.100 Apache Tomcat 8 < 8.5.51 Apache Tomcat 9 < ...
- 关于zend guard loard 扩展
官网http://www.zend.com/en/products/loader/downloads#Linux 安装安装在READ.ME中 修改的php.ini是apache那边的 保存,重启下就行 ...
- 外网远程顶级域名连接群晖的WebDAV文件服务映射盘符
外网远程顶级域名连接群晖的WebDAV文件服务映射盘符 https://www.cnblogs.com/delphixx/p/11846546.html 电子文件管理规范 1.手机拍照截屏 ...