jquery
1.jquery的基本使用
1.1jquery入口函数
//1.
$(document).ready(function(){
;//此处是页面DOM加载完成的入口
});
//2.
$(function(){
;//此处是页面DOM加载完成的入口
})
1.等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jquery帮我们完成了封装
2.相当于原生js的DOMContentLoaded
3.不同于原生js中的事件load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码
1.2jquery的顶级对象$
1.$是jquery的别称，在代码中可以使用jquery代替$
2.$是jquery的顶级对象，相当于原生js中的window。把元素利用$包装成jquery对象，就可以调用jquery中的方法。
1.3jquery对象和DOM对象
jquery对象其实就是DOM对象的包装集包装了DOM对象的集合（伪数组）
//1.DOM对象：用原生js获取过来的对象就是DOM对象
var myDiv=document.querSelector('div');//myDiv就是DOM对象
console.dir(myDiv);
//2.jquery对象：用jquery方法获取过来的对象就是jquery对象。本质：通过$把DOM元素进行了包装
$('div');//$('div')是一个jquery对象
console.dir($('div'));
//3.jquery对象只能使用jquery方法
//DOM对象只能使用原生js属性和方法
1.4jquery对象和DOM对象的转换
原生的一些属性和方法jquery没有封装，想要使用这些方法就需要把jquery对象转化为DOM对象才能使用
1.DOM对象转换为jquery对象：
$(DOM对象)
2.jquery对象转换为DOM对象（两种方式）
1.$(‘div’)[index] index是索引号
2.$(‘div’).get(index) index是索引号
<video src='' muted></video>
<script>
//1.DOM对象转换为jquery对象
var myvideo=document.querySelector('video');//DOM属性
$(myvideo)//转换为jquery对象
//2.jquery对象转换为DOM对象
$('video')//jquery对象
$('video')[0].play()//转化为DOM对象使用play属性
$('video').get(0).play()//转换为DOM对象使用play属性
</script>
2.jquery常用api
2.1jquery选择器
2.1.1jquery基础选择器
jquery选择器是jquery提供的一组方法，让我们更方便的获取到页面中的元素。jquery选择器返回的是jquery对象
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(’#id’) | 获取指定ID的元素 |
| 类选择器 | $(’.class’) | 获取同一类class的元素 |
| 标签选择器 | $(‘div’) | 获取同一类标签的元素 |
| 并集选择器 | $(‘div,p,li’) | 使用逗号分割，只要符合条件之一就可 |
| 交集选择器 | $(‘div.redClass’) | 获取class为redClass的div元素 |
| 子代选择器 | $(‘ul>li’) | 使用>号，获取儿子层级的元素，注意并不会获取孙子层级的元素 |
| 后代选择器 | $(‘ul li’) | 使用空格，代表后代选择器，获取ul下所有li元素，包括孙子等 |
2.1.2隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化操作，方便调用。
$('div').css('background','pink');
//将所有div标签的背景颜色全改为粉色
//隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
2.1.3jquery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(‘li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | 获取最后一个li元素 |
| :eq(index) | $(‘li:eq(2)’) | 获取到的li元素中，选择索引号为2的元素 |
| :odd | $(‘li:odd’) | 选择索引号为奇数的所有li元素 |
| :even | $(‘li:even’) | 选择索引号为偶数的所有li元素 |
2.1.4jquery筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
| 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() | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $(’.last’).prevtAll() | 查找当前元素之前所有同辈元素 |
| hasClass(class) | $(div).hasClass(protected) | 检查当前元素是否含有某个特定的类，如果有，返回true |
| eq(index) | $(‘li’).eq(2) | 相当于$(‘li:eq(2)’) |
2.2样式设置
2.2.1类名设置
jquery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式
1.参数只写属性名，则返回属性值
$(this).css('color');
2.参数是属性名，属性值，逗号分隔，是设置一组样式
$(this).css('color','red');
3.参数可以是对象形式，方便设置多组样式。
$(this).css({'color':'red','font-size':'20px'});
2.2.2设置类样式方法
1.添加类
$('div').addClass('class');
2.删除类
$('div').removeClass('class');
3.切换类
$('div').toggleClass('class');
2.2.3类操作与className区别
原生js中className会覆盖元素原先里面的类名
jquery里面类操作只是对指定类进行操作，不影响原先的类名
2.3jquery效果
2.3.1显示隐藏
1.显示
$('div').show([speed,[easing],[fn]]);
2.隐藏
$('div').hide([speed,[easing],[fn]]);
3.切换
$('div').toggle([speed,[easing],[fn]]);
4.参数含义
1.参数可以都省略，无动画直接显示
2.speed：三种预定速度之一的字符串（slow，normal，fast）或表示动画时长的毫秒数
3.easing：（Optional）用来指定切换效果，默认是swing，可用参数 linear
4.fn：回调函数
2.3.2滑动效果
1.向下滑动
$('div').slideDown([speed,[easing],[fn]]);
2.向上滑动
$('div').slideUp([speed,[easing],[fn]]);
3.切换滑动
$('div').slideToggle([speeed,[easing],[fn]]);
4.参数含义
1.参数可以都省略，无动画直接显示
2.speed：三种预定速度之一的字符串（slow，normal，fast）或表示动画时长的毫秒数
3.easing：（Optional）用来指定切换效果，默认是swing，可用参数 linear
4.fn：回调函数
2.3.3动画队列及其停止排队方法
1.动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
2.停止排队
stop()
1.stop()方法用于停止动画或者效果
2.注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画
2.3.4淡入淡出效果
1.淡入效果
$('div').fadeIn([speed,[easing],[fn]]);
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次
2.淡出效果
$('div').fadeOut([speed,[easing],[fn]]);
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次
3.淡入淡出切换
$('div').fadeToggle([speed,[easing],[fn]]);
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次
4.修改透明度
$('div').fadeTo([[speed],opacity,[easing],[fn]]);
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字。
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
2.4自定义动画函数
$('div').animate(params,[speed],[easing],[fn]);
params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法。
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次。
2.4jquery属性操作
2.4.1设置或获取元素固有属性值prop()
元素固有属性就是元素本身自带的属性
1.获取属性语法
$('div').prop("属性");
2.设置属性语法
$('div').prop('属性','属性值');
2.4.2设置或获取元素自定义属性值attr()
1.获取属性语法
$('div').attr('属性');
2.设置属性语法
$('div').attr('属性','属性值')；
2.5jquery内容文本值
主要针对元素的内容还有表单的值操作
2.5.1普通元素内容html()
相当于原生innerHTML
.html() //获取元素里的内容
.html('内容')//设置元素的内容
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
2.5.2获取设置元素文本内容 text()
相当于原生innerText
.text() //获取元素里的内容 只获得元素的内容不带标签
.text('内容') //设置元素的内容
2.5.3获取设置表单值 val()
相当于原生value()
.val()//获取表单内的内容
.val('内容')//设置表单的内容
2.6jquery元素操作
主要是遍历、创建、添加、删除元素操作。
2.6.1遍历元素
jquery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历
语法1：
$('div').each(function(index,domEle){});
1.each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2.里面的回调1函数有两个参数：index是每个元素的索引号；domEle是每个DOM元素，不是jquery元素
3.想要使用jQuery方法，需要给这个DOM元素转换为jquery对象$(domEle)
语法2：
$.each(object,function(index,element){});
1.$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2.里面的函数有2个参数：index是每个元素的索引号；element遍历内容
2.6.2创建元素
语法：
$('<li></li>');
动态创建一个li标签
2.6.3添加元素
1.内部添加
element.append('内容');
把内容放到匹配元素内部最后面，类似原生appendChild
element.prepend('内容');
把内容放到匹配元素内部最前面
2.外部添加
element.after('内容');//把内容放到目标元素后面
element.before('内容');//把内容放到目标元素的前面
2.6.4删除元素
1.remove()方法
删除元素标签
element.remove([expr]);
expr：用于筛选的jquery表达式
2.empty()方法
删除匹配的元素集合中所有的子节点。
element.empty()
2.7jquery尺寸、位置操作
2.7.1jquery尺寸
| 语法 | 用法 |
|---|---|
| width()/height() | 取得匹配元素宽度或高度，只算width/height |
| innerWidth()/innerHeight() | 取得匹配元素宽度或高度，包含padding |
| outerWidth()/outerHeight() | 取得匹配元素宽度或高度，包含padding、border |
| outerWidth(true)/outerHeight() | 取得匹配元素宽度或高度，包含padding、border、margin |
以上参数为空，则是获取相应值，返回是数字型
如果参数为数字，则是修改相应值
参数可以不用写单位
2.7.2jquery位置
位置主要有三个：offset()、position()、scrollTop()/scrollLeft()
1.offset()设置或获取元素偏移
1.offset()方法设置或返回被选元素相对与文档的偏移坐标，跟父级没有关系
2.该方法有两个属性left、top
3.可以设置元素的偏移：offset({top:10,left:10});
2.position()获取元素偏移
1.获取匹配元素相对于父元素的偏移
2.返回的对象包含两个整型属性：top和left
3.scrollTop()/scrollLeft()设置或获取元素滚动量
获取匹配元素相对滚动条顶部的偏移
3.jquery事件处理
3.1jquery事件注册
3.1.1单个事件注册
element.事件(function(){});
3.1.2事件处理on()绑定事件
element.on(events,[selector],fn);
1.events:一个或多个用空格分隔的事件类型
2.selector：元素的子元素选择器
3.1.2on()方法的优势
1.可以绑定多个事件
2.可以事件委派
3.动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
3.1.3one()方法注册一次性事件
one(type,[data],fn)
**type:**添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
**data:**将要传递给事件处理函数的数据映射
**fn:**每当事件触发时执行的函数。
3.1.4自动触发事件trigger()
1.简写形式
element.click();
2.自动触发模式
element.trigger("type");
3.自动触发模式，不会触发默认行为
element.triggerHandler(type);
3.2事件解除
off()方法可以移除通过on()方法添加的事件处理程序。
off(events,[selector],[fn]);
events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", “keydown.myPlugin”, 或者 “.myPlugin”.
selector:一个最初传递到.on()事件处理程序附加的选择器。
fn:事件处理程序函数以前附加事件上，或特殊值false.
3.3jquery事件对象
参照jsDOM事件对象
4.jquery其他方法
4.1jquery对象拷贝
如果想要把某个对象拷贝（合并）给另一个对象使用，可以使用$.extend()方法
$.extend([deep],target,object1,[objectN]);
1.deep:如果值为true，则执行深拷贝，默认为false，浅拷贝
2.target：待修改对象
3.object1：待合并到target的对象
4.objectN：待合并到target的对象
5.浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象
6.深拷贝完全克隆（拷贝的对象，而不是地址）
4.2jquery多库共存
jquery使用$作为标识符，但其他js库也会使用这个符号作为标识符，这样一起使用会引起冲突
解决方案：
1.把里面的$符号统一改为jQuery
2.jQuery变量规定新的名称：$.noConflict()
4.3jquery插件
4.3.1插件网址
jquery插件常用的网站：
1.jquery插件库：http://www.jq22.com/
2.jquery之家：http://www.htmleaf.com/
jquery插件使用步骤：
1.引入相关文件。（jquery文件和插件文件）
2.复制相关html、css、js(调用插件)。
4.3.2图片懒加载插件
图片使用延迟加载在可提高网页下载速度。它能帮助减轻服务器负载
使用jquery插件库EasyLazyload
4.3.3全屏滚动插件
网址：
1.github：https://github.com/alvarotrigo/fullPage.js
2.中文翻译网站：http://www.dowebok.com/demo/2014/77/
4.3.4botstrap js插件
bootstrap框架也是依赖jquery开发的
132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
