jQuery

概念

jQuery>>>javaScript库

j>>JavaScript；Query>>查询； 查询js，把js中的DOM操作做了封装，可以快速的查询使用里面的功能。

jQuery封装了JvaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

学习Query本质：学习调用这些函数（方法）

加快前端开发速度

使用jQuery之前要引入jQuery库

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> //1.11.3版本 报错？？？ <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

基本使用

入口函数

$(function(){ ...//此处是页面DOM加载完成的入口 }) $(document).ready(function(){ ...//此处是页面DOM加载完成的入口 }) 等到DOM结构渲染完毕即执行可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。相当于原生js的DOMContentLoaded。不同于原生js中的load事件是等页面文档、外部js文件、css文件、图片加载完毕才执行内部代码。如果放在body后，就不需要写入口函数

顶级对象$

$是jQuery的别称，在代码中可以使用jQuery代替$，但一般为方便直接使用$。$是jQuery的顶级对象，相当于原生js中的window，把元素利用$包装称Query对象，就可以调用jQuery的方法。

jQuery对象和DOM对象

DOM对象：用原生js获取的对象就是DOM对象

var myDiv=document.querySelector('div'); //myDiv是DOM对象 var mySpan=document.querySelector('span'); //mySpan是DOM对象

jQuery对象：用jquery方式获取的对象，以伪数组的方式存储

​ 本质：通过$把DOM元素进行了包装

$('div'); //$('div')是一个jQuery对象 $('span'); //$('span')是一个jQuery对象

jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法

myDiv.style.display='none'; //正确 myDiv.hide(); //错误，DOM对象不能使用jQuery里的hide方法 $('div').style.dispaly='none'; //错误，jQuery对象不能使用原生js的属性和方法

DOM对象和jQuery对象的相互转换

因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要使用这些属性和方法需要将jQuery对象转换成DOM对象。

DOM对象>>jQuery对象：$(DOM对象)

$(‘标签’) || $(已获取的DOM对象)

jQuery对象>>DOM对象（两种方式）

$(‘div’)[index] index是索引号$(‘div’).get(index) index是索引号

jQuery选择器

基础选择器

用法： $(“选择器”) //里面直接写CSS选择器即可，但是注意要加引号

名称用法描述ID选择器$("#id")获取指定ID的元素全选选择器$("*")匹配所有元素类选择器$(".class")获取同一类class的元素标签选择器$(“div”)获取同一类标签的所有元素并集选择器$(“div,p,li”)选取多个元素交集选择器$(“li.current”)交集元素

层级选择器

名称用法描述子代选择器$(“ul>li”);使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素后代选择器$(“ul li”);使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

⭐隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程

理解：不用我们再进行循环，简化操作

jQuery筛选选择器

语法用法描述:first$(“li:fist”)获取第一个li元素:last$(“li:last”)最后一个:eq(index)$(“li:eq(2)”)获取到的li中选择索引号为2的元素，索引号从0开始:odd$(“li:odd”)获取到的li中选择索引号为奇数的元素:even$(“li:even”)选择索引号为偶数的

⭐jQuery筛选方法

语法用法说明parent()$(“li”).parent();查找F父级（）最近一级children(selector)$(“ul”).children();相当于ul>li,最近一级（亲儿子）find(selector)$(“ul”).find(“li”);相当于ul li，后代选择器siblings(selector)$(".first").subligns(“li”);查找兄弟节点，不包括自己nextAll([expr])$(".first").nextAll()查找当前元素之前的同辈元素prevAll([expr])$(".last").prevAll()查找当前元素之后的同辈元素hasClass(class)$(‘div’).hasClass(“protected”)检查当前的元素是否含有特定的类，有则返回trueeq(index)$(“li”).eq(2);相当于$(“li:eq(2)”)，index从0开始

注：一般选择eq(index)，筛选选择器中的index是字符串，需要转换

​ 事件：mouseover():鼠标经过 mouseout: 鼠标离开

排他思想

当前元素设置样式，其余的兄弟清除样式

（通常用到sublings()方法）

样式操作

操作css方法

jQuery可以使用css方法修改简单元素样式，也可以操作类，修改多个样式

参数只写属性名>>>>返回属性值

$(this).css(“color”);

参数是属性名，属性值，逗号分隔，，是设置一组样式，属性必须加引号，数字可以不用跟单位和引号

$(this).css(“color”,“red”);

参数可以是对象形式，方便设置多组样式，属性名和值用冒号隔开，属性可不加引号

$(this).css({“color”:“white”,“font-size”:“20px”});

设置类样式方法

作用等同于以前的classlist，可以操作类样式，注意类操作样式的参数不要加点。

添加类

$(“div”).addClass(“current”)； //添加div中类名current 相当于追加类名

移除类

$(“div”).removeClass(“current”); //移除div类名current

切换类

$(“div”).toggleClass(“current”); //切换有无类名两种状态

类操作与className区别

原生js中className会覆盖元素里原先的类名

jQuery里面类操作只是对指定类进行操作，不影响原先的类名

jQuery效果

显示隐藏：show() hide() toggle() >>切换

滑动：slideDown() slideUp() slideToggle()

淡入淡出：fadeln() fadeOut() fadeToggle() fadeTo()

自定义动画:animate()

显示隐藏效果

显示语法：show([speed],[easing],[fn])

参数都可省略，无动画直接显示，

fn：回调函数，动画完成时执行的函数，每个元素执行一次

一般情况下都不加参数显示隐藏就可以

淡入淡出效果

淡入语法：fadeIn([speed],[easing],[fn])；

speed：三种预定速度之一的字符串或表示动画市场的毫秒数值

渐进方式调整到指定透明度：fadeTo([speed],opacity,[eassing],[fn])

opacity：透明度必须写，取值0~1

speed:三种预定速度之一的字符串（”show“，”normal“，or”fast“）或表示动画市场的毫秒数值,必须写

easing:默认swing，可用linear

注意：解决排队效果，所有动画前面加stop()

eg: .stop().fadeIn()

自定义动画animate

语法：animate(params,[speed],[easing],[fn])

params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采用驼峰命名，其余参数可省略。

注意：移动元素位置时要给元素设定position

案例：手风琴效果（未做

属性操作

设置或获取元素固有属性prop()

固有属性：元素本身自带的属性，例如元素里面的href

获取属性：element.prop(“属性”);

设置属性：element.prop(“属性”，“属性值)

设置或获取元素自定义属性attr()

自定义属性：用户自己给元素添加的属性

获取：element.attr(“属性”);

设置：element.attr(“属性”，“属性值)

该方法也可用于H5自定义属性 data-index

内容文本值

主要针对元素的内容还有表单的值的操作

普通元素内容html()

相当于原生innerHTML

html() //获取元素内容 $("div").html(); html(“内容”) //设置元素内容 &("div").html("change");

普通元素文本内容text()

相当于原生innerText

text() //获取元素文本内容text(“文本内容”) //设置元素文本内容

表单的值val()

相当于原生value

val()val(“值”)

元素操作

主要是遍历、创建、添加、删除元素操作

遍历元素

隐式迭代对同一类元素做了同样的操作，如果想对同一类元素做不同操作，就需要用到遍历（类似for，但比for强大）

语法1

$(“div”).each(function(index,domEle) { xxx; } )

each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个index是索引号(可以自己指定索引号名称)，domEle是每个DOM元素对象，不是jQuery对象要想使用jQuery方法，需要给这个DOM对象转换成jQuery对象$(ddomEle)

语法2

$.each(object,function (index,element) { xxx; } )

$.each()方法可用于遍历任何对象，主要用于数据处理，比如对象、数组index：索引号 element：遍历内容

创建、添加、删除元素

创建元素

var li = $("<li></li>");

动态创建了一个<li>,但并不会在页面中出现，需要添加到页面

添加元素

内部添加

element.append(“内容”) //放到内容最后面

element.prepeng(“内容”) //最前面

$(“ul”).append(li);

外部添加

element.after(“内容”) //目标元素后面element.before(“内容”) //目标元素前面

删除元素

element.remove() //删除匹配元素 自身

element.empty() //删除匹配元素集合中所有子节点(孩子)

element.html() //清空匹配元素集合中所有子节点(孩子)

注：empty()和html()作用相同

jQuery事件

事件处理

单个事件注册：element.事件( function() {} )

$(“div”).click(function() { 事件处理程序 } )

事件处理on()绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

语法：element.on(events,[selector],fn)

events:一个或多个用空格隔开的事件类型，如click或keydownselector：元素的子元素选择器fn：回调函数 即绑定在元素身上的侦听函数 //on绑定多个事件，且多个事件处理函数不同时使用对象的方式 $("div").on({ mouseenter:function() { $(this).css("background","red"); }, click:function() { $(this).css("background","greeb"); }, mouseleave:function(){ $(this).css("background","blue"); } }) //多个事件处理函数相同 $("div").on("mouseouver mouseleave",function(){ alert(11); })

on()方法优势1：

可以绑定多个事件，多个事件处理程序

优势2：

可以实现事件委派（委托）操作——把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

//click是绑定在ul身上，但是触发对象是ul中的li，事件委托 $("ul").on("click","li",function() { alert("hello world"); });

优势3：

可以给动态生成的元素绑定事件。 click()方法没办法给动态创建的元素绑定事件。

<ol></ol> $("ol").on("click","li",function() { alert(11); }) var li=$("<li>我是后来创建的</>"); $("ol").append(li); //不能用 //$("ol li").click(function(){ // alert(11); //})

事件处理0ff()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

$("p").off(); //解绑p元素所有事件处理程序 $("p").off("click"); //解绑p元素的点击事件 后面的foo是侦听函数名 $("p").off("click","li"); //解绑事件委托

只触发一次事件one()

事件只想出发一次，可直接使用one（）方法，不必绑定解绑，更加方便

$("p").one("click",function(){ alert(1); })

自动触发事件trigger()

元素.事件() //会触发元素默认行为element.trigger(“事件”) //会触发元素默认行为element.triggerHandler(“事件”) //不会触发元素的默认行为

jQuery事件对象

事件被触发就会有事件对象产生

element.on(events,[selector],function(event) {} )

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡:event.stopPagation()

jQuery其他方法

jQuery拷贝对象

语法：

$.extend([deep],target,object1,[objectN])

deep:如果设为true为深拷贝，默认为false浅拷贝target：要拷贝的目标对象object1：待拷贝到第一个对象的对象objectN： 第N个浅拷贝：把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象深拷贝：前面加true，完全克隆（拷贝的对象而不是地址），修改目标对象不会影响被拷贝对象（如果李米娜有不冲突的属性，会合并到一起有同名简单类型数据时（冲突属性），拷贝后会覆盖target里面原来的数据

多库共存

让jQuery和其他js库不存在冲突

解决方法：

统一把$改成jQueryjQuery遍历规定新的名称: $.noConflict() var xx=$.noComflict()

jQuery插件

jQuery插件常用网站

jQuery插件库 http://www.jq22.com/⭐jQuery之家 http://www.htmleaf.com

jQuery插件使用步骤

引入相关文件。（jQuery和插件文件）

复制相关html、css、js（调用插件）

在demo里复制相关源代码会好一点

图片懒加载

当页面滑动到可视区域，再显示图片

使用jQuery插件库 EasyLazyload。注意此时的js引入文件和js调用必须写在DOM元素（图片）最后面<<必须先有图片才可以懒加载

全屏滚动（fullPage.js）

github:https://github.com/alvarotrigo/fullPage.js

中文翻译网站：http://www.dowebok.com/demo/2014/77/

bootstrap JS插件

https://v3.bootcss.com

jQuery尺寸、位置操作

jQuery尺寸

语法用法width() /height()取得匹配元素宽度和高度值，只算width/heightinnerWidth() /innerHeight()取得匹配元素宽度和高度值，包含paddingouterWidth() /innerHeight()取得匹配元素宽度和高度值，包含padding、borderouterWidth()/outerHeight(true)取得匹配元素宽度和高度值，包含padding、border、margin 以上参数为空，则是获取相应数值，放回的是数字型如果参数为数字，则是修改相应值参数可以不必写单位

jQuery位置

主要有三个：offset()、position()、scrollTop()/scrollLeft()

offset()设置或获取元素偏移

offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系（即使父子之间有定位关系）

该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离

可以设置元素的偏移:offset({

top:10,

left:30

});

position()获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准

这个方法只能获取不能设置

scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

scrollTop()方法设置或返回被选元素被卷去的头部参数为空，放回数值，有参数设置偏移量坐标

案例：带有动画的返回顶部：利用动画和scrollTop

注意：不能是文档而是html和body元素做动画

//错误 //$(doucument).stop().animate({ // scrollTop:0; //}) $("body,html").stop().animate({ scrollTop:0; })