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文件,并修改代码增加了通用性,点击这里查看今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

随机推荐

20145234黄斐《Java程序设计》第七周
教材学习内容总结第十二章部分 - Lambda 认识Lambda语法 Lambda去可以重复,符合DRY原则,而且Lambda表达式可读性更好,操作更简单匿名类型最大的问题就在于其冗余的语法,la ...
CodeForces 714A
Description Today an outstanding event is going to happen in the forest — hedgehog Filya will come t ...
Codeforces Round #540 (Div. 3)题解
题目链接: https://codeforces.com/contest/1118 A题: 题意: q次查询,给你一个n,要你用1和2来凑出n,1的花费为a,2的花费为b,求花费的最小值. 思路: 我 ...
24、List三个子类的特点
List的三个子类的特点因为三个类都实现了List接口,所以里面的方法都差不多,那这三个类都有什么特点呢? ArrayList:底层数据结构是数组,查询快,增删慢.线程不安全,效率高. Vector ...
【数据库】SQL经典面试题 - 数据库查询 - 子查询应用二
上节课我们通过子查询,完成了查询的最高分学生的需求,今天我们来学习子查询的分类,以及通过子查询来完成工作中经常遇到一些个性化需求. 子查询概念: 一个SELECT语句嵌套在另一个SELECT语句中,子 ...
WCF ServiceContract，OperationContract
代码如下 [ServiceContract] //服务协定定义 using System.ServiceModel; public interface IInterface1 { [Operation ...
cocos2d-x 日志...
cocos2d-x 日志... http://blog.csdn.net/themagickeyjianan/article/details/39008297http://blog.csdn.net ...
C++模板(Templates)
模板(template)是泛型编程的基础,"泛型"的含义就是没有不依赖具体的数据类型.模板的引入是为了创建一般性的类(模板类)或者函数(模板函数).典型的容器比如迭代器/算法等是泛 ...
Oracle 函数 “判断数据表中不存在的数据，才允许通过”
create or replace function mca_detail_material_val(p_material_code VARCHAR2, --实参 p_material_name VA ...
洛谷P1177快速排序
传送门 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> ...

JavaQuery选择器

1、基本选择器

2、层次选择器

3、属性选择器

4、基本过滤选择器

5、可见性过滤器

JavaQuery选择器的更多相关文章

随机推荐

热门专题