jquery选择器之筛选选择器

最新推荐文章于 2024-04-13 00:41:34 发布

kevin_love_it

最新推荐文章于 2024-04-13 00:41:34 发布

阅读量557

点赞数

分类专栏： javaScript/jquery 文章标签： css html javascript jquery jsp

本文链接：https://blog.csdn.net/kevin_love_it/article/details/78556776

版权

javaScript/jquery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

jquery筛选选择器

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script src="../../Document/lib/jquery-3.2.1.min.js"></script>
	<title>jquery 选择器</title>
	<style type="text/css">
	.focused {
		background: #abcdef;
	}
	</style>
</head>
<body>
	<h2>基本筛选器</h2>
	<div style="width:100%;background-color:#dcdcdc">
		<ul>
			<li>list form1</li>
			<li>list form2</li>
			<li>list form3</li>
			<li>list form4</li>
			<li>list form5</li>
		</ul>

		<input name="apple" />
		<input name="flower" checked="checked" />

		<table>
			<tr><td>Header 1</td></tr>
			<tr><td>Value 1</td></tr>
			<tr><td>Value 2</td></tr>
		</table>

		<h1>Header 1</h1>
		<p>Contents 1</p>
		<h2>Header 2</h2>
		<p>Contents 2</p>

		<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
		<button class="btn1">Animate</button>
		<button class="btn2">Reset</button>

		<div id="content">
			<input tabIndex="1">
			<input tabIndex="2">
			<select tabIndex="3">
				<option>select menu</option>
			</select>
			<div tabIndex="4">
				a div
			</div>
		</div>

		<div id="did02" style="background-color:red">
			<p id="pid01">这是一个段落。</p>
			<button id="btn03">请点击这里</button>
		</div>
	</div>
	<script type="text/javascript">
		// 类似于css中的伪类

		// :first
		// :not(selector)
		// :even
		// :odd
		// :eq(index)
		// :gt(index)
		// :lang1.9+
		// :last
		// :lt(index)
		// :header
		// :animated
		// :focus
		// :root1.9+
		// :target1.

		// alert($("ul:first"));
		// alert($("tr:last").text());		

		// alert($("input:not(:checked)")[0].name);// apple

		// alert($("tr:even")[1]);// 获取索引值为偶数的元素
		// alert($("tr:odd").text());// 获取索引值为奇数的元素

		// alert($("tr:eq(0)").text());
		// alert($("tr:gt(0)").text());
		// alert($("tr:lt(1)").text());

		// animate动画效果
		$(document).ready(function()
		{
			$(".btn1").click(function(){
				$("#box").animate({height:"300px"});
			});
			$(".btn2").click(function(){
				$("#box").animate({height:"100px"});
			});
		});

		// 聚焦和失焦时触发类选择器
		$( "#content" ).delegate( "*", "focus blur", function( event ) {
			var elem = $( this );
			setTimeout(function() {
				elem.toggleClass( "focused", elem.is( ":focus" ) );
			}, 0);
		});

		// 点击按钮触发隐藏或显示事件
		$("#did02").delegate("#btn03","click",function(){
			$("#pid01").slideToggle();
		});

		$(":root").css("background-color","#4791FF");
	</script>
</body>
</html>