jQuery 学习笔记

（整理不易，若有帮助，请给个Star⭐）

jQuery概述

JavaScript库

• 仓库:可以把很多东西放到这个仓库里面。 找东西只需要到仓库里面查找到就可以了。

• JavaScript库:即library ,是一个封装好的特定的集合(方法和函数)。从封装大堆函数的角度理解库,就
  是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、 show ,比如获取元素等。

• 简单理解:就是一个JS 文件,面对我们原生js代码进行了封装,存放到面。这样我们可以快速高效的使用
  这些封装好的功能了。

• 比如jQuery ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)。

  jQuery的概念

• jQuery 是一个快速、简洁的JavaScript库,设计的宗旨是”write Less，Do More”, 即倡导写更少的代码,
  做更多的事情。

• j就是JavaScript; Query 查询;意思就是查询js ,把js中的DOM操作做了封装,我们可以快速的查询使用里
  面的功能。

• jQuery封装了JavaScript 常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
  学习jQuery本质:就是学习调用这些函数(方法)。

• jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。

jQuery的优点

• 优点

• 轻量级。 核心文件才几+kb ,不会影响页面加载速度
• 跨浏览器兼容。基本兼容了现在主流的浏览器
• 链式编程、 隐式迭代
• 对事件、 样式、动画支持,大大简化了DOM操作
• 支持插件扩 展开发。有着丰富的第三方的插件,例如: 树形菜单、日期控件、轮播图等
• 免费、开源

jQuery的基本使用

jQuery的下载

• 官网下载地址：http://jquery.com/download/
• jQuery版本有很多，分为1.x 2.x 3.x
• 1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
• 关于压缩版和未压缩版：
  • jquery.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
  • jquery.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

jQuery的使用步骤

• 1.引入jQuery文件
• 2.放置对应js文件

jQuery的入口函数

1
2
3
4
5
6
7
8

//第一种写法 
$(function() { 
    ... //此处是页面DOM加载完成的入口
});
//第二种写法 
$(document).ready(function() { 
    ... //此处是页面DOM加载完成的入口
});

• 1.等着DOM结构染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。
• 2.相当于原生js中的DOMContentL oaded.
• 3.不同于原生js中的load事件是等页面文档、外部的js文件、Css文件、图片加载完毕才执行内部代码。
• 4.更推荐使用第一种方式。

jQuery的顶级对象$

• 1.$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了便,通常都直接使用$。
• 2.$是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用jQuery的方法。

jQuery对象和DOM对象

• 1.用原生JS获取来的对象就是DOM对象

• 2.jQuery方法获取的元素就是jQuery对象。

• 3.jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。

• 4.jQuery对象只能使用jQuery方法，DOM对象则使用原生的JS属性和方法。

• DOM对象与jQuery对象之间是可以相互转换的。

• 因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装要想使用这些属性和方法需要把
  jQuery对象转换为DOM对象才能使用。

  1. DOM对象转换为jQuery对象: $(DOM对象)

     1

     $('div')

  2. jQuery对象转换为DOM对象(两种方式)

     1 2	$('div')[index] // index是索引号 $('div').get(index) // index是索引号

jQuery选择器

• 原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统标准。

  1	$("选择器") // 里面选择器直接写CSS选择器即可，但是要加引号

基本选择器（跟css的选择器用法一模一样）

层级选择器（跟css的选择器用法一模一样）

jQuery设置样式

1

$('div').css('属性','值')

隐式迭代(重要)

• 遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
• 简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,
  方便我们调用。

jQuery筛选选择器(这类选择器都带冒号)

jQuery筛选方法(重点)(筛选方法是方法)

重点：

parent()

children(selector)

find(selector)

siblings(selector)

eq(index)

jQuery样式操作

操作CSS方法

• jQuery可以使用CSS方法来修改简单元素样式;也可以操作类,修改多个样式。

• 1.参数只写属性名,则是返回属性值

  1	$(this).css("color");

• 2.参数是属性名,属性值,逗号分隔,是设置-组样式,属性必须加引号,值如果是数字可以不用跟单位和引号

  1	$(this).css("color", "red");

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

  1	$(this).css({"color":"white","font-size":"20px");

设置类样式方法

• 作用等同于以前的classList ,可以操作类样式,注意操作类里面的参数不要加点。

• 1.添加类

  1	$("div").addClass("current");

• 2.移除类

  1	$("div").removeClass("current");

• 3.切换类

  1	$("div").toggleClass("current");

类操作与className区别

• 原生JS中className会覆盖元素原先里面的类名。

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

jQuery效果

显示隐藏效果

• 1.隐藏语法规范

  1	hide([speed],[easing],[fn]])

• 2.隐藏参数

  (1)参数都可以省略,无动画直接显示。
  (2) speed :三种预定速度之一 的字符串( “slow” ，”normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
  (3) easing : (Optional)用来指定切换效果,默认是”swing” ,可用参数”Ilinear” 。
  (4) fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

滑动效果

• 1.滑动效果语法规范

  1 2 3 4 5 6

  // 下滑 slideDown([speed],[easing],[fn]]) // 上滑 slideUp([speed],[easing],[fn]]) // 切换 slideToggle([speed],[easing],[fn]])

• 2.滑动效果参数
  (1)参数都可以省略。
  (2) speed:三种预定速度之一 的字符串( “slow”，”normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
  (3) easing:(Optional)用来指定切换效果,默认是”swing” ,可用参数”linear” 。
  (4) fn:回调函数,在动画完成时执行的函数,每个元素执行次。

动画队列及其停止排队方法

• 1.动画或效果队列

• 动画或者效果一旦触发就会执行 ,如果多次触发,就造成多个动画或者效果排队执行。

• 2.停止排队

  1

  stop()

• (1) stop()方法用于停止动画或效果。

• (2)注意: stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

淡入淡出效果

• 1.淡入淡出语法规范

  1 2 3 4 5 6 7 8

  // 淡入 fadeIn([speed],[easing],[fn]]) // 淡出 fadeOut([speed],[easing],[fn]]) // 切换 fadeToggle([speed],[easing],[fn]]) // 设置透明度 speed 和 opacity(0~1) 必须写 fadeTo(speed,opacity,[easing],[fn]])

• 2.淡入淡出效果参数
  (1)参数都可以省略。
  (2) speed:三种预定速度之一 的字符串( “slow”，”normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
  (3) easing:(Optional)用来指定切换效果,默认是”swing” ,可用参数”linear” 。
  (4) fn:回调函数,在动画完成时执行的函数,每个元素执行次。

自定义动画animate

• 1.语法

  1	animate (params, [speed],[easing],[fn])

• 2.参数
  (1) params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
  (2) speed: 三种预定速度之一的字符串( “slow”，”normal” , or “fast” )或表示动画时长的毫秒数值(如 :1000)。
  (3) easing : (Optional)用来指定切换效果,默认是”swing” , 可用参数”Ilinear” 。
  (4) fn:回调函数,在动画完成时执行的函数, 每个元素执行次。

jQuery属性操作

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

• 所谓元素固有属性就是元素本身自带的属性,比如< a >元素里面的href , 比如< input >元素里的type。

• 1.获取属性语法

  1	prop("属性")

• 2.设置属性语法

  1	prop("属性", "属性值")

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

• 用户自己给元素添加的属性,我们称为自定义属性。比如给div添加index=“1”。

• 1.获取属性语法

  1	attr("属性") // 类似原生getAttribute()

• 2.设置属性语法

  1	attr("属性","属性值") // 类似原生setAttribute()

• 改方法也可以获取H5自定义属性

数据缓存data()

• data(方法可以在指定的元素上存取数据,并不会修改DOM元素结构。- 旦页面刷新,之前存放的数据都将被移除。

• 1.附加数据语法

  1	data("name","value") // 向被选元素附加数据

• 2.获取数据语法

  1	date("name") // 向被选元素获取数据

• 同时,还可以读取HTML5自定义属性data-index , 得到的是数字型

  获取data-index h5自定义属性 不用写data- 返回的是数字型

jQuery内容文本值

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

• 1.普通元素内容htmI() (相当于原生inner HTML)

  1 2	html() // 获取元素的内容 html("内容") // 设置元素的内容

• 2.普通元素文本内容text() (相当与原生 innerText)

  1 2	text() // 获取元素的文本内容 text("文本内容") // 设置元素的文本内容

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

• 3.表单的值val() (相当于原生value)

  1	val() // 获取设置表单值

jQuery元素操作

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

遍历元素

• jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一元素做不同操作,就需要用到遍历。

• 语法1 :

  1	$("div").each(function(index, domEle){ xxx;})

  1.each(方法遍历匹配的每一个元素。 主要用DOM处理。each每一 个

  2.里面的回调函数有2个参数: index 是每个元素的索引号; demEle是每个DOM元素对象,不是jquery对象

  3.所以要想使用jquery方法,需要给这个dom元素转换为jquery对象$(domEle)

• 语法2 :

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

• 1.$.each(方法可用于遍历任何对象。主要用于数据处理,比如数组,对象

  2.里面的函数有2个参数: index 是每个元素的索引号; element遍历内容

创建元素

• 语法:

  1	$("<li></li>");

  动态的创建了一一个< li >

添加元素

• 1.内部添加

• 把内容放入匹配元素内部最后面,类似原生appendChild。

  1 2	element.append("内容") // 把内容放入目标元素后面 element.prepend("内容") // 把内容放入目标元素前面

• 2.外部添加

  1 2	element.after("内容") // 把内容放入目标元素后面 element.before("内容") // 把内容放入目标元素前面

删除元素

• 语法:

  1 2 3

  element.remove() // 删除匹配的元素(本身) element.empty() // 删除匹配的元素集合中所有的子节点 element.html("") // 清空匹配的元素内容

jQuery事件注册

单个事件注册

• 语法:

  1 2	element.事件(function(){}) $("div").click(function(){事件处理程序})

• 其他事件和原生基本一致。
  比如mouseover、mouseout、 blur、 focus、 change、 keydown、 keyup、 resize、 scroll等

jQuery事件处理

事件处理on()绑定事件

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

• 语法:

  1	element.on(events,[selector], fn)

• 1. events:-个或多个用空格分隔的事件类型,如”lick’或”keydown”。
  2. selector:元素的子元素选择器。
  3. fn:回调函数即绑定在元素身上的侦听函数。

on()方法优势1 :

• 可以绑定多个事件,多个处理事件处理程序。

  1 2 3 4 5

  $("div").on({ mouseover:function(){}, mouseout:function(){}, click:function(){} });

• 如果事件处理程序相同

  1 2 3

  $("div").on("mouseover mouseout", function() { $(this).toggleClass ("current"); });

on()方法优势2 :

• 可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

  1 2 3

  $('ul').on('click','li', function() { alert('hello world!'); });

• 在此之前有bind(), live() delegate(等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。

on0方法优势3 :

• 动态创建的元素, click()没有办法绑定事件，on() 可以给动态生成的元素绑定事件

事件处理off()解绑事件

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

  1 2 3

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

• 如果有的事件只想触发一次，可以使用one()来绑定事件。

  1	$("p").one("click") // 只能触发点击事件一次

自动触发事件trigger()

• 有些事件希望自动触发比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  element.click() // 第一种简写形式 element.trigger ("type") //第二种自动触发模式 $("p").on("click", function () { alert("hi~"); }); $("p").trigger ("click"); //此时自动触发点击事件,不需要鼠标点击 element.triggerHandler("type") // 第三种自动触发模式 // 3.元素. triggerHandler("事件") 就是不会触发元素的默认行为 // 获取文本框焦点案例，光标闪烁是获取文本框的默认事件 $("input").on("focus", function() { $(this).val("你好吗"); }); // $("input").trigger("focus")；// 会触发事件 光标会闪烁 $("input").triggerHandler("focus");// 会触发事件 光标不会闪烁

jQuery事件对象

• 事件被触发,就会有事件对象的产生。

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

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

• 阻止冒泡: event.stopPropagation()

jQuery对象拷贝

• 如果想要把某个对象拷贝(合并)给另外-一个对象使用,此时可以使用$. extend()方法
  语法:

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

• 1. deep:如果设为true为深拷贝，默认为false浅拷贝

  2. target:要拷贝的目标对象

  3. object1:待拷贝到第一个对象的对象。

  4. objectN:待拷贝到第N个对象的对象。

  5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。

  6. 深拷贝,前面加true，完全克隆(拷贝的对象，而不是地址) ,修改目标对象不会影响被拷贝对象。

jQuery多库共存

• 问题概述:

• jQuery使用$作为标示符,随着jQuery的流行，其他js库也会用这$作为标识符,这样一起使用会引起冲突。

• 客观需求:

• 需要一个解决方案,让jQuery和其他的js库不存在冲突,可以同时存在,这就叫做多库共存。

• jQuery解决方案:

  1.把里面的$符号统-改为jQuery。比如jQuery(“div”)

  2.jQuery变量规定新的名称: $.noConflict() var xx = $.noConflict();

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 (调用插件)。

jQuery插件演示:

• 1.瀑布流

• 2.图片懒加载(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)
  当我们页面滑动到可视区域,再显示图片。

• 我们使用jquery插件库EasyLazyload。 注意,此时的js引入文件和js调用必须写到DOM元素(图片)最后面

• 3.全屏滚动( fullpage.js )

  gitHub : https://github.com/alvarotigo/fullPage.jis

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

• bootstrap JS插件:

  bootstrap框架也是依赖于jQuery开发的,因此里面的js插件使用,也必须引入jQuery文件。

jQuery尺寸、位置操作

jQuery 尺寸

• 以上参数为空,则是获取相应值,返回的是数字型。
• 如果参数为数字,则是修改相应值。
• 参数可以不必写单位。

jQuery位置

位置主要有三个: offset()、position()、 scrollTop()/scrollLeft()

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

   ①offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。

2. position()获取元素偏移

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

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

   ①scrollTop() 方法设置或返回被选元素被卷去的头部。

• 案例:带有动画的返回顶部

①核心原理:使用animate动画返回顶部。
②animate动画函数里面有个scrolITop属性,可以设置位置
③但是是元素做动画,因此$(“body,html”).animate({scrollTop: 0})