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>