【学习笔记】jQuery.js

文章目录

- - 什么是javascript库？
  - jQuery的概念
  - jQuery的优点
  - jQuery的入口函数
  - jQuery的顶级对象$
  - DOM对象和jQuery对象
  - DOM对象和jQuery对象的相互转换
  - jQuery基础选择器
  - jQuery层级选择器
  - jQuery设置css样式
  - 隐式迭代
  - jQuery筛选选择器
  - jQuery筛选方法
  - jQuery链式编程
  - jQuery操作css方法
  - jQuery类名操作
  - jQuery动画效果
  - 自定义动画：
  - 鼠标事件复合写法
  - 动画队列及其停止排队方法
  - 设置或获取元素固有属性值
  - 设置或获取元素自定义属性值
  - 数据缓存
  - jQuery元素内容修改
  - html() 和 text() 的区别
  - 遍历元素
  - 创建元素
  - 内部添加元素
  - 外部添加元素
  - 删除元素
  - jQuery尺寸操作
  - jQuery位置操作
  - 动画小练习：
  - 单个事件注册
  - 事件处理on()绑定事件
  - on() 方法的事件委托
  - 事件处理off()解绑事件
  - 只触发一次的事件
  - 自动触发事件
  - jQuery事件对象
  - jQuery对象拷贝（合并）
  - jQuery多库共存
  - jQuery插件
  - 图片懒加载
  - 全屏滚动（fullpage.js）
  - 补充知识点

什么是javascript库？

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

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

比如jQuery，就是为了快速方便的操作DOM,里面基本都是函数或方法，常见的js库还有Prototype，YUI,Dojo，Ext JS，移动端的zepto，这些都是对原生js代码的封装，内部都是javascript代码

jQuery的概念

jQuery是一个快速，简介的javascript库，其设计的总之是写更少的代码，做更多的事情“write less，do more”

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

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

学习jQuery的本质：就是学习调用这些函数或方法

jQuery的优点

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

jQuery的入口函数

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

注意：

等着DMO结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装
相当于原生js中的DOMContentLoaded
不同于原生js中的load事件是等页面文档、外部的js文件，css文件、图片加载完毕才执行内部代码
更推荐使用第一种方式

jQuery的顶级对象$

$ 是jQuery的别称，在代码中可以使用jQuery代替 $（注意Q要大写），但一般为了方便，通常都直接使用 $
$ 是jQuery的顶级对象，相当于原生javascript中的window，用 $ 把元素包装成jQuery对象，就可以调用jQuery的方法

DOM对象和jQuery对象

用原生js获取来的对象就是DOM对象，如querySelector（‘div’）；
jQuery方法获取的元素就是jQuery对象，如$（‘div’）；
jQuery对象的本质是用$对DOM对象包装后产生的新对象
jQuery通过伪数组形式存储
DOM对象只能使用原生js的属性和方法，jQuery对象只能使用jQuery的属性和方法

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

因为原生js比jQuery更大，原生的一些属性和方法jQuery可能没有封装，要想使用这些方法需要把已经获取到的jQuery对象转换为DOM对象

DOM对象转换为jQuery对象
语法：

$（mydiv）； //mydiv是已经获取过的DOM对象，不用加引号

jQuery对象转换为DOM对象（两种方式）
语法：

1. $（'div'）[index]  
2. $（mydiv）.get(index)

如果div已经通过DOM获取了，则不用加引号；还没有获取则要加

其中，index是索引号，因为jQuery是以伪数组形式返回

jQuery基础选择器

原生js获取元素方式很多，很杂，因此jQuery给我们做了封装，使获取元素统一标准，格式：

$（"选择器"） //里面选择器直接写CSS选择器即可，要加引号

选择器类型及用法：

jQuery层级选择器

jQuery设置css样式

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

隐式迭代

遍历内部DOM元素的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

假如一个ul里包含了4个小li，我们编写如下代码：

$("ul li").css("color","red");

就可以把ul里的所有小li变为红色，在执行该代码时，会一个个的给每一个小li（亲儿子）添加 color：red 样式，这就是隐式迭代

jQuery筛选选择器

jQuery筛选方法

jQuery链式编程

原代码：

$(this).animate({
  width: 224
});
$(this).find('.small').fadeOut();
$(this).find('.big').fadeIn();

$(this).siblings('li').animate({
  width: 69
});
$(this).siblings('li').find('.big').fadeOut();
$(this).siblings('li').find('.small').fadeIn();

以上半段代码为例，$(this) 先添加了一个动画，此时 this 为主语，然后要寻找 small 元素，因为此时 this 为主语，而又是让 this 来寻找，所以 find（small）可以直接点在后面；此时主语变为 small 元素，因为 find(small)会返回 small 元素，再往后面点的话就是以 small 为主语；所以第三句寻找 big 元素应该以 small 元素为主语，即 .siblings(big)

链式编程后代码：

$(this).stop().animate({
  width: 224
}).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();

$(this).siblings('li').stop().animate({
  width: 69
}).find('.big').stop().fadeOut().siblings('.small').stop().fadeIn();

jQuery操作css方法

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

参数只写属性名，则是返回属性值

$(this).css('color');    //返回red

参数是属性名，属性值，逗号分隔，是设置一组样式

$(this).css('color', 'red');  // 都要加引号，但如果属性值是数字的话可以不加引号，如（'width'，'300'）；

参数可以是对象的形式，方便设置多组样式，属性名可以不加引号

$(this).css({
color: 'red',               //中间用冒号隔开
backgroundColor: 'pink',  //各属性之间用逗号隔开
height: 200					 	 //属性值为数字可以不加引号
});

jQuery类名操作

作用等同于以前的classList，可以操作类样式，类名前不要加点 .

添加类

$('div').addClass('current');

移除类

$('div').removeClass('current');

切换类（没有此类名就添加，已有此类名则删除）

$('div').toggleClass('current');

jQuery动画效果

显示/隐藏/切换：

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])

滑动（上拉/下拉/切换）：

slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])

淡入淡出：

fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo([[speed],opacity,[easing],[fn]]) //修改透明度，speed和opacity必须写

注意：

参数都可以省略，无动画直接显示
speed：三种预定速度之一的字符串（‘slow’， ‘normal’， ‘fast’）或表示动画时长的毫秒数值，如：1000
easing：（Optional）用来指定切换效果，默认是swing，可用参数linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

自定义动画：

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

鼠标事件复合写法

hover（fn1,fn2）
第一个函数是鼠标经过时（mouseenter）要执行的函数，第二个函数是鼠标离开时（mouseleave）要执行的函数；如果只写一个函数，则鼠标经过和离开时都会执行一次该函数

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

动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。如多次触发鼠标点击事件，即连续点击多次鼠标后停止，虽然鼠标停了，但动画会继续执行完点击的次数
停止排队

stop();
stop()方法用于停止动画或效果，要写到动画或效果的前面，相当于结束上一次的动画，语法：$(this).stop().slideToggle();

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

方法：prop()

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

获取属性语法
prop（'属性'）
设置属性语法
prop('属性', '属性值')
属性值如果是数字型或布尔型则不加引号，字符型则要加

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

方法：attr()

用户自己给元素添加的属性，我们成为自定义属性，比如给div添加index='1';

获取属性语法
attr('属性') //类似原生 getAttribute（）
设置属性语法
attr('属性', '属性值') // 类似原生setAttribute（）
该方法也可以获取H5自定义属性，如 data-index

数据缓存

方法：data()

data() 方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被基础

附加数据语法
data('name', 'value') // 向被选元素附加数据
获取数据语法
data('name') // 向被选元素获取数据
除了获取我们向其添加的数据，还可以获取H5自定义属性如data-index的数据，并且得到的是数字型，在获取的时候不用加data-，直接写index即可

jQuery元素内容修改

普通元素内容：html() // 相当于原生innerHTML

html() //获取元素内容，带便签一起获取
html('内容') //设置元素的内容

普通元素文本内容：text() // 相当于原生innerText

text() // 获取元素的文本内容，不包含标签
text('文本内容') // 设置元素的文本内容

表单内容：val() // 相当于原生value

val() // 获取表单的value值
val('表单value值') // 修改表单的value值

html() 和 text() 的区别

html可以更改标签：

li.html($('textarea').val() + "<a href='javascript:;'> 删除</a>");

text()只能更改内容：

li.text($('textarea').val() + "<a href='javascript:;'> 删除</a>");

遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历
语法1：

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

each() 方法遍历匹配到的每一个元素
里面的回调函数有两个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jQuery对象
如果想使用jQuery方法，需要给这个dom元素转换为jQuery对象：$(domEle)

语法2：

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

$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
里面的函数有两个参数：index是元素索引号，element遍历内容

总结：遍历DOM元素用第一种方法，遍历数据用第二种方法

创建元素

var li = $('<li>123</li>');   //动态的创建了一个<li>

内部添加元素

append(li); // 在末尾添加
prepend(li); // 在开始添加

外部添加元素

after(li); // 放到目标元素后面
before(li); // 放到目标元素前面

注意：括号里面可以写创建好的li，也可以写DOM元素形式，即<li></li>,并且可以在其添加其他标签，类名等，和html()一样

删除元素

div.remove(); 删除这个div
div.empty();删除div里面的所有子节点
div.html('');删除div里的所有子节点，里面加个空引号

jQuery尺寸操作

以上参数为空，则是获取相应的值，返回为数字型
如果参数为数字，则是修改相应值，可以不跟单位

jQuery位置操作

位置主要有三个：offset，position，scrollTop/scrollLeft

offset() 设置或获取元素偏移
①offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系，以对象的形式返回
②该方法有两个属性，left和top；offset().top可以获取距文档顶部距离，offset().left可以获取距文档左侧的距离
③可以设置元素的偏移：offset({top:10,left:30});
position() 获取元素偏移
position() 方法用于返回被选元素相对于带有定位的父级的偏移坐标，如果父级没有定位则以文档为准；只能获取，不能赋值；
页面滚动操作
①scrollTop();//设置或返回被选取元素的被卷去的头部
②scrollLeft();//设置或返回被选取元素的被卷去的左侧
例：$(document).scrollTop(); //返回页面被卷去的头部值
一般配合页面滚动事件使用：$(window).scroll(fn)

动画小练习：

为<div class= “back”></div>添加返回顶部动画

$('.back').click(function () {
  $('body,html').stop().animate({ //因为animate只能给元素添加,所以里面不能写document
    scrollTop: 0
  });
})

单个事件注册

语法：element.事件(function(){})

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

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

事件处理on()绑定事件

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

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

events：一个或多个用空格分隔的事件类型，如click或keydown
selector：元素的子元素选择器
fn：回调函数，即绑定在元素身上的侦听函数

多个事件添加不同的效果：

$("div").on({
  mouseenter: function () {
    $(this).css("background", "skyblue");
  },
  click: function () {
    $(this).css("background", "purple");
  },
  mouseleave: function () {
    $(this).css("background", "blue");
  }
});

多个事件添加相同的效果：

//事件之间空格隔开
$("div").on("mouseenter mouseleave", function () { 
  $(this).toggleClass("current");
});

on() 方法的事件委托

on() 方法可以实现事件委派操作，事件委派的定义就是把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

//虽然是给ul添加的事件，但是是由小li来触发的
$("ul").on("click", "li", function () {
  alert(11);
});

on() 方法为未来动态添加的元素绑定事件

// $("ol li").click(function() {
//   alert(11);  //不能直接给动态添加的元素绑定事件
// })

$("ol").on("click", "li", function () {
  alert(11); //用on绑定事件可以为未来的元素绑定
})

var li = $("<li>我是后来创建的</li>");
$("ol").append(li);

事件处理off()解绑事件

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

$("div").off(); // 解除所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li"); //解除ul的事件委托

只触发一次的事件

$("p").one("click", function () {
  alert(11); //给p添加点击事件，但只能执行一次
})

自动触发事件

元素.事件()

$("div").click();会触发元素的默认行为

元素.trigger(“事件”)

$("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");

禁用元素的默认行为

元素.triggerHandler("事件")

元素的默认行为：
当input文本框获得焦点的时候，边框自动高亮显示就是一种元素默认行为

jQuery事件对象

$("div").on("click", function (e) {
  // console.log(event);
  console.log("点击了div");
  e.stopPropagation(); //阻止冒泡方法
})

jQuery的事件对象和之前的webAPI事件对象基本一致

jQuery对象拷贝（合并）

语法：

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

[deep]:如果设为true为深拷贝，false则为浅拷贝
target：目标对象
object1：待拷贝到第一个对象的对象
objectN:待拷贝到第N个对象的对象
浅拷贝是把被拷贝的对象中的复杂数据类型的地址拷贝给目标对象，修改目标对象会影响到被拷贝对象；同时如果简单数据类型或复杂数据类型有重名，则会完全覆盖目标的数据类型的所有属性
深拷贝是拷贝的对象，而不是地址，所以修改目标对象不会影响原对象；同时如果复杂数据类型有重名，则会和目标的复杂数据类型合并，而简单数据类型则会覆盖

jQuery多库共存

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

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

jQuery制作的解决方案：

把$符号统一改为jQuery，比如 jQuery（'div'）
给jQuery变量规定新的名称newName：
语法：var newName = $.noConflict();
然后就可以用newName代替$符号了，如newName('div')

jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成

注意：这些插件也是依赖于jQuery来完成的，所以必须先引入jQuery文件，因此才叫jQuery插件

jQuery插件使用步骤：

引入相关文件（jQuery文件和插件文件）
复制相关html，css，js代码，或引入css文件

常用网址：

http://www.htmleaf/ （免费）
http://www.jq22/ （部分收费）

图片懒加载

浏览网页时如果直接把所有图片都加载出来，那样对服务器的负载是很大的，我们想让用户的页面看到哪，那的图片再开始加载，这样的技术就叫做图片懒加载
可以去 jq22 下载懒加载插件

全屏滚动（fullpage.js）

gitHub：https://github/alvarotrigo/fullPage.js
中文翻译网站：http://www.dowebok/demo/2014/77/

补充知识点

show()显示元素，hide()隐藏元素
使用eq选择第n个元素的时候不要用li：eq(index)的形式，最好用函数的形式选择，即li.eq(index)，因为index如果是个变量的话，用第一种还需要再用引号包起来，而第二种可以直接放变量
jQuery添加事件时不用加on
css('color', '') // 后面引号为空则代表清空样式
得到当前元素索引号：$(this).index(); // index后一定要加括号
注意eq获取第n个元素和直接方括号[]获取第n个元素的区别

console.log($('.tab_con .item').eq(index));
console.log($('.tab_con .item')[index]);
使用eq[index]返回的是一个jQuery对象，可以使用jQuery的各种方法；而直接用[index]返回的是个HTML元素节点，不可以使用jQuery的方法

$('checkbox:checked') 可以返回被选中的复选框
parents()可以返回所有父级及父级以上的元素，如果里面跟上一个选择器，则可以返回指定的父级或以上元素
toFixed(n) 可以保留n位小数
使用 bootstrap 的 js 插件时，比如说按一个 button 会弹出一个 div，则必须要把 button 的 data-target 属性和 div 的 id 或 class 链接起来

更多推荐

【学习笔记】jQuery.js

【学习笔记】jQuery.js

文章目录

什么是javascript库？

jQuery的概念

jQuery的优点

jQuery的入口函数

jQuery的顶级对象$

DOM对象和jQuery对象

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

jQuery基础选择器

jQuery层级选择器

jQuery设置css样式

隐式迭代

jQuery筛选选择器

jQuery筛选方法

jQuery链式编程

jQuery操作css方法

jQuery类名操作

jQuery动画效果

自定义动画：

鼠标事件复合写法

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

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

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

数据缓存

jQuery元素内容修改

html() 和 text() 的区别

遍历元素

创建元素

内部添加元素

外部添加元素

删除元素

jQuery尺寸操作

jQuery位置操作

动画小练习：

单个事件注册

事件处理on()绑定事件

on() 方法的事件委托

事件处理off()解绑事件

只触发一次的事件

自动触发事件

jQuery事件对象

jQuery对象拷贝（合并）

jQuery多库共存

jQuery插件

图片懒加载

全屏滚动（fullpage.js）

补充知识点

相关文章

发布评论取消回复

最近发表

热门文章

标签列表