jQuery知识总结

一、jQuery是一个JS的方法库。
二、jQuery有两种引入方式：
1、本地引入

2、远程调用 必须在联网的情况下——加载别的网站的CDN
三、jQuery入口小函数
$(document).ready(function(){
jquery代码
})
缩写
$(function(){
$("#box").click(function(){
jquery代码;
});
})

四、jQuery对象与dom对象的区别
window.onload:
执行时机:
必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码
执行次数:
只能执行一次，如果第二次，那么 第一次的执行会被覆盖
$(document).ready():
执行时机:
只需要等待网页中的DOM结构 加载完毕，就能执行包裹的代码
执行次数:
可以执行多次，第N次都不会被上 一次覆盖
五、dom对象与jQuery对象的转换
1、dom对象转换为jquery对象 $(dom对象)2、jquery对象转换为dom对象：jquery对象[索引号]jquery对象.get(索引号)3、$(“E”).eq(索引号)
jquery对象
4、jquery对象.get(索引号)
dom对象
六、jQuery选择器
1、基本选择器：
id选择器
类选择器
标签选择器
包含选择器
直接选择器
分组选择器
通配符选择器
兄弟选择器
2、基本过滤选择器
3、内容过滤选择器
4、子元素过滤选择器
七、css样式
1、样式操作
获取
jquery对象.css（“样式属性名”）
设置一条样式
jquery对象.css(“属性名”,“属性值”)
设置多条样式
jquery对象.css({“属性名1”:“属性:1”,“属性名2”:“属性:2”,“属性名3”:“属性:3”})
2、类操作
增加类
jquery对象.addClass(“类名1 类名2…”)
增加一个或多个类；多个类之间用空格隔开
删除类
jquery对象.removeClass(“类名1 类名2 类名3…”)
删除一个或多个类；多个类之间用空格隔开
jquery对象.removeClass();清空所有类
增加/删除类
jquery对象.toggleClass(“类名1 类名2 类名3…”)
增加或删除一个或多个类
八、内容操作
1、获取
jquery对象.html()获取jquery对象里的内容
jquery对象.text()获取jquery对象里的内容
jquery对象.val() 获取表单的value值
2、设置
jquery对象.html(“内容”) 能识别标签
jquery对象.text(“内容”) 只能识别纯文本
jquery对象.val(“内容”) 设置表单value值
九、动画

1、显示
jquery对象.show([参数1]，[参数2])
隐藏
jquery对象.hide([参数1]，[参数2])
jquery对象.toggle([参数1]，[参数2])
可显示可隐藏
2、淡入与淡出
jquery对象.fadeIn(参数1，参数2)
jquery对象.fadeOut(参数1，参数2)
jquery对象.fadeToggle(参数1，参数2)
jquery对象.fadeTo(参数1，参数2，参数3)
参数1：可选 速度 默认单位是毫秒
参数2为不透明度
参数3为显示或隐藏动作完成后调用的函数
3、划上与划下
jquery对象.slideUp(参数1，参数2)
jquery对象.slideDown(参数1，参数2)
jquery对象.slideToggle(参数1，参数2)
4、停止动画
jquery对象.stop(参数1，参数2)
参数1：可选 默认false 是否停止加入队列的后续动画
参数2：可选 默认false 是否完成当前动画
jquery对象.stop(true,false);后续动画队列停止 当前动画未完成
jquery对象.stop(false,false);后续加入队列的动画不停止 当前动画未完成
jquery对象.stop(false,true); 后续动画队列不停止 当前动画完成
jquery对象.stop(true,true);后续动画队列停止 当前动画完成
5、延迟动画
jquery对象.delay()
可以将队列中等待执行的下一个动画（回调函数里的动画）延迟指定时间后执行。
注意：如果下一项不是效果动画，则它不会被加入效果队列中，因此该函数不会对它进行延迟调用。
6、自定义动画
jquery对象.animate(参数1,参数2,参数3)
参数1：对象{属性名：属性值，…}
参数2：速度
参数3：回调函数

十、文档处理
1、内部插入
jquery对象.append(content)jquery对象内部插入content内容
$(content).appendTo(jquery对象) 把content内容追加到jquery对象内部
$(selector).after(content)或$(content).insertAfter(seletor)
2、外部插入
$(selector).after(content)或$(content).insertAfter(seletor)
$(selector).before(content)或$(content).insertBefore(seletor)
3、删除元素
$(".box").detach();删除自身与后代
$(".box").remove();删除自身与后代
$(".box").empty();清空自己的内容与后代；自己的标签还在
4、替换元素
jquery对象.replaceWidth(content) 用content内容替换jquery对象
$(content).replaceAll(jquery对象) 把jquery对象用content内容替换掉
5、克隆元素
jquery对象.clone([boolean])
参数：可选 布尔值 默认false 不克隆事件 若为true，克隆事件
6、包裹元素
jquery对象.wrap(“包裹元素格式”) 选中的jquery对象各自被包裹
jquery对象.wrapAll(“包裹格式”) 把所有选中的jquery对象包裹起来
jquery对象.wrapInner(“包裹格式”) 把每一个jquery对象里的内容各自包裹起来
$(".box").unwrap();删除包裹 删除父元素
十一、属性操作
1、获取
jquery对象.attr（“属性名”）
jquery对象.prop（“属性名”）
2、设置
设置一条
jquery对象.attr（“属性名”，“属性值”）
jquery对象.prop（“属性名”，“属性值”）
设置多条
jquery对象.attr（“属性名1”，“属性值1”…）
jquery对象.prop（“属性名1”，“属性值1”…）
3、删除属性
jquery对象.removeAttr(“属性名”)
十二、prop0和attr()的主要区别:
1、prop()
prop0函数针对的是DOM元素(JS Elemen对象)的属性,
property 属性 dom对象.属性名
可以设置固有属性 无法设置自定义属性
2、attr()
attr()函数针对的是DOM元索所对应的文档节 点的属性。
attribute getAttribute(“属性名”)
可以设置固有属性 也可以设置自定义属性
对于HTML元素本身就带有的固有属性,在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
十三、css操作
1、偏移量
outerHeight();获取顶部的盒子高度
获取
$(selector).offset().left 获取元素相对于文档左侧的偏移量
$(selector).offset().top 获取元素相对于文档上部的偏移量
jquery对象.position().top
获取距离父元素上部的偏移量
设置
jquery对象.offset({“left”:数值，“top”:数值})
2、尺寸
jquery对象.width();
不包含padding border margin 包含width 获取内容区域的尺寸
jquery对象.height();
不包含padding border margin 包含width 获取内容区域的尺寸
jquery对象.innerWidth();
不包含border margin 包含width padding 获取尺寸
jquery对象.innerHeight();
不包含border margin 包含width padding 获取尺寸
jquery对象.outerWidth();
包含width padding border 不包含 margin 获取盒子大小
jquery对象.outerHeight();
包含width padding border 不包含 margin 获取盒子大小
注意
outerWidth(true)，outerHeight(true)也会包含marign
3、滚动条
获取
$(selector).scrollLeft()
获取元素的滚动条的水平位置
$(selector). scrollTop()
获取元素的滚动条的垂直位置
设置
$(selector).scrollLeft(数值)
设置滚动条垂直方向滚动的距离
$(selector). scrollTop(数值)
设置滚动条垂直方向滚动的距离
十四、jQuery事件
1、委托事件
jquery对象.bind(“事件名1 事件名2 …”,function(){})
绑定单个事件
jquery对象.bind({“事件名1”:function,“事件名2:function(){}”,…})
绑定单个事件
jquery对象.on(“事件名1 事件名2 …" ,function(){})
绑定单个事件
jquery对象.on({“事件名1” :function(){}，"事件名2”:function(){},…})
绑定多个事件
2、解绑事件
jquery对象.unbind(“事件名1 事件名2 …”)
jqueny对象.off(“事件名1 事件名2 …”)
3、合成事件
jquery对象.hover(参数1，参数2)
参数1:鼠标移入时调用的函数
参数2:鼠标移出时调用的函数
4、模拟事件
jquey对象.tigger(“事件名”) 可以触发默认行为
trigger(参数1，参数2)方法有两个参数,第一个参数是要触发
的事件类型,第二个参数是传递给事件处理函数的附加数据,以数组的形式传递.
jquey对象.tiggerHandler(“事件名”) 不触发默认行为,而只执行事件代码.

5、一次性绑定事件
jquey对象.one(“事件名”,function(){})
十五、jQuery遍历
1、 jQuery 遍历，可以理解为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
2、向上遍历
jquery对象.parent()
返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
jquery对象.parents()
返回被选元素的所有祖先元素
一路向上直到文档的根元素 ()
jquery对象.parentUntil()
返回介于两个给定元素之间的所有祖先元素。
3、水平遍历
jquery对象.siblings() 返回被选元素的所有同胞元素。
jquery对象.next() 方法返回被选元素的下一个同胞元素。
jquery对象.nextAll() 方法返回被选元素的所有跟随的同胞元素。
jquery对象.nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。$("")以后的所有的同辈元素，直到…之前的元素，不包括匹配的元素本身
prev(), prevAll() & prevUntil() 方法 prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
4、向下遍历
jquery对象.children()
返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
jquery对象.find()
返回被选元素的后代元素，一路向下直到最后一个后代。
$(“div”).find("*"); 返回div所有后代
5、jquery each()方法
jquery对象.each(function(i,dom){
i 索引号 下标
dom dom对象
})
$.each(对象,function(i,dom){
i 索引号 下标
dom 遍历的值
})