<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.cls {
background-color: red;
}
</style>
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
//ready的简写 等所有元素加载完
$(function () {
//===============1 复合选择器===========================
//这是复合选择器，依次是id、类、标签
$("#d1,.cls,p").text("★");
//从form1中找
$("#form1 #d1,.cls,p").text("★"); //？？？
//==============2 层次选择器=============================
//找id=wrap div下所有的p元素(儿孙)
$("#wrap p").css("background-color", "pink");
//找id=wrap div下所有的直接子元素p（儿子）
$("#wrap > p").css("background-color", "pink");
//找id=wrap div后紧邻的那个div，必须紧挨着，之间不能有任何元素
$("#wrap + div").css("background-color", "pink");
//找id=wrap div后紧邻的那个p，必须紧挨着，之间不能有任何元素
$("#wrap + p").css("background-color", "pink");
//找id=wrap div后所有的p元素
$("#wrap ~ p").css("background-color", "pink");
//设置行内样式 获取行内样式(值是这个"rgb(255, 192, 203)") ？？？
$("#wrap").css("background-color", "pink"); //如果找不到对象($("#wrap").length<1)，也不会报错
alert($("#wrap").css("background-color"));
//判断对象是否找到
if ($("#wrap").length > 0) {
alert("找到了");
} else {
alert("没找到");
}
//================3操作元素的属性========================
$("#btn").click(function () {
//设置元素的属性
$("#link").attr("href", "http://www.baidu.com");
//获取元素的属性
alert($("#link").attr("href"));
});
$("#btn1").click(function () {
//移除元素属性
$("#link").removeAttr("href");//将元素属性直接删除 源代码中没有了
});
$("#btn2").click(function () {
//行内样式设置
$("#link").attr("style", "color:red");//不推荐这种用法
//1.不灵活 只能设置一个值
//2.不能链式编程
$("#link").css("color", "red").css("....", "....");//推荐使用这种方法
//1.灵活 可以设置多个值 还可以赋值为json数据为参数
//2.能链式编程
//类样式设置
$("#link").attr("class", "cls")
});
//注：使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作
$("#btn3").click(function () {
//使用html()方法读取或设置元素的innerHTML
alert($("#link").html());//<font color="green">百度</font>
$("#link").html("<font color='green'>搜狐</font>");
//使用text()方法读取或设置元素的innerText
alert($("#link").text());//百度
$("#link").text("<font color='green'>搜狐</font>");
$(this).val("好耶");//this是按钮btn3
//$(Dom对象）=》将Dom对象转换成了JQuery对象
//$(字符串)=》标签选择器
});
});
</script>
</head>
<body>
<%--1--%>
<form id="form1" runat="server">
<div id="d1">11111111111111111</div>
<div class="cls">11111111111111111</div>
<div id="d2">111111111111111111111111</div>
<div class="cls">1111111111111111111111111111</div>
<div id="d5">111111111111111111111111111</div>
<div id="d6">11111111111111111111</div>
<p>111111111111111111111</p>
</form>
<p>11111111111111111111111</p>
<%--2--%>
<div id="wrap">
123
<p>我是p</p>
<p>我是p</p>
<div>
我是内层div
<p>我也是p</p>
<p>我也是p</p>
</div>
</div>
<p>P1111111111111111111111</p>
<div>11111111111111111</div>
<div>22222222222222222</div>
<p>P222222222222222222</p>
<a id="link"><font color="green">百度</font></a>
<input id="btn" type="button" value="click" />
<input id="btn1" type="button" value="remove" />
<input id="btn2" type="button" value="样式设置" />
<input id="btn3" type="button" value="html/text" />
</body>
</html>