JavaScript jQuery 学习笔记
一、jQuery框架的使用
jQuery用于简化客户端JavaScript编程。write less do more!
jQuery提供了很多功能强大的函数，主要功能：
a.提供了强大、多样的选择器，可以方便我们选取要操作的对象元素
b.提供了样式控制和属性控制函数
c.提供了文档处理函数
d.提供了事件处理函数
e.提供了Ajax支持
f.提供了特效函数
二、jQuery特点：
a.将js与html元素彻底分离
b.提供了功能强大处理函数
c.代码简洁，易于编程
三、jQuery的基本应用
1).注意事项
a.区分jQuery对象和前期的javascript DOM对象
DOM对象：
window、document、history、navigator、location、link、document.getElementByIdx_x、this等
jQuery对象：
使用jQuery选择器选出的对象
DOM和jQuery对象转换：
将DOM对象转换成jQuery对象：$(this)、$(document)等
alert($(this).text());<=>alert(this.innerHTML);
将jQuery对象转换成DOM对象：jQuery对象[0]、jQuery对象.get(0)等
将字符串封装成jQuery对象：$("<div>hello</div>")等
b.jQuery对象是DOM对象的集合，以集合形式存在。
c.页面载入函数
$(document).ready(fn):fn是在HTML文档被浏览器完全载入之后执行。
等价于body中的onload时机。
$(document).ready(function(){
//处理代码
});
//简写
$(function(){
//处理代码
})
d.$符号是jQuery符号的简写，如果遇到js库冲突，jQuery框架需要让出$符号的使用权
2).选择器
a.基本选择器：$("#id属性值"), $("元素名称"), $(".class属性值")
b.层级选择器：$("祖先 后代")
c.简单选择器：:first ,:last, :even, :odd, :not, :eq, :gt, :lt
d.内容选择器：:contains(), :empty
e.可见性选择器：:hidden, :visible
f.表单元素：:input, :text, :radio ,:checkbox等
g.表单对象属性：:enabled, :disabled, :checked, :selected
h.属性选择器：[属性名=属性值]
3).属性控制函数
a.value属性控制：val(),val(str)
b.innerHTML值控制：text(),text(str),html(),html(str)
比较：
text()：存文本的设置text("<h1>标题<h2>")
html()：文本内容会先解析html，再设置html("<h1>标题<h2>")
c.class控制：addClass(str),removeClass(str)
4).CSS样式控制
a.css(name):返回name名的样式String值
b.css(name,value):设置对应name的value值
c.height()/height(val), width()/width(val)
5).事件函数
click()：触发元素的单击处理
click(fn)：邦定元素的单击处理
... ...
hover(overfn,outfn)：鼠标移上去调用overfn,移开调用outfn
toggle(fn1,fn2,fn...)：第一次单击时调用fn1,第二次调用fn2,依次执行
bind(type,fn)：邦定元素的type类型事件的处理
unbind(type)：取消邦定的type事件,如果要取消所有事件处理，使用unbind()无参
trigger(type)：触发元素的type事件处理
live(type,fn)：给现有元素或将来匹配的元素邦定type类型处理
6).效果函数
基本效果：show()、show(speed,fn)、hide()、hide(speed,fn)、toggle()、toggle(speed,fn)
滑动效果：slideUp()、slideDown()、slideToggle()
淡入淡出效果：fadeOut()、fadeIn()
自定义动画函数：animate(终止样式属性,动画参数)
7).文档处理函数
内部插入：
A.append(B)：将B插入到A元素内部的末尾处
A.appendTo(B)：将A插入到B元素内部的末尾处
外部插入：
A.after(B)：将B放到A元素的后面
A.before(B)：将B放到A元素的前面
复制元素：
clone():复制元素
clone(true):复制元素及其事件
删除元素：
empty:清空元素
remove():彻底删除元素
包裹元素：
A.wrap("<p></p>"):使用p标记将A元素包裹起来
8).Ajax函数
1)Ajax请求：
$.ajax()函数是$.get()、$.post()、$.getJSON()等函数的底层实现。
$.get()：以get方式发送ajax请求
$.getJSON()：以get方式发送ajax请求，接收服务器返回的json数据
$.post()：以post方式发送ajax请求
load()：加载服务器返回的HTML页面。
2)Ajax（全局）事件
ajaxStart-->ajaxSend-->ajaxSuccess/ajaxError-->ajaxComplete-->ajaxStop
四、jQuery的扩展应用
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
1、筛选函数/工具函数
过滤功能
1) eq(index):获取指定索引的元素.$("tr").eq(0)等价于$("tr:eq(0)")
2) is(选择器表达式):判断集合中元素是否满足指定表达式。例如$("input[type='checkbox']").is(":checked")
3) not(选择器表达式):等价于:not选择器
4) slice(begin,end):从集合中截取索引大于等于begin,小于end之间的元素
5) filter(选择器表达式):按指定表达式筛选出元素
查找功能
1) children(表达式):按指定表达式查找当前元素的孩子（儿子）
2) find(表达式):按指定表达式查找当前元素的后代元素
3) parent():查找当前元素的父元素
4) siblings():查找当前元素的兄弟元素
串联函数
end() :使元素的状态退回到前一次的状态。将函数控制的jQuery元素对象退回到上一层.
比如：$("tr").css("background","red").eq(1).hide().end().show().
那么end之后，操作对象将是$("tr")而不是$("tr").css("background","red").eq(1)
工具函数
$.trim(str):过滤空格
$.each():循环遍历(参见sample01.html)
$(function(){
var data = [{"name":"北京","ename":"北京"},{"name":"北京","ename":"北京"},{"name":"北京","ename":"北京"}];
$.each(data,function(index,json){
var $li = $("<li>"+index+":"+json.ename+":"+json.name+"</li>");
$("#city").append($li);
});
});
2、事件冒泡/终止浏览器默认事件处理(参见sample02.html)
3、如何解决jQuery和其他js库之间的$符号冲突
如果jQuery还想使用$符号，可以使用闭包结构编写。（参见帮助文档，闭包概念参阅其他资料）
//外环境传入参数，将jQuery名称对象传给$
(function($){
function(){
//可使用$符号编jQuery代码
}
})(jQuery)
//外环境不需要传参数
(function(){
function(){
javascript代码
}
})
4、典型的jQuery插件
jQuery插件就是基于jQuery核心库进行再复杂功能封装，对原有功能和函数进行扩展。
1.表单校验插件validate
2.日历插件dataPicker
3.拖拽插件easydrag,draggables,sortable
5、如何开发插件
使用闭包封装。参见sample05.html
6、练习
网页换肤
菜单导航
图片提示
Web聊天程序(自己构造需求)
