1、jquery概念
是js的一个类库 （对js中某些功能的封装）
用jq实现的功能一定能用js实现 反过来 不一定 ，js实现的功能jq不一定能实现
2、jquery好处
1、代码简洁
2、兼容性好
最少的代码做多的事情
性能支持比较好
节约学习成本
让DOM操作变的简单
jQuery框架支持链式写法
jQuery框架实现了跨浏览器的兼容包括IE低版本
jQuery1.x版本支持低版本IE浏览器
可以操作css3样式
jquery可以和原生js结合一起使用 setTimeout( function(){ jq代码 },1000 )
注意 ： 原生DOM对象不能使用jquery对象方法 document.getElementById("").dom的操作方式
用jq实现的用js一定能实现 反过来不一定
选择器、属性操作、样式操作、内容操作、文档操作(dom)、 动画 、事件处理 、 ajax 、jq插件
3、jquery选择器
$是jQuery的简写 含义一样
$ 符号 是一个函数 function
$() 返回值是对象object类型 同 jQuery()
也就是 $() 等价 jQuery()
注意 ： 通过jquery方式查找到的元素 不能使用js的方式操作 样式、属性、内容... $("").style.color = "" 错
通过js方式查找到的元素 不能使用jq的各种方法操作 样式、属性、内容... document.getElementById().css() 错
基本选择器 ：
id选择器 $("#id名")
类选择器 $(".class名")
标签选择器 $("html标签")
组合选择器 $("id,class")
通用选择器 $("*") 查找所有的标签
层级选择器 :
空格 查找当前元素里面的所有后代元素
> 查找当前元素里面的所有子代元素
+ 查找当前元素下面的紧邻的兄弟节点
~ 查找当前元素下面的所有的兄弟节点
查找过滤选择器(都是方法) ：
first() $("li").first() ：first
last() :last
eq(下标) 下标从0开始 等价 :eq(下标)
find() $("div.box").find("span") 查找给定元素的后代
children() 查找给定元素的子代 $().children("span") $().children()
next() $("p").next() $("p").next("span")指定的下一个元素
prev() 前一个 用法同next()
nextAll() 下面所有的 可以指定参数 也可以不指定
prevAll() 前一个所有
siblings() 除了自身之外的所有兄弟元素（也可以指定参数）
parent() 查找某个元素的父元素
filter() 参数可以是一个回调函数
$("p").filter(function(){
return 条件；返回满足某个条件的p元素
})
not() 除了...之外 :not
4、jquery中的样式操作
css() 获取样式
用法 ： .css("样式","值")
.css({ "样式":"值" ，"样式":"值",.....})
.addClass("类名") 添加样式类 .removeClass() 删除样式类
5、jquery中查找元素下标
index() 查找该元素在同辈元素中的位置
6、jquery对象和dom对象的互换问题
dom对象转成jq对象 ： $( dom对象 )
var obj = document.getElementById("box")
$( obj )
jq对象转化成dom对象 ：
$().get(下标)---dom对象
$()[下标] ---dom对象
var $list = $("li");
$list.get(2)
$list[2]
7、属性操作
attr() 获取或设置标签元素的属性 (该方法不能操作属性值是布尔类型的属性 比如 ： checked 操作布尔类型属性 用 prop() )
获取 ： 对象.attr()
设置 ： 对象.attr("属性","值")
对象.attr({
属性 ： 值,
...
})
8、jquery中的样式操作
css() 获取样式
用法 ： .css("样式","值")
.css({ "样式":"值" ，"样式":"值",.....})
.addClass("类名") 添加样式类 .removeClass() 删除样式类 判断样式类 hasClass
9、jquery中的内容操作
标签 ：
html() 获取或设置 非表单元素的内容 设置内容html()方法会识别标记 获取时只获取第一个
text() 纯文本操作 获取时获取所有的元素内容
表单 ：
val() 获取或设置表单元素的内 获取：无参数 设置 ：有参数
10、jquery的文档操作
append() 向指定的父元素后添加新子元素
appendTo() 将某个子元素添加到指定的父元素后面
prepend() 前置新内容
prependTo()
after()
insertAfter()
before()
insertBefore()
empty() 清空
remove() 删除所有
detach() 删除某个指定的元素
clone() 克隆
wrap() 把所有的元素用新创建的元素包裹起来
replaceWith() 将所有的元素替换成指定的元素 移动不是复制
replaceAll() 用匹配的元素替换掉所有 selector匹配到的元素
jquery的动画
基本动画 ：
show() 没有参数 等价 css：display：block
可以有三个参数
第一个参数 ：动画执行的时间
第二个参数 ： 动画执行方式 linear swing
第三个参数 ：动画完成后的回调函数
hide() 隐藏
toggle() 切换 显示 / 隐藏
上拉/下拉 ：
slideDown() 通过高度的改变 显示 某个元素
slideUp() 通过高度的改变 隐藏 某个元素
slideToggle() 切换
透明度 ：
fadeIn(1000，function（） { }) 淡入 通过透明度的改变 显示 某个元素
fadeOut() 隐藏
fadeToggle() 切换
fadeTo() 调整某个元素的透明度
第一个参数 ： 时间 （不能省略） 时间为0 也要写出来
第二个参数 ： 透明度值
自定义动画 ：animate
对象.animate( { } , 时间 , 回调函数 )
stop() 停止当前正在运行的动画 其余动画继续执行 （多个相同的元素含有多个同样的事件时 ）
delay() 动画延时
jquery遍历
$().each( function(){
} )
或
$.each( $() , function(){
} )
jquery中阻止冒泡方式 ：return false
size()方法 length属性 获取jq元素的个数
jquery中的事件处理
jquery的页面加载 ：
$(document).ready(function(){
}) 简写成
$(function(){
})
jquery的页面加载中的代码 不需要等页面所有内容全部加载完成后执行 dom元素准备就绪即可执行
jquery的页面加载函数可以存在多个
$(document).ready( callback )
或简写成
jQuery（callback）
$( callback )
事件处理 ：
事件绑定 ：
bind()
用法 ：
对象.bind("事件",function(){ })
对象.bind({
事件 ： function(){},
事件 : function(){},
.....
})
unbind() 解除绑定 unbind 也可以用来关闭on绑定的事件
事件委托 delegate：
对象.delegate("事件源",事件,function(){
})
取消委托 ： undelegate
事件绑定+事件委托 ： on ---- off off可以用来关闭bind绑定的事件
事件绑定 用法 和bind()
事件委托 用法 ：
对象.on(事件 , "事件源" , function(){
})
one() 只触发一次事件的事件处理方法
事件切换 hover
用户 ：
对象.hover(function(){
mouseenter
},function(){
mouseleave
})
jquery插件
自定义插件 ：
方式一：
$.extend({ 自定义工具方法 全局函数
方法名 : function(){},
....
})
调用 ：全局调用 $.方法名()
方式二 ：
$.fn.extend({ 自定义对象的方法 不是全局方法
方法名 ： function(){
},
...
})
调用 ： 局部方法 使用 jq选择器.方法名()
注意 ： $.fn是jQuery原型对象
扩展 ：
$.函数名 = function(){ ... } $.调用
$.fn.函数名 = function(){ ... } jq对象调用
jquery的ajax 方法 ：$.ajax () $.get() $.post() $.getJson() $.getScript() load()
1、ajax的异步请求之 load 加载公共的html文件
load() 方法是一个局部的方法，通过jquery的选择器作为开始调用load方法
load()方法是异步的，加载的信息中如果需要事件响应，必须通过回调函数来实现（或者委托），也就是说所有load加载的数据中的事件都要写在回调函数中
load()方法如果想要请求不同结构的内容，可以把这些内容写到一个文件中，请求数据时，在url后加一个请求容器的选择器名称即可（这里选择器建议使用基本选择器）
load()方法的参数有三个：
第一个： 请求的url
第二个： 发送的数据 json格式 {}
第三个参数 ： 回调函数
回调函数中有三个参数，分别是：
function(res,type,xhr){
console.log(res); //请求数据
console.log( type );//请求的状态
console.log(xhr); //deffered 异步对象 （类似于js中promise对象）
}
2、ajax请求之 $.get 或 $.post
以 $. 开始的ajax请求方式是全局方法
$.get(三个参数) 以get方式请求数据
第一个参数：请求的路径
第二个参数：请求数据 json对象 ｛｝
第三个参数： 回调函数 （回调函数中也有三个参数，同load）
$.post() 以post方式请求数据 用法同$.get()
3、ajax请求之 $.getJson() $.getScript()
$.getJson("xxx.json"，data, 回调函数) 通过这种方式请求json数据 三个参数 ： url data function(){}
$.getScript("xxx.js"，回调) 通过这种方式请求js脚本数据 ，立即执行请求的脚本代码
4、$.ajax
jquery的ajax请求服务器传递过来的数据一般都是object对象（请求的数据是object类型）
用法：
$.ajax({
type:"get", 请求数据方式
url:"http://127.0.0.1/jqAjx1706/data.json";, 请求路径
success:function(){ 服务器通过 success 方法 获取处理的结果
console.log("成功");
}
});
或 $.ajax 方法返回一个deffered对象 （类似promise）
如果请求数据成功，通过done方法获取服务器的数据
var deff = $.ajax({ type:,url: })
deff.done(function(){
})
关于deffered方法描述 ：
deferred对象是jQuery的回调函数的解决方案。
deferred对象有done方法，表示成功时要调用的回调函数。
deferred对象有fail方法，表示失败时要调用的回调函数。
when方法表示都成功是再调用对应的回调函数。
常用方法：
$.ajax({
type:"get",
datatype:"json",//指定请求数据的类型 请求数据类型如果是json 表示正常ajax请求 如果是jsonp，表示跨域请求
data:{"name":"admin"},//向服务器发送数据
success:function(res){
//alert(typeof res);
//此处处理服务器返回数据的业务逻辑
}
});
ajax跨域：
$.ajax({
type:"get",
dataType:"jsonp",
jsonCallback:"fn" //设置回调函数
});
function fn(msg){
alert( msg );
}