!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.8.2.min.js"></script>
<script language="javascript">
//ready 事件的触发时机 ：在整个Html文本在浏览器加载完毕才会触发，图片之类的东西可能没显示出来 。
//相当于在</Html>之后写的脚本 **重要
$(document).ready(function () {
//alert("你好")
$("div div:contains(3)").click(function () {
//一基础过滤
//里面写div ,span是用标签选择器 里面写id 就用id选择器 还有些class==值 是用class 使用class选择器
//如果里面写div 空格div那就是查找 div里面的div（用空格是后代关系）
//div>div （查找父级是div的 div）
//.cc:first查找第一个.cc :first是第一个的意思 :last最后一个 :eq(索引号)找任意一个:lt(索引号)大于某个索引号 :gt(索引号) - 小于某个索引号
//:odd - 奇数个 :even - 偶数个:not(选择器)排除摸一个
//二属性过滤
//div[woqu] [属性名] - 选择拥有这个属性的元素 div[woqu=aaa] [属性名]找属性名等于某个值 [属性名!=aaa]找属性找属性名不等于某个值
//[属性名*=a] - 属性值中包含某个值 [属性名^=a] 属性值是以..开头 [属性名$=a] 属性值是...结尾
//三 内容过滤
//:has(span) - 开始与结束标记之间是否包含某类子元素，如果包含，就选择出来。
//:contains(3) - 开始与结束标记之间是否包含某段文字，如何包含就选择出来。
alert("你们好")//点击触发
}).mouseover(function () {
$(this).css("background-color", "red").css("font-size","48px");//this d等于是#dd 鼠标移动上去背景变成红色 mouseover 鼠标移动上去事件
}).mouseout(function () {
$(this).css("background-color", "white");//this d等于是#dd 鼠标移动下去背景变成白色 mouseout 鼠标离开事件
})
});//ready()是个事件 ，浏览器吧界面的Html代码加载完毕触发
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="dd">
环妹
<div>
一天虐我千百遍
</div>
</div>
<div id="dd" woqu="aaa">
文超
</div>
<div id="dd"class="cc">
<span>1234</span>
小雨
</div>
<div id="dd">
阿辉
</div>
<div id="dd" class="cc">
大梅子
</div>
<div id="dd">
随便乱写
</div>
<span>
a 啊啊
<div>
第三层
</div>
</span>
</div>
</form>
</body>
</html>