<!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. 微信小程序云开发-数据库-用户更新数据并提交

    一.wxml增加input输入框和[更新商品价格]按钮 在商品详情页新增[更新商品价格]按钮,wxml新增部分代码,input绑定事件,用于获取用户输入的内容.按钮绑定事件,用于更新商品价格.  二. ...

  2. 扩展欧几里得(exgcd)-求解不定方程/求逆元

    贝祖定理:即如果a.b是整数,那么一定存在整数x.y使得ax+by=gcd(a,b).换句话说,如果ax+by=m有解,那么m一定是gcd(a,b)的若干倍.(可以来判断一个这样的式子有没有解)有一个 ...

  3. js循环修改对象内层元素的值

    问题:存在一个对象,该对象的内部元素也为对象,子对象的元素也为对象,...(即多层对象构成的对象,具体如下),那么应该如何修改最内层元素的值(如 obj.a.a.a = 5)? var obj = { ...

  4. 搭建MySQL主从实现Django读写分离

    一.MySQL主从搭建 主从配置原理: 主库写日志到 BinLog 从库开个 IO 线程读取主库的 BinLog 日志,并写入 RelayLog 再开一个 SQL 线程,读 RelayLog 日志,回 ...

  5. open jdk 绿色版 下载

    https://adoptopenjdk.net/ 是 rethat 的 openjdk 地址, jdk 11 , 进入页面后搜索 : jdk_x64_windo , 下载 zip 绿色版的那个. h ...

  6. videojs文档翻译Guides-Plugins

    Video.js Plugins Video.js的一大优势在于其插件生态系统,允许来自世界各地的作者分享他们的视频播放器定制.这包括从最简单的UI调整到新的播放技术和资源处理程序的一切! 因为我们将 ...

  7. Linux系统进入redis并查询值

    1.进入redisredis-cli -h ip -p port2.查看具体信息info 3.得到redis中存储的所有key值KEYS *4.获取指定key值的value值get "key ...

  8. tp phpexcel 导入后台访问方法

    public function addall(){ $Water = M('Waterrate'); $config = array( 'maxSize' => 0, 'rootPath' =& ...

  9. 【Java经验分享篇01】小白如何开始学会看开源项目？

    目录 前言 1.理解开源 1.1.什么是开源? 1.2.开源的定义 1.2.1.开源软件优点 1.2.2.经典开源软件案例 1.3.关于开源协议 1.3.1.如何选择开源协议 2.如何查找开源项目 2 ...

  10. DC-6靶机

    仅供个人娱乐 靶机信息 下载地址:https://download.vulnhub.com/dc/DC-6.zip 一.主机发现 nmap -sn 192.168.216.0/24 二.端口扫描 nm ...