jQuery总结

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();