JavaQuery选择器

1、基本选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css">
	#box {
	background-color: #FFF;
	border: 2px solid #000;
	padding: 5px;
	}
	</style>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(function() {
	$("#btn1").click(function() {//触发不同的效果按钮点击事件
	//标签选择器，获取<h3>元素并为其添加背景颜色
	//$("h3").css({"background":"red"});
	//类选择器，获取并设置所有class为title的元素的背景颜色
	//$(".title").css({"background":"red"});
	//ID选择器，获取并设置id为box的元素的背景颜色
	//$("#box").css({"background":"red"});
	//并集选择器，获取并设置所有<h2>、<dt>、class为title的元素的背景颜色
	//$("h2,dt,.title").css({"background":"red"});
	//交集选择器，获取并设置所有class为title的<h2>元素的背景颜色
	//$("h2.title").css({"background":"red"});
	//全局选择器，改变所有元素的字体颜色
	$("*").css({"background":"red"});
	})
	});
	</script>
	<body>
	<input type="button" id="btn1" value="显示效果" />
	<div id="box">
	id为box的div
	<h2 class="title">class为title的h2</h2>
	<h3 class="title">class为title的h3</h3>
	<h3>热门排行</h3>
	<dl>
	<dt>
	<img src="data:images/case_1.gif" width="93" height="99" alt="斗地主" />
	</dt>
	<dd class="title">斗地主</dd>
	<dd>休闲游戏</dd>
	<dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
	</dl>
	</div>
	</body>
	</html>

2、层次选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>层次选择器</title>
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	line-height: 30px;
	}

	body {
	margin: 10px;
	}

	#menu {
	border: 2px solid #03C;
	padding: 10px;
	}

	a {
	text-decoration: none;
	margin-right: 5px;
	}

	span {
	font-weight: bold;
	padding: 3px;
	}

	h2 {
	margin: 10px 0;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div id="menu">
	<h2 title="点击看效果">全部旅游产品分类</h2>
	<dl>
	<dt>
	北京周边旅游<span>特价</span>
	</dt>
	<dd>
	<a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a>
	</dd>
	</dl>

	<dl>
	<dt>景点门票</dt>
	<dd>
	<a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a>
	</dd>
	<dd>
	<a href="#">山水</a> <a href="#">双休</a>
	</dd>
	</dl>
	<span>更多分类</span>
	</div>



	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">

	$(document).ready(function() {
	$("h2").click(function() {//点击h2标题时触发的事件
	//后代选择器，获取并设置#menu下的<span>元素的背景颜色
	//$("#menu span").css({"background":"red"});
	//子选择器，获取并设置#menu下的子元素<span>的背景颜色
	//$("#menu>span").css({"background":"red"});
	//相邻选择器，获取并设置紧接在<h2>元素后的<dl>元素的背景颜色
	//$("h2+dl").css({"background":"red"});
	//同辈选择器，获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色
	$("h2~dl").css({"background":"red"});
	});
	});
	</script>






	</body>
	</html>

3、属性选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	#box {
	background-color: #FFF;
	border: 2px solid #000;
	padding: 5px;
	}

	h2 {
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div id="box">
	<h2 class="odds" title="cartoonlist">动画列表</h2>
	<ul>
	<li class="odds" title="kn_jp">名侦探柯南</li>
	<li class="evens" title="hy_jp">火影忍者</li>
	<li class="odds" title="ss_jp">死神</li>
	<li class="evens" title="yj_jp">妖精的尾巴</li>
	<li class="odds" title="yh_jp">银魂</li>
	<li class="evens" title="hm_da">黑猫警长</li>
	<li class="odds" title="xl_ds">仙履奇缘</li>
	</ul>
	</div>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(function() {
	$("h2").click(function() {
	//改变含有title属性的<h2>元素的背景颜色
	//$("h2[title]").css({"background":"red"});
	//改变class属性的值为odds的元素的背景颜色
	// $("[class='odds']").css({"background":"red"});
	//改变id属性的值不为box的元素的背景颜色
	//$("[id!='box']").css({"background":"red"});
	//改变title属性的值中以h开头的元素的背景颜色
	//$("[title^='h']").css({"background":"red"});
	//改变title属性的值中以jp结尾的元素的背景颜色
	//$("[title$='jp']").css({"background":"red"});
	//改变title属性的值中含有s的元素的背景颜色
	//$("[title*='s']").css({"background":"red"});
	//改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色
	$("li[class][title*='y']").css({"background":"red"});
	});
	});
	</script>
	</body>
	</html>

4、基本过滤选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>基本过滤选择器</title>
	</head>
	<body>
	获取焦点：<input type="text">
	<h1>h1网络小说</h1>
	<h2>h2网络小说</h2>
	<h3>h3网络小说</h3>
	<h4>h4网络小说</h4>
	<ul>
	<li>王妃不好当</li>
	<li>致命交易</li>
	<li class="three">迦兰寺</li>
	<li>逆天之宠</li>
	<li>交错时光的爱恋</li>
	<li>张震鬼故事</li>
	<li>第一次亲密接触</li>
	</ul>


	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(function() {
	$("h2").click(function(){
	//改变第1个<li>元素的背景颜色
	//$("li:first").css({"color":"red"});
	//改变最后一个<li>元素的背景颜色
	//$("li:last").css({"color":"red"});
	//改变class不为three的<li>元素的背景颜色
	//$("li:not(.three)").css({"color":"red"});
	//改变索引值为偶数的<li>元素的背景颜色
	//$("li:even").css({"color":"red"});
	//改变索引值为奇数的<li>元素的背景颜色
	//$("li:odd").css({"color":"red"});
	//改变索引值等于1的<li>元素的背景颜色
	//$("li:eq(1)").css({"color":"red"});
	//改变索引值大于1的<li>元素的背景颜色
	// $("li:gt(1)").css({"color":"red"});
	//改变索引值小于1的<li>元素的背景颜色
	//$("li:lt(1)").css({"color":"red"});
	//改变所有标题元素，例如<h1>,<h2>,<h3>……这些元素的背景颜色
	//$(":header").css({"color":"red"});
	});
	//改变当前获取焦点的元素的背景颜色
	$("input").click(function(){
	//让获取焦点的元素改变背景色
	alert("是否获取焦点："+$(this).is(":focus"));
	$(":focus").css({"background":"red"});
	})
	});
	</script>
	</body>
	</html>

5、可见性过滤器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>可见性过滤器</title>
	</head>
	<body>
	<button id="show">show</button>
	<button id="hide">hide</button>
	<div>显示1</div>
	<div>显示2</div>
	<div style="display:none">显示3</div>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(function() {
	//点击show按钮触发的事件
	$("#show").click(function(){
	$(":hidden").show();
	});
	//点击hide触发的事件
	$("#hide").click(function(){
	$("div:visible").hide();
	});



	});
	</script>

	</body>
	</html>

JavaQuery选择器的更多相关文章

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
CSS 选择器及各样式引用方式
Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...
jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
jq选择器基础
Jquery $代表选择器使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）
转载注明出处改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

随机推荐

谈谈Flash图表中数据的采集
一般来说flash中的数据是不能被现有技术很容易采集到的,但是也不能谈flash色变,要具体问题具体分析,有些flash是可以通过一些分析发现背后的数据.然后采集就变得很容易了. 具体案例:搜房房价走 ...
【树】ztree
ztree前端参见官网http://www.ztree.me/v3/main.php Action示例 public String initLabServerTree(){ return SUCCES ...
c++ ACM常用函数
1 保留小数点后两位 #include <iomanip> cout << setiosflags(ios::fixed) << setprecision(2)&l ...
MongoDB以Windows Service运行
以Administrator身份打开CMD并输入以下命令 cd D:\Developer\MongoDB\mongodb-win32-x86_64-2.4.6\binD:mongod --logpat ...
ubuntu 18.04 安装 flash
下载源码包, 解压 sudo cp Downloads/flash_player_npapi_linux.x86_64/libflashplayer.so /usr/lib/mozilla/plugi ...
使用RegSetValueEx修改注册表时遇到的问题（转）
原文转自 http://blog.csdn.net/tracyzhongcf/article/details/4076870 1.今天在使用RegSetValueEx时发现一个问题: RegSetVa ...
大数据系列之数据仓库Hive原理
Hive系列博文,持续更新~~~ 大数据系列之数据仓库Hive原理大数据系列之数据仓库Hive安装大数据系列之数据仓库Hive中分区Partition如何使用大数据系列之数据仓库Hive命令使用 ...
bzoj 1034 泡泡堂BNB
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1034 题解: 很明显的贪心,读过田忌赛马的典故就很容易能想出来,分成三种情况讨论: < ...
Nginx - 压缩模块
1. 前言在 Nginx 中与网页压缩相关的模块有两个:一个是 HttpGzipModule,另一个是 HttpGzipStaticModule.前者用于启用在文件传输过程中使用 gzip 压缩,而 ...
洛谷P1266速度限制
传送门啦看起来是一个最短路问题,但是引入了速度限制,就要写一下二维最短路了. $ dis[i][j] $ :表示到i这个点,速度为j的最短时间. #include <iostream> ...

JavaQuery选择器

1、基本选择器

2、层次选择器

3、属性选择器

4、基本过滤选择器

5、可见性过滤器

JavaQuery选择器的更多相关文章

随机推荐

热门专题