<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery选择器.aspx.cs" Inherits="JQuery练习.JQuery选择器" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery选择器</title>
<script src="js/jquery-1.5.2.js" type="text/javascript"></script>
<script type="text/javascript">
//ID选择器
$(function () { $("#div1").css("background", "red"); });
$(function () { alert($("#div1").val()); });
$(function () { $("#reShow").click(function () { $("#div1").css("background","blue")}); });
//Name选择器
$(function () {
$("p").click(function () { alert("我是P"); })//隐式迭代,给所有选择出来的元素增加click事件
$("input").click(function () { alert("我是input"); })
});
//CSS选择器
$(function () {
$(".pStyle").click(function () {//注意 千万不能忘记点
alert($(this).text());
});
});
//多条件选择器
//$("p,div,span.menuitem"),同时选择p标签、div标签和拥有menuitem样式的span标签元素
//注意:选择器表达式中的空格不能多不能小,易错
//(1):$("div li")获取div的所有li元素(后代,子,子子代元素)也也是说全部的全速都能获取
//(2):$("div > li")获取div下的直接li子元素(也就是说只能获取div下的li,其他的不能得到)注意空格必须有,但不能增加,否则报错
//(3):$(".document+ div")获取样式名为menuitem之后的第一个div元素(不常用),样式名前的.不能忘记
// (4) :$(".munuitem ~ div")获取样式名为menuitem之后所有的div元素(不常用)
</script>
<style type="text/css">
.pStyle
{
background:url("images/13.jpg");
font:23px;
color:Yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="reset" id="reShow" value="改变颜色" />
<div id="div1">aaa</div>
<p class="pStyle">1</p>
<p class="pStyle">2</p>
<p class="pStyle">3</p>
<p class="pStyle">4</p>
<p class="pStyle">5</p>
<p class="pStyle">6</p>
<p class="pStyle">7</p>
<input class="pStyle" type="text" value="o my gard!" id="txtShow"/>
<!--css样式选择器HTML代码-->
</div>
</form>
</body>
</html>