jQuery总结
jQuery第一天
jQuery
jQuery是一个快速,简洁的JavaScript库 JavaScript库:是一个封装好的特定的集合(方法和函数) 学习jQuery本质:学习调用这些函数(方法) j 就是 JavaScript；Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
JavaScript库
jquery,prototype,dojo,YUI
jQuery优点
轻量级,文件叫嚣,不影响页面加载 链式编程,隐式迭代 支持插件扩展开发 免费,开源
jQuery
jQuery入口函数
第一种
$(function () {
// 此处是页面 DOM 加载完成的入口
});
第二种
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
注意点：
等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
不同于原生 js 中的 load 事件等页面文档、外部的js 文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。
jQuery 的顶级对象 $
$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 ，但一般为了方便，通常都直接使用 $ 。 $ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用包装成jQuery对象，就可以调用jQuery 的方法。
jQuery 对象和 DOM 对象
js的对象只能用JS的属性和方法
Jq的对象只能用JQ的属性和方法
用原生 JS 获取来的对象就是 DOM 对象【document.getElement等方法】
jQuery 方法获取的元素就是 jQuery 对象【$('div')等】
jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）
相互转换
因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
DOM 对象转换为 jQuery 对象： $(DOM对象)
jQuery 对象转换为 DOM 对象（两种方式）
$('div') [index] index 是索引号
$('div') .get(index) index 是索引号
jQuery 常用API
1. jQuery 选择器 2. jQuery 样式操作 3. jQuery 动画效果 4. jQuery 属性操作 5. jQuery 文本属性值 6. jQuery 元素操作 7. jQuery 尺寸、位置操作
选择器
$('#id')==》指定id元素
$('*')==》所有元素
$('.class')==》指定class元素
$('div')==》根据标签获取元素
$('div,p,li')==》获取多个
$('li.class')==>交集获取
$('ul>li')==>子代
$('ul li')==>后代
筛选选择器
$('li:first')：第一个元素
$('li:last')：最后一个元素
$('li:eq(2)')==》索引为2 //注意：索引是从0开始的
$('li:odd')==》索引为奇数
$('li:even')==》索引为偶数
筛选方法
$('li').parent()父级
$('ul').children('li');子集【如果不加参数，获取所有的，如果添加指定的元素，按照指定的找】
$('ul').find('li')后代
$('li').siblings('li')兄弟
$('li'),nextAll();后面的
$('li').prevAll();前面的
判断是否具有某个类名：$('div').hasClass('aaa')
$('div').eq(index);指定索引方法【eq推荐用方法】
重点记住： parent() children() find() siblings() eq()
parents获取祖先元素方法
隐式迭代
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
排它思想
$(this).css('color','red');
$(this).siblings().css('color','');
链式编程
$(this).css('color', 'red').sibling().css('color', '');
样式操作
参数只写属性名，则是返回属性值【$(this).css(''color'');】
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，
【$(this).css({ "color":"white","font-size":"20px"});】引号，值如果是数字可以不用跟单位和引号【$(this).css(''color'', ''red'');】
样式类操作
添加类【$(“div”).addClass(''current'');】
移除类【$(“div”).removeClass(''current'');】
切换类【$(“div”).toggleClass(''current'');】
原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名
动画效果
显示隐藏切换
show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed,[easing],[fn]]) （1）参数都可以省略， 无动画直接显示。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
滑动效果
slideDown([speed,[easing],[fn]]) slideUp([speed,[easing],[fn]]) slideToggle([speed,[easing],[fn]]) //参数同显示隐藏
事件切换 hover([over,]out)**
（1）over:鼠标移到元素上要触发的函数（相当于mouseenter） （2）out:鼠标移出元素要触发的函数（相当于mouseleave） （3）如果只写一个函数，则鼠标经过和离开都会触发它
stop()
(1）stop() 方法用于停止动画或效果。 (2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画
淡入淡出
fadeIn([speed,[easing],[fn]]) fadeOut([speed,[easing],[fn]]) fadeToggle([speed,[easing],[fn]]) fadeTo([[speed],opacity,[easing],[fn]])
animate
animate(params,[speed],[easing],[fn]) （1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
jQuery第二天
jQuery 属性操作
设置或获取元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性，比如 <a>元素里面的 href ，比如 <input>元素里面的 type。
prop('属性) //获取语法
prop(''属性'', ''属性值'') //设置属性语法
设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index=“1”。
attr(''属性'')
attr(''属性'', ''属性值'')
数据缓存 data()[了解]
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构，所以元素上无法查看。一旦页面刷新，之前存放的数据都将被移除。
jQuery 内容文本值
普通元素内容 html()**（相当于原生inner HTML)
获取：html() 设置：html(''内容'')
普通元素文本内容 text() (**相当与原生** innerText**)
获取：text() 设置：text(''文本内容'')
表单的值 val()**（ 相当于原生value)
获取：val() 设置：val(''内容'') // 设置表单的值
jQuery第三天
jQuery** 元素操作
主要是遍历、创建、添加、删除元素操作。
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
语法1：$("div").each(function(index, domEle) { xxx; }）
\1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个 \2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象 \3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法2：$.each(object，function(index, element){ xxx;}）
\1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象 \2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
创建,添加,删除
语法：$(<li></li>); //创建后需要进行添加才能显示到页面
添加元素
element.append(''内容'') [把内容放入匹配元素内部最后面，类似原生 appendChild。] //element是父元素
element.prepend(''内容'') 把内容放入匹配元素内部最前面。
删除元素
element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容
②empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。
jQuery 尺寸
width()、height()【只算width和height】 innerWidth()、innerHeight()【包含padding+width】 outerWidth()、outerHeight()【包含padding、border、width】 outerWidth(true)、outerHeight(true)【包含padding、border、margin、width】 outerWidth(200,true)设置的时候数字放前面 以上参数为空，则是获取相应值，返回的是数字型。 如果参数为数字，则是修改相应值。 参数可以不必写单位。
jQuery 位置
offset() 方法设置或返回被选元素相对于**文档**的偏移坐标，跟父级没有关系。
offset(),offset().top //该方法有2个属性 left、top,若不指明,返回两个值
offset({ top: 10, left: 30 }); //设置的时候以对象传值
position() 获取元素偏移
position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
获取方法同offset,只能获取不能设置
scrollTop()、scrollLeft()设置**或获取元素被卷去的头部和左侧**
①scrollTop() 方法设置或返回被选元素被卷去的头部。
②不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
scroll事件
jQuery第四天
课程回顾：
元素操作：
元素遍历==>$(元素).each(function (index,elm) {代码})
$.each( 对象，function (index，elm) {} )；
创建：$('标签');
添加：
内部添加：element.append(元素)，element.prepend(元素)
外部添加：element.after(元素)，element.before(元素)
移除：remove，empty，html('')
尺寸：
winth、height【内容】
innerWidth、innerHeight：【padding+内容】
outerWidth、outerHeight：【padding+border+内容】
outerWidth(true)、outerHeight(true)【margin+padding+border+内容】
位置：
文档：offset()：offset.top、offset.left
定位元素：position()：position().top、position().left
距离：scrollTop、scrollLeft
parents
jQuery 事件
目标：
能够说出4种常见的注册事件 能够说出 on 绑定事件的优势 能够说出 jQuery 事件委派的优点以及方式 能够说出绑定事件与解绑事件
jQuery事件注册**
语法：element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：element.on(events,[selector],fn)
\1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。 \2. selector: 元素的子元素选择器 。 \3. fn:回调函数 即绑定在元素身上的侦听函数。
on() 方法优势1：
1、可以绑定多个事件，多个处理事件处理程序。
$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});
on() 方法优势2：
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$('ul').on('click', 'li', function() {
alert('hello world!');
});
在此之前有bind(), live()，delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
on() 方法优势3：
动态创建的元素，click()没有办法绑定事件，on() 可以给动态生成的元素绑定事件
$(“div").on("click",”p”, function(){
alert("俺可以给动态生成的元素绑定事件")
});
案例：发布微博案例
①点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。
②点击的删除按钮，可以删除当前的微博留言。
事件处理 off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序。
$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托
如果有的事件只想触发一次， 可以使用 one()来绑定事件。
自动触发事件trigger()
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发
element.click() // 第一种简写形式
element.trigger("type")//第二种自动触发模式
$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击
element.triggerHandler(type) // 第三种自动触发模式
triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
jQuery事件对象
事件被触发，就会有事件对象的产生。
【event==》事件对象】
element.on(events,[selector],function(event){})
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()
jQuery 其他方法
jQuery 插件
jQuery插件**
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。 **jQuery** **插件常用的网站：** 1. jQuery 插件库 http://www.jq22.com/ 2. jQuery 之家 http://www.htmleaf.com/ **jQuery** **插件使用步骤：** 1. 引入相关文件。（jQuery 文件 和 插件文件） 2. 复制相关html、css、js (调用插件)。
图片懒加载或者（BOOTSTRAP插件）
（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片。
我们使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面
注意：
1、要引入JQuery 2、插件JS【js引入文件和js调用必须写到 DOM元素（图片）最后面】 3、将图片 src 替换为 data-lazy-src 4、调用lazyLoadInit(）
BOOTSTRAP插件
1、引入CSS、引入JQ、引入JS 2、.container 3、复制粘贴
jQuery多库共存
jQuery使用作为标示符，随着jQuery的流行,其他 js 库也会用这作为标识符，
这样一起使用会引起冲突。
需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery 解决方案：
把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')
jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();