一、JQuery
1.什么是JQuery？
前端JS框架非常多，如prototype、JQuery、Extjs。
JQuery就是一个JS框架，将原有javascript中使用的dom对象封装成一个JQuery对象，通过调用JQuery对象的方法来实现对原始的DOM对象操作。
目的：为了更好的兼容不同的浏览器简化代码。
要注意的是jQuery调用的方法并不是js中的方法~~~~他们所操作的dom对象是不同的。
3.JQuery编程步骤
1）使用JQuery提供选择器找到dom节点。JQuery会将找到的dom节点封装成JQuery对象
2）调用JQuery对象提供的方法
4.DOM模型
浏览器如何解析页面
首先浏览器将页面元素转换成节点对象(dom对象)
所有节点一起组成一个树状结构
接着浏览器会把这些节点按特定顺序绘制到浏览器窗口中
这种以对象描述文档的方式就是DOM，节点对象就被称为dom对象
节点类型划分：
元素节点 ： 文档中的所有元素
<h1>...........</h1>
文本节点:元素节点的文本内容
<h1>DOM模型演示</h1>
属性节点：元素节点的子节点
<p title=”提示”>...</p>
5、DOM对象和JQuery对象
1）DOM对象：使用javascript获取到的节点对象
var domObj = document.getElementById('div1');
console.log(domObj.innerHTML);//获取到元素中的html元素
2）JQuery对象:使用JQuery包装(封装)DOM对象后产生的对象，只能使用JQuery中的方法操作
var txt = $("#div1").html();
等同于 var txt = document.getElementById('div1').innerHTML;
DOM对象和JQuery对象分别有自己一套独立的操作方法，不能混用
二、JQuery语法操作
1.JQuery基础语法
$(选择器).方法()
函数$():将DOM对象转换成jquery对象
选择器：jquery提供了各种丰富的选择器，可以获取到需要操作的DOM对象
方法():jquery提供的方法，用于操作jquery对象。包括了绑定事件处理的一些方法
$等同于是jquery的意思
$(document).ready() = jquery(document).ready()
Jquery的语法风格
由于jquery的方法返回的是操作的jquery对象，所以可以连续的书写调用方法
$(“#h”).css(“background-color”,”#CCFFFF”).css(“display”,”block”);
Jquery中的样式
css("属性名","属性值") ：为元素设置css样式的值
addClass() : 为元素增加类样式
2.JQuery和DOM的转换
DOM转换成JQuery对象
使用$()函数进行转换 ： var $obj = $(DOM对象);
注意：一般情况下JQuery对象命名一般以$开头
JQuery对象转换成DOM对象
a.JQuery对象是一个类似于数组的对象，可以通过[index]方式得到DOM对象
Var $txtName = $(“#title”);
Var txtName = $txtName[0];//DOM对象
三、JQuery选择器
Jquery的选择器语法类似于css选择器语法，可以很方便选择到dom节点进行操作
Jquery选择器功能强大，大致可以分类为
类css选择器
基本选择器
层次选择器
属性选择器
过滤选择器
基本过滤选择器
可见性过滤选择器
基本选择器：
标签选择器：$("h2") 选取所有h2标签元素.
类选择器：$(".CSS") 选取所有CSS类元素
ID选择器：$("#id") 选中所有id元素
并集选择器：$("h2，.CSS，#id") 用逗号隔开选择并集
交集选择器：$("h2.CSS")只能使用标签+CSS或者标签+id选中，无间隔符
全局选择器：$("*") 选中全部
层次选择器（尽量少用因为html会被多次修改容易出BUG）：
后代选择器：$("#id h2")用空格隔开.所有后代
子代选择器：$("#id>h2")用>隔开.子代
相邻选择器：$("#id+h2")用+隔开.id之后的同辈h2
同辈选择器：$("#id~siblings")~siblings.id之后的所有同辈
属性选择器：
$("[href]"); 所有含有该属性的元素
$("[href=#]"); 所有href=#的元素
$("[href！=#]"); 所有href！=#的元素
$("[href^=#]"); 所有href属性#开头的元素
$("[href$=#]"); 所有href属性#结尾的元素
$("[href*=#]"); 所有href属性包含#的元素
$("[href*=#][href！=#]"); 满足多个条件的元素
基本过滤器：
$("h2：first") ：第一个h2
$("h2：last") ：最后一个h2
$("h2：event") ：偶数
$("h2：old") ：奇数
$("h2：eq(index)") ：索引等于index
$("h2：gt(index)") ：索引大于index
$("h2：lt(index)") ：索引小于index
可见性过滤器
$("：visible"):所有可见的
$("：hidden"):所有不可见的
1.DOM操作可以分为三类
核心dom：任何一种支持dom的编程语言都可以使用。如：getElementById（）
HTML dom: 用于处理html文档 如document.forms等
Css dom ： 用于操作css 如element.style.color = “green”
Javascript支持上面3种操作
2.Jquery操作DOM
JQuery通过了对javascript的DOM操作的封装，使用更方便
分为：
样式操作
内容和value属性值操作
节点操作
节点属性操作
节点变量
Css-dom操作
Dom的查询操作
利用jquery选择器找到节点:
text()
输出或设置节点之间的文本，text()与dom操作的innerText属性是一样的功能
html()
输出或者设置节点间的html内容，功能等同于dom操作的innerHTML属性
attr(‘class’,’’)
输出或者指定节点属性值
val()
输出或设置元素的值，与dom操作的value属性是一样的功能
下拉列表的值也可以通过val()获取
一、DOM操作
2.创建节点元素
$(html节点)
3.插入节点元素
after()
在匹配元素之后插入内容
before()
在匹配元素之前插入内容
append()
在匹配元素的内部追加内容(在末尾增加)
prepend()
在匹配元素的内部前置内容(在前面增加)
4.删除节点
remove（）
删除当前选择的元素节点
remove（selector）
找出selector选择出的元素节点并删除
empty()
清空节点内容操作
5.复制节点
clone() 复制节点，但不复制行为
clone（true） 复制节点，同时也将行为复制(绑定的事件)
6.遍历节点
children（） 获取元素的所有子节点(不包括子节点的子节点)
next() 获取下一个节点
prev() 获取上一个节点
siblings（） 获取所有的兄弟元素
find(selector) 根据选择器找到节点
7.属性操作
attr():读取属性
attr（“obj1”,”obj2”）:设置属性值
attr({“key”:value1,”key”:value2...}) 一次性设置多个属性值
removeAttr(“”) 删除属性
8.样式操作
attr(“class”,””) 获取和设置样式属性值
addClass(“”) 追加样式
removeClass(“”) 删除样式
toggleClass() 在增加和删除样式间切换
hasClass() 是否存在有某个样式
css()
css({“key1”:value1,”key2”:value2})
二、事件处理
1.绑定事件处理的函数
bind(type,fn)
type:事件的类型 如点击事件则是”click”
fn:触发事件后需要绑定的处理函数
2.绑定方式的简写形式
以click为例
$对象.click(function(){
})
3.合成事件
hover（进入，离开）： 模拟鼠标进入和离开处理事件
toggle（fn1，fn2...）: 模拟鼠标连续点击元素事件
4.事件冒泡
获取事件对象
//事件调用的时候，事件对象会传递给e变量接收
//而且不再是javascript对象，而是jquery封装后的事件对象
click(function(e){
})
停止事件冒泡
e.stopPropagation()
阻止默认行为
event.preventDefault()
三、动画
1.显示隐藏
Show（）/hide() 默认速度显示/隐藏元素
Show（speed）/hide(speed) 指定速度(值可以为 “fast”等3个字符串或毫秒值)显示/隐藏元素
2.改变元素高度
slideDown 向下增加高度相当于show() 参数与显示/隐藏含义一样
slideUp 向上减少高度相当于hide() 参数与显示/隐藏含义一样
3.改变透明度
fadeIn() 淡入。参数与显示/隐藏含义一样
fadeOut() 淡出。参数与显示/隐藏含义一样
4.回调函数
上面三种效果函数里面可以使用一个回调函数，作用是在执行完动画效果后，再执行它
5.自定义动画
animate(p,[speed],[fn])
Params:设置动画效果的参数
Speed：动画速度
一、jquery操作类数组
$(选择器)操作返回数组，可以使用的操作方法：
each(fn(i)) 遍历数组中的每个元素,this代表的dom对象,$(this)代表jquery对象
eq(index) 返回某个jquery对象
index(节点对象) 显示该节点对象所在类数组的下标位置
get(index) 返回dom对象数组的某个index上的dom对象
二、JQuery对Ajax的支持
$.ajax(options) options是以{“key”:value,”key”:value...}的js对象，用于指定发送的参数选择
url(string): 请求地址
type(string): POST/GET
data(Object/string): 发送到服务器的参数
dataType（string） 指定服务器返回的数据的类型，包括:
json json字符串
xml 返回xml文档
text 文本内容
html html内容
script js脚本内容
回调函数success 请求成功后的回调函数,常用参数 function(data,textStatus)
data 是响应数据,会被jquery自动处理成js对象
textStatus 服务器状态字符串
回调函数error 请求失败的回调函数 参数 xhr,textStatus,errorThrow
$.post(url[,data][,funciton][,type]) 发送post请求
Url 请求地址
data 请求数据，可以是js对象{‘price’:2500.0,’desc’:’好’}
也可以使用请求字符串”price=2500.0&&desc=好”
Function 发送成功时回调函数
type 服务器返回数据的类型
$.get()与$.post()格式一致
load(url) 将服务器响应的数据插入到当前匹配的jquery对象的dom元素中
$obj = $(dom对象);
$obj.load();
Serialize()
将参数数据格式化成固定格式的字符串，类似于请求的参数格式
将jquery对象包含的表单或者表单域转换成查询字符串