Jquery的基本使用
导入核心js库页面载入事件（程序入口）确定标签派发的具体事件根据Jq的选择器获取标签对象设置他的属性
Jquery的动画效果
基本效果：hide（毫秒值）/show（毫秒值）滑动效果：slideDown（毫秒值）由上到下显示/slideUp（毫秒值）由下到上隐藏淡入淡出效果：fadeIn（毫秒值）淡入/fadeOut（毫秒值）淡出 图片的显示，隐藏效果
Jquery的定时弹出和隐藏广告
定时弹出隐藏广告
Jquery的选择器
一、基本选择器
$("#id")：ID选择器
$(".class")：类选择器$(“element”)：标签选择器$("*")：通配符选择器$(“selector1,selector2”)：并集选择器
$(function(){
$("#btn1").click(function(){
//id选择器
$("#two").css("background-color","palegreen") ;
//$(".mini").css("background-color","pink") ;//class选择器
//$("div").css("background-color","red") ;//元素选择器
//$("*").css("background-color","greenyellow") ; //通配符选择器$
//$(".mini,span").css("background-color","palegreen") ;//并集选择器
}) ;
}) ;
二、层级选择器
子元素选择器：$(“selsecor1>selector2”)，只找儿子
后代选择器：$(“selsecor1 selector2”)，儿子，孙子都找
相邻兄弟选择器：$(“selsecor1+selector2”)，selsecor1元素后相邻的元素，紧挨着的那个兄弟Sibling选择器：$(“selsecor1~selector2”)selsecor1元素之后指定selector2元素，找到所有和表单同辈的元素，和相邻兄弟选择器相似，可以不紧挨着
$(function(){
$("#btn1").click(function(){
//后代选择器:selector1 selector2
$("body div").css("background-color","palegreen")
}) ;
$("#btn2").click(function(){
// 子元素选择器:父元素>子元素，
$("body > div").css("background-color","palegreen") ;
}) ;
$("#btn3").click(function(){
//选中id为的one相邻兄弟元素 ,one之后的紧挨的一个
$("#one+#two").css("background-color","red") ;
}) ;
$("#btn4").click(function(){
//sibling
$("#two ~ #three").css("background-color","greenyellow") ;
}) ;
三、基本过滤器
过滤掉第一个元素 $(“div”:first) 等价于$(“div”).first()过滤掉当前页面中元素的数量是偶数位：even ； 奇数位：oddlt(index) 小于给定索引值的元素从0开始gt(index) 大于给定索引值的元素从0开始Jq语法给某个元素设置背景（background-color）标签对象.css(“key”,“value”)
$(function(){
$("#btn1").click(function(){
//俩个方法一样
// $("div:first").css("background-color","pink") ;
$("div").first().css("background-color","pink") ;
}) ;
//偶数
$("#btn2").click(function(){
$("div:even").css("background-color","pink") ;
}) ;
//奇数
$("#btn3").click(function(){
$("div:odd").css("background-color","pink") ;
}) ;
/**
* Jquery:
* lt(index) 小于给定索引值的元素从0开始
* gt(index)大于给定索引值的元素从0开始
*/
$("#btn4").click(function(){
$("div:gt(2)").css("background-color","pink") ;
}) ;
}) ;
四、属性选择器
Jq的属性选择器和XML解析:dom解析 xpath技术类似
[]:相当于定语,xxx的标签
Jq:$("标签名称[href]") :将@标记去掉(指定属性名称)
XML解析
xpath:"//list[@id='xx']" :@没有省略
<script src="js/jquery-1.11.0.js"></script>
<script>
$(function(){
//$("标签名称[属性]")
// $("a[href]").css("color","red") ;
//可以指定多个属性
//$("标签名称[属性1][属性2]")
//$("a[href][title]").css("color","green") ;
//指定多个属性,并且确定属性的值
$("a[href][title='test']").css("color","red") ;
});
</script>
</head>
<body>
<a href="#">href 111</a><br />
<a href="#" title="test">href 222</a>
</body>
