<!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(直接标签名)、 或者用逗号隔开跟多个的更多相关文章

  1. jQuery入门(1)jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. js进阶 10-5 jquery中的层级选择器有哪些

    js进阶 10-5 jquery中的层级选择器有哪些 一.总结 一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...

  3. jQuery中的:input选择器

    jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> < ...

  4. js进阶 10-6 jquery中的属性选择器有哪些

    js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...

  5. jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$(&qu ...

  6. jQuery中的层级选择器

    话不多说,请看效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  7. jQuery中的层级选择器(四、二):后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  8. JQuery中的id选择器含有特殊字符时,不能选中dom元素

    1.jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素.但是:当id含有特殊字符的时候,是不能选中的 2.jquery的id选择器只支持,单词.阿拉伯数字.下 ...

  9. JQuery中常用的选择器

    属性选择器 1>  [attribute] 概述:匹配包含给定属性的元素. 示例 jQuery 代码:$("div[id]") 描述:查找所有含有 id 属性的 div 元素 ...

随机推荐

  1. 计算机毕业设计选题大合集,含ssm,springboot,小程序,php,python

    1基于springboot医院急诊系统 2基于springboot校园闲置物品租售系统 3基于springboot校园闲置物品交易网站 4基于springboot图书网站 5基于springboot外 ...

  2. Lesson 11 Not guilty

    Lesson 11 Not guilty guilty ['gɪlti] adj. 有罪的:内疚的 be guilty of - He is guilty of murder. be innocent ...

  3. 【贪心】数列分段Section I luogu-1181

    题目描述 对于给定的一个长度为\(N\)的正整数数列\(A_i\),现要将其分成连续的若干段,并且每段和不超过\(M\)(可以等于\(M\)),问最少能将其分成多少段使得满足要求. 分析 简单思考一下 ...

  4. via浏览器和Alook浏览器插件安装

    via和Alook是Android和IOS上可以支持JS插件的浏览器,一些常用的插件可以在via-app.cn上找到.但总会有人会思考点击安装按钮的是怎样将JS脚本代码安装到浏览器的. 经过对页面代码 ...

  5. flutter 解决无法安装或者安装依赖慢的问题

    配置以下两个系统环境变量 右击计算机 --> 属性 --> 高级系统设置 --> 环境变量 PUB_HOSTED_URL : https://pub.flutter-io.cn FL ...

  6. js中变量提升和函数提升

    变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...

  7. [考试总结]noip模拟33

    连炸两场... 伤心... 第一个题目首先因为有期望坐镇,然后跳过... 然后第二个题目发现题目挺绕的,然后转化了一句话题意,然后..... \(\huge{\text{转化错了!!!!}}\) 然而 ...

  8. Java书单-比较全的一篇

    本文已收录至码云:https://gitee.com/jalon2015/java-book 前言 之前写过一篇,Java核心书单,里面涵盖了几本主要的Java书籍: 后来有朋友反馈说,这几本太少了, ...

  9. CF466C 题解

    Description 给定一个数组,求有多少组 \(i,j\) 将整个数组分成和相等的三个数组. Solution 从左往右看一遍,记录每一个 \(i\) 使得 \(\sum_{k=1}^i a_k ...

  10. vue日记②之兼容各种情况的可跳转链接

    兼容各种情况的可跳转链接 需求 因为聊天气泡颜色原因,发送出去的链接通常模糊不清,而且不能直接跳转,所以我打算已a链接的显示直接抓取所有的网页链接,同时还要兼容富文本框的直接输入图片 这是运行效果 实 ...