1.1 jQuery的基本使用
1、jQuery的入口函数
//方法1（更简单）
$(function() {
//此处是页面DOM加载完成的入口
});
//方法2
$(document).ready(function() {
//此处是页面DOM加载完成的入口
});
2、jQuery的顶级对象$
（1）$是jQuery的别称，在代码中由于$更简单所以常用，使用jQuery也是可以的。
（2）$是jQuery的顶级对象，相当于原生JavaScript的window。把元素利用$包装成jQuery对象，就可以调用jQuery方法。
3、DOM对象和jQuery对象
（1）用原生JS获取来的对象是DOM对象
（2）用jQuery方法获取来的元素是jQuery对象
（3）jQuery对象的本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）
（4）jQuery对象只能使用jQuery方法，DOM对象使用原生的JavaScript属性和方法
<div></div>
var div = document.querySelector('div');
console.log(div);//<div></div>
var box = $('div');
console.log(box);//S.fn.init(1)点开可以看见
（5）DOM对象和jQuery对象相互转换
-
DOM对象转换为jQuery对象：$(DOM对象)
-
jQuery对象转换为DOM对象
<video></video>
//DOM对象转换为jQuery对象
//方法1
$('video');
//方法2
var video = document.querySelector('video');
$(video);
//jQuery对象转换为DOM对象
$('video')[index] //index是索引号
$('video').get(index) //index是索引号
1.2 jQuery常用API
1.2.1 jQuery选择器
1、jQuery基础选择器
$("选择器")//里面选择器直接写CSS选择器即可，但是要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定ID的元素 |
| 全选选择器 | $('*') | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $("div") | 获取同一类标签的所有元素 |
| 并集选择器 | $("div,p,li") | 选取多个元素 |
| 交集选择器 | $("li.current") | 交集元素 |
2、jQuery层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $("ul>li"); | 使用>号，获取亲儿子层级的元素，不会获取孙子层级的元素 |
| 后代选择器 | $("ul li"); | 使用空格，代表后代选择器，获取下面所有元素 |
3、隐式迭代
-
遍历内部DOM（伪数组形式存储）的过程叫做隐式迭代
-
隐式迭代就是把匹配的所有元素内部进行遍历循环，给每个元素添加css这个方法
4、jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $('li:first') | 获取第一个li元素 |
| :last | $('li:last') | 获取最后一个li元素 |
| :eq(index) | $('li:eq(2)') | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 |
| :odd | $('li:odd') | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $('li:even') | 获取到的li元素中，选择索引号为偶数的元素 |
5、jQuery筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $("li").parent(); | 查找父级 |
| children(selector) | $("ul").children("li"); | 相当于$("ul>li")，最近一级（亲儿子） |
| find(selector) | $("ul").find("li"); | 相当于$("ul li")，后代选择器 |
| siblings(selector) | $(".first").siblings("li"); | 查找兄弟节点，不包括自己本身 |
| nextAll([expr]) | $(".first").nextAll(); | 查找当前元素之后所有的同辈元素 |
| prevAll([expr]) | $(".last").prevAll(); | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $("div").hasClass("star"); | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | $("li").eq(2); | 相当于$('li:eq(2)')，index从0开始 |
6、jQuery排他思想
$(function() {
//隐式迭代，所有按钮都绑定
$("button").click(function(){
//当前元素有变化
$(this).css("background","blue");
//其他兄弟去掉变化
$(this).siblings("button").css("background","");
});
7、链式编程
$(function() {
//隐式迭代，所有按钮都绑定
$("button").click(function(){
//当前元素有变化，兄弟去掉颜色
$(this).css("background","blue").siblings().css("background","");
});
1.2.2 jQuery样式操作
1、操作CSS方法
（1）参数只写属性名，则是返回属性值：$('div').css('属性')
（2）参数是属性名和属性值，逗号分隔，是设置一组样式，属性加引号，值如果是数字可以不加单位和引号：$('div').css('属性','值')
（3）参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，睡醒可以不加引号：$('div').css({'属性':'值','属性':'值'})
2、设置类样式方法
（1）添加类
$("div").addClass("current");
（2）删除类
$("div").removeClass("current");
（3）切换类（有就删，没有就加）
$("div").toggleClass("current");
（4）类操作与className的区别
-
原生JS中className会覆盖原先里面的类名
-
jQuery里面类操作只是针对类进行操作，不影响原先的类名
1.2.3 jQuery效果
1、显示隐藏效果
-
参数可以省略，无动画直接显示
-
speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
-
easing：（optional）用来指定切换效果，默认是"swing"，可用参数"linear"
-
fn：回调函数，在动画完成时执行的函数，每个元素执行一次
//显示语法规范 show([speed],[easing],[fn]) //隐藏语法规法 hide([speed],[easing],[fn]) //切换语法规范 toggle([speed],[easing],[fn])
2、滑动效果
//下拉滑动 slideDown([speed],[easing],[fn]) //上拉滑动 slideUp([speed],[easing],[fn]) //切换滑动 slideToggle([speed],[easing],[fn])
3、事件切换
over：鼠标移到元素上要触发的函数（相当于mouseenter）
out：鼠标移出元素要触发的函数（相当于mouseleave）
如果只写一个函数，鼠标经过和离开都会触发这个函数
hover([over,]out)
4、动画队列及其停止排队方法
（1）动画或效果队列：动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。
（2）停止排队
stop()方法用于停止动画或者效果
stop()写到动画或者效果的前面，相当于停止结束上一次的动画
stop()
5、淡入淡出效果
fadeTo的效果参数：
-
opacity：透明度必须写，取值0~1之间
-
speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000），必须写
//淡入效果 fadeIn([speed],[easing],[fn]) //淡出效果 fadeOut([speed],[easing],[fn]) //淡入淡出切换 fadeToggle([speed],[easing],[fn]) //修改透明度 fadeTo(speed,opacity,[easing],[fn])
6、自定义动画
params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果复合属性则需要采用驼峰命名法。
animate(params,[speed],[easing],[fn])
1.2.4 jQuery属性操作
1、设置或获取元素固有属性值prop()
//获取属性值
$("标签").prop("属性名")
//设置属性值
$("标签").prop("属性名","属性值")
2、设置或获取元素自定义属性值attr()
注意：H5的自定义属性也可以获得，H5的自定义属性是data-开头的
//获取属性值
$("标签").attr("属性名")
//设置属性值
$("标签").attr("属性名","属性值")
3、数据缓存data()
-
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。
-
注意：修改后是不能在里面看见的，可以将其当做变量来看
-
也可以获取H5的，此时data方法不需要加data-，直接写后面的就可以，而且返回的是数字型
//获取属性值
$("标签").data("属性名")
//设置属性值
$("标签").data("属性名","属性值")
1.2.5 jQuery内容文本值
1、普通元素内容html()（相当于原生的innerHTML）
//设置元素内容
html("内容")
//获取元素内容
html()
2、普通元素文本内容text()（相当于原生的innerText）
//设置元素内容
text("内容")
//获取元素内容
text()
3、表单的值val()（相当于原生的value）
//设置元素内容
val("内容")
//获取元素内容
val()
1.2.6 jQuery元素操作
1、遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就要用到遍历。
（1）语法1
-
each()方法遍历匹配的每一个元素，主要用DOM处理each每一个
-
里面的回调函数有两个参数：index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象
$("div").each(function(index,domEle){xxx;})
（2）语法2
-
each()方法可用于遍历任何对象，主要用于数据处理，比如数组、对象
-
里面的回调函数有两个参数：index是每个元素的索引号，element是遍历内容
$.each(object,function(index,element){xxx;})
2、创建元素
//动态创建标签
$("<li></li>");
3、添加元素
-
内部添加元素是父子关系
-
外部添加元素是兄弟关系
（1）内部添加
//把内容放到匹配元素内部最后面，类似于原生appendChild
element.append("内容")
//把内容放到匹配元素内部最前面
element.prepend("内容")
（2）外部添加
//把内容放到匹配元素内部后面
element.after("内容")
//把内容放到匹配元素内部前面
element.before("内容")
4、删除元素
//删除匹配的元素（本身）
element.remove()
//删除匹配的元素集合中所有的子节点
element.empty()
//清空匹配的元素内容
element.html("")
1.2.7 jQuery尺寸、位置操作
1、jQuery尺寸
-
参数为空，则是获取相应值，返回的是数字型
-
如果参数为数字，则是修改相应值
-
参数可以不必写单位
| 语法 | 用法 |
|---|---|
| width()/height() | 取得匹配元素宽度和高度值，只算width/height |
| innerWidth()/innerHeight() | 取得匹配元素宽度和高度值，包含padding |
| outerWidth()/outerHeight() | 取得匹配元素宽度和高度值，包含padding、border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值，包含padding、border、margin |
2、jQuery位置
（1）offset()设置或获取元素的偏移
-
offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
-
该方法有两个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
-
可以设置元素的偏移：offset({top:10,left:30});
（2）position()获取元素偏移
-
offset()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
-
只可获取不可设置
（3）scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
-
scrollTop()方法设置或返回被选元素被卷去的头部
-
scrollLeft()方法设置或返回被选元素被卷去的左侧
1.3 jQuery事件
1.3.1 jQuery事件注册
单个事件注册，事件不加on
element.事件(function(){})
1.3.2 jQuery事件处理
1、事件处理on()绑定事件
（1）on()方法在匹配元素上绑定一个或多个事件的事件处理函数，可以以对象的形式写
element.on(events,[selector],fn)
-
events：一个或多个用空格分隔的事件类型，如”click“或”keydown“
-
selector：元素的子元素选择器
-
fn：回调函数，即绑定在元素身上的侦听函数
//举例
//方法1
$("div").on({
mouseenter: function(){
$(this).css("background","skyblue");
},
click: function(){
$(this).css("background","yellow");
},
mouseleave: function(){
$(this).css("background","blue");
}
})
//方法2，处理事件效果相同
$("div").on("mouseenter mouseleave",function(){
$(this).toggleClass("current");
})
（2）可以事件委派操作。事件委派就是把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
//click是绑定在ul身上的，但是触发的对象是ul里面的li
$(function(){
$("ul").on("click","li",function(){
alert(11);
});
})
（3）动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
//li是后来创建的，给未来元素绑定事件
$("ol").on("click","li",function(){
alert(11);
})
var li = $("<li>我是lili</li>");
$("ol").append(li);
2、事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
（1）接触所有事件
$("div").off();
（2）解除单个事件
$("div").off("click");
（3）解除事件委托
$("ul").off("click","li");
3、触发事件一次one()
-
有的事件只想触发一次，使用one()来绑定事件
-
适用方法与on()完全一致
element.on(events,[selector],fn)
4、自动触发事件trigger()
//type指的是事件类型，例如click，mouseenter等等
//第一种简写，会触发元素的默认行为
element.type()
//第二种自动触发模式，会触发元素的默认行为
element.trigger("type")
//第三种触发方式，不会触发元素的默认行为
element.triggerHandler("type")
//举例
$("div").on("click",function(){
$(this).addClass("current");
});
//方式1
$("div").click();
//方式2
$("div").trigger("click");
//方式3
$("div").triggerHandler("click");
1.3.3 jQuery事件对象
element.on(events,[selector],function(event){})
-
阻止默认行为：event.preventDefault()或者return false
-
阻止冒泡：event.stopPropagation();
1.4 jQuery其他方法
1.4.1 jQuery对象拷贝
如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法
$.extend([deep],target,object1,[objectN])
（1）deep：如果设置为true为深拷贝，默认为false浅拷贝
（2）target：要拷贝的目标对象
（3）object1：待拷贝到第一个对象的对象
（4）objectN：待拷贝到第N个对象的对象
（5）深拷贝与浅拷贝的区别
-
浅拷贝：把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
-
深拷贝：完全克隆（拷贝的是对象而不是地址），修改目标对象不会影响被拷贝对象
注意：若原来对象中有数据，则拷贝后会与以前的数据合并，重复的进行覆盖
1.4.2 多库共存
1、让其他js库和jQuery不发生冲突，可以同时存在，这叫多库共存
2、解决方法
（1）把里面的$符号统一改成jQuery
（2）jQuery变量规定新的名称：$.noConflict() var xx = $.noConflict()
1.4.3 jQuery插件
1、jQuery插件网站
（1）jQuery插件库：jQuery插件库-收集最全最新最好的jQuery插件
（2）jQuery之家：jQuery之家-自由分享jQuery、html5、css3的插件库
2、全屏滚动（fullpage.js）
gitHub：https://github.com/alvarotrigo/fullPage.js
中文翻译网站：jQuery全屏滚动插件fullPage.js演示_dowebok
3、bootstrap.js
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
