JavaQuery选择器

时间：2017-11-04 20:50:27 阅读：441 评论：0 收藏：0 [点我收藏+]

标签：his height cursor har htm alert 设置 jquer asc

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="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选择器

标签：his height cursor har htm alert 设置 jquer asc

原文地址：http://www.cnblogs.com/yunfeioliver/p/7784162.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行