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 元素 ...
随机推荐
- ESP8266 NodeMCU小白手把手入门（实操篇）以土壤湿度和DHT传感器为例讲解读取传感器的值
物联网使得现实世界中的实体和数字世界比以往任何时候都更紧密地联系在一起.NodeMCU作为其中的一个重要设备,作用之一就是与传感器相连以实现万物互联通讯.这篇关于NodeMCU的实操篇以土壤湿度传感器 ...
- Nacos源码分析-Distro协议概览
温馨提示: 本文内容基于个人学习Nacos 2.0.1版本代码总结而来,因个人理解差异,不保证完全正确.如有理解错误之处欢迎各位拍砖指正,相互学习:转载请注明出处. 什么是Distro协议 今天来分析 ...
- 常用的jquery加载后执行的写法
(function(doc){ })(document); $(function(){ }) jQuery(function(){ }) $(document).ready(function(){ } ...
- Docker简易安装教程
Docker介绍 Docker 是一种开源容器化技术,用于构建和容器化应用程序.Docker 使用客户端-服务器架构.Docker客户端与 Docker守护进程对话,后者负责构建.运行和分发 Dock ...
- Maven之--安装nexus 私服
开始搜索下载了,nexus3.19版本,下来之后,建立一个maven 骨架过程 quickstart,提示没有lgf4j依赖和和maven插件都没有,开始搜索什么原因,猜想是nexus没有索引,右搜索 ...
- SQL SERVER 雨量计累计雨量（小时）的统计思路
PLC中定时读取5分钟雨量值,如何将该值统计为小时雨量作为累计?在sql server group by聚合函数,轻松实现该目的. 1.编写思路 数据库中字段依据datetime每五分钟插入一条语句, ...
- 添加数据时报错：An error occurred while updating the entries. See the inner exception for detail。
场景:前几天在项目开发时,有个bug经常出现,今天花了一整天,终于把它解决了.记录一下解决流程. 解决方法: 主要报错的地方在添加的部分: 1 foreach (var requestProperty ...
- python3中的希尔排序
def shell_sort(alist): n = len(alist) # 初始步长 gap = round(n / 2) while gap > 0: # 按步长进行插入排序 for i ...
- C++ 1//设计立方体类 //创建立方体的类 //设计属性和行为 //获取立方体的面积和体积 //分别利用（全局函数 和 成员函数）判断俩个立方体是否相等
1 //设计立方体类 2 //创建立方体的类 3 //设计属性和行为 4 //获取立方体的面积和体积 5 //分别利用(全局函数 和 成员函数)判断俩个立方体是否相等 6 #include <i ...
- gRPC学习之三：初试GO版gRPC开发
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...