简介
JQuery本质是一个js文件，里面是js常用功能的封装。比如绑定事件，修改内容，修改样式等。
$()是一个函数，是jQuery()的简写，它的一些重载函数见下。
$(elements)
将一个或多个dom对象(原生js获取到的dom对象)转化为jQuery对象。
$('#id1').html() //返回id为id1的jQuery对象，然后调用html()方法。此方法依然返回jQuery对象，可以链式调用。
document.getElementById(“id1”).innerHTML；//等同于上一句$(callback)
等同于$(document).redy(callback)，dom文档加载完毕后再执行。例 $(function(){alert('hi')});
$(selector)
最常用的，根据选择器选择元素并转化为jQuery对象返回。
获得
引用可以放在<head>标签对内或<body>中最后的位置。
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
一个例子：
$(selector)用法
| 语法 | 描述 |
|---|---|
| $(this) | 当前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
| $("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
$("#p1").css("color","red").slideUp(2000).slideDown(2000);//"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动
问：.$("div#intro .head") 选择器选取哪些元素？
正确答案：id="intro" 的首个 div 元素中的 class="head" 的所有元素。
常用动画
$(selector).hide(speed,callback) //隐藏选择的元素，speed为隐藏动画效果，单位为millisecond；callback为执行完后调用的函数。
fadeIn 淡入；fadeOut淡出；fadeToggle淡入淡出交替；函数参数都一样为$(selector).fadeIn(speed,callback);
slideDown 元素下滑显示 slideUp元素上滑收起 slideToggle 元素下滑显示、上滑收起交替；函数参数都一样为$(selector).slideDown(speed,callback);
$(selector).stop(stopAll,goToEnd);//用于停止所选元素的动画或效果
绑定事件
| Event 函数 | 绑定函数至 |
|---|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).hover(callback1,callback2) | 鼠标移到元素上执行callback1，移开时执行callback2 |
<li class="active" id="gaoKaoID"><a href="#" >高考 <b class="caret"></b></a>
<ul class="dropdown-menu" id="gaoKaoChildID">
<li><a href="#">高考倒计时</a></li>
<li><a href="../ngViews/gaoKaoScore.html">高考成绩</a></li>
</ul></li>
<script>
$('#gaoKaoID').hover(function(){
$('#gaoKaoChildID').css("height","20px").show();
$('#gaoKaoChildID').animate({height:"200px"},{
duration:1000,
easing:'easeOutBounce'//底部反弹效果
//需要<script src="http://cdn.bootcss.com/jquery-easing/1.3/jquery.easing.min.js"></script>
})
},
function(){
setTimeout(function(){$('#gaoKaoChildID').hide();},500)//鼠标移开后半秒后再消失
});
</script>
操作属性
//设置一个属性
$(selector).attr("href","http://www.w3school.com.cn/jquery");
//设置多个属性
$(selector).attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
操作class属性
//增添一个类选择器
$("div").addClass("important");
//增添多个类选择器
$("#div1").addClass("important blue");
//删除一个类选择器
$("div").removeClass("important");
操作css样式
//返回css属性中某个属性的值
$("p").css("background-color");
//设置css属性中某个属性的值
$("p").css("background-color","yellow");
//设置css属性中多个属性的值
$("p").css({"background-color":"yellow","font-size":"200%"});
操作内容
$(selector).text("Hello world!");//设置元素的文本值
$(selector).text() //返回所选元素的文本内容
$(selector).html() //设置或返回所选元素的内容（包括 HTML 标记）
操作控件
$(selector).
val("Hello world!");//设置输入框的值
$(selector).
val();//读取输入框的值
滚动监听
主要用于实时改变导航条的选中状态，见图1。
图1 导航条滚动监听
$(window). scroll(function() {}
//jquery函数，当滚动条发生滚动时（鼠标滚轮也算）得到调用。
document.body. scrollTop;，获得已经滚过去的页面的高度
$("#grade1"). offset().top; 指定元素相对于整个html页面的顶部距离
后者减前者就是指定元素离屏幕顶端的距离。小于某个阀值时，比如100px就更新导航条的样式。
$(selector).
scrollTop() //设置或读取已经翻过去的内容高度（并不一定是整个页面，比如文本域的竖直滚动条）。
$('#showId')[0].
scrollHeight //获取当前节点的高度。
图2 使用$(selector).
scrollTop($(selector)[0].
scrollHeight); 做到滚动条总是在最下面的效果
