jQuery学习笔记

  廉颇老矣，尚能饭否？
  虽然jQuery已经逐渐淡出了舞台，相比直接上手框架的MVVM而言可能对初学者更加友好，最重要的是它的思想值得被借鉴学习。英雄迟暮，所以还是打算简单的过一下，留个曾经来过的痕迹。
  言归正传，jQuery就是一个JavaScript库，官方地址：jQuery。JavaScript库是一个封装好的特定的集合（方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中封装了很多预先定义好的函数在里面，比如动画animate、获取元素等。简单理解的话就是一个JS文件，里面对原生js代码进行了封装。这样就可以快速高效的使用这些封装好的功能。常见的JavaScript库有jQuery、Prototype、YUI、Dojo、Ext JS和移动端的zepto等，这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的。比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。
jQuery的优点：(1)出色的DOM操作封装；(2)便捷的Ajax操作；(3)出色的动画效果。

一、基本使用

首先通过script引入官网下载的jquery.min.js文件。
1、入口函数
  ①等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。②相当于原生js 中的DOMContentLoaded。③不同于原生js 中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

//第一种方式，推荐
$(function() {
	//……
}); 
$(document).ready(function() { });   //第二种方式

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

// $可以使用jQuery来代替($是jQuery的别称)
// 等价于 jQuery(function() { alert(11); })
$(function() { alert(11); }) 

3、jQuery对象和DOM对象
  用原生JS获取来的对象就是DOM对象，jQuery方法获取的元素就是jQuery对象。jQuery对象本质是利用$对DOM对象包装后产生的对象（以伪数组形式存储)。

let myDiv = document.queryselector( 'div '); //myDiv是DOM对象 
$('div'); //是一个jQuery对象
//可以分别打印这两个对象查看它们是否有什么不同
console.dir(myDiv);
console.dir($('div'));
// jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScirpt属性和方法
myDiv.style.display = 'none';
myDiv.hide(); //报错
$('div').hide();
$('div').style.display = 'none'; //报错
//$(this)表示当前元素，this不要加引号
$(this);
//获得当前元素的索引号
$(this).index();

  DOM对象与jQuery对象之间是可以相互转换的。因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

//DOM对象转换为jQuery对象:$(DOM对象)
$('div');
//jQuery对象转换为DOM对象（两种方式)
$('div')[index];  //方法一，index是索引号，因为jQuery对象是伪数组
$('div').get(index); //方法二

二、常用的API

1、选择器

//语法:里面选择器直接写CSS选择器即可，但是要加引号
$("选择器"); 
//jQuery设置样式的语法
$('div').css('属性','值');

选择器类型包括id、类、全选、标签、层级选择器等css中使用的选择器。
隐式迭代
  举个例子，如果页面中某个元素有4个子元素div，我们现在想给它们都添加同一个样式，如果使用原生JS则是遍历每个div元素并给它添加同一个样式，而我们使用jQuery设置样式的语法直接设置样式即可。简单理解∶给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。遍历内部 DOM元素(伪数组形式存储)的过程就叫做隐式迭代。

//给所有button添加一个点击行为，而不用再使用原生JS对button元素进行遍历
$('button').click(function() {
	//……
})

筛选选择器

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

筛选方法

语法	用法	描述
parent()	$(“li”).parent();	查找最近父级(亲父亲)
parents()	$(“.first”).parents();	查找所有父亲节点(包括父节点，祖父节点等等)
parents(selector)	$(“.first”).parents(“li”);	查找所有父节点中的li节点元素
children(selector)	$(“u1”).children(“li”)	相当于$(“u1>1i”)，最近一级（亲儿子)
find(selector)	$(“u1”).find(“li”);	相当于$(“ul li”)，后代选择器
siblings(selector)	$(“.first”) .siblings(“li”);	查找兄弟节点不包括自己本身
nextAll([expr])	$(“.first” ).nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(“.last” ).prevAll()	查找当前元素之前所有的同辈元素
hasclass(class)	$(“div”).hasClass(“protected”)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)” ),index从0开始

jQuery排他思想与链式编程
  当前元素设置样式，其他的兄弟元素清除样式。

$(function(){
	$('button').click(function() {
	    //给自己添加样式
		$(this).css('background','#333');
		//给其他兄弟清除样式
		$(this).siblings('button').css('background','');
		//把上面两句用链式编程操作写成一句话
		$(this).css('background','#333').siblings('button').css('background','');
	});
})

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

//1.参数只写属性名，则是返回属性值
$(this).css("color");
//2．参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color","red");
//3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号.如果属性是复合属性则使用驼峰命名法或者是“引号加-”的形式("font-size")
$(this).css({"color":"white" ,"fontSize":"20px"});

  设置样式：作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。类操作与className区别：原生JS中className会覆盖元素原先里面的类名，而jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

//需要先在样式文件中写好需要操作的类的样式
$("div").addClass("current");  //1.添加类
$("div").removeClass("current");  //2.移除类
$("div").toggleClass("current");  //3.切换类(有->没有,没有->有current类)

3、jQuery效果
  jQuery中封装的常见的动画效果有：显示隐藏：hide()、show()、toggle()；滑动：slideDown()、slideUp()、slideToggle()；淡入淡出：fadeIn()、fadeOut()、fadeToggle()、fadeTo()；自定义动画：animate()。
自定义动画语法：animate(params , [ speed] , [easing] ,[fn])
参数：( 1 ) params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
( 2 ) speed :三种预定速度之一的字符串(“slow”，"normal”,or“fast”)或表示动画时长的毫秒数值(如:1000)。
( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
其它常见动画函数的参数可见官网。
4、jQuery属性操作
设置或获取元素固有属性值prop:

prop("属性");  //获取属性语法
prop("属性","属性值");  //设置属性语法

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

attr("属性");  //获取属性语法,类似于原生getAttribute()
attr("属性","属性值");  //设置属性语法,类似于原生setAttribute()

数据缓存data()：
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。同时，还可以读取HTML5自定义属性data-index，得到的是数字型。

data("name";"value"); //附加数据语法，向被选元素附加数据
date("name"); //获取数据语法，向被选元素获取数据

5、jQuery文本属性值

html();  //获取元素的内容
html("内容");  //设置元素的内容
text();  //获取元素文本的内容
text("内容");  //设置元素文本的内容
$("input").val();  //获取表单值
$("input").val("内容");  //设置表单值

6、jQuery元素操作
  主要是遍历、创建、添加、删除元素操作。
遍历元素：jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

//语法一：
//1.each方法遍历匹配的每一个元素,主要用DOM处理
//2.里面的回调函数有2个参数:index是每个元素的索引号; demEle是每个DOM元素对象，不是jquery对象
//3.要想使用jquery方法，需要给这个dom元素转换为jquery对象:$(domEle)
$("div").each(function(index,domEle){ …… })
//语法二：
//1.$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
//2.里面的函数也有2个参数:index是每个元素的索引号;element是遍历内容
$.each(object,function(index,element) { …… })

创建、添加、删除元素：

//创建元素
$("<li></li>");  //动态创建一个<li>

//添加元素(内部添加)
element.append("内容");  //把内容放入匹配元素内部最后面，类似原生的appendChild
element.prepend("内容");  //把内容放入匹配元素内部最前面
//添加元素(外部添加)
element.after("内容");  //把内容放入目标元素后面
element.before("内容");  //把内容放入目标元素前面

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

7、jQuery尺寸

//width()/height()用来获取设置元素的width和height大小，若无参数则是获取，有参数则是修改且参数不用写单位
$("div").width();
//innerWidth()/innerHeight()用来获取匹配元素宽度和高度值,包含padding
$("div").innerWidth();
//outerWidth()/outerHeight()取得匹配元素宽度和高度值,包含padding、border
$("div").outerWidth();
//outerWidth(true)/outerHeight(true)取得匹配元素宽度和高度值,包含padding、border、margin
$("div").outerWidth(true);

8、jQuery位置
offset()设置或获取元素偏移：offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。

//获取div元素相对于文档的偏移，返回的是一个对象,它有两个属性:left和top
$("div").offset();
//offset().top用于获取距离文档顶部的距离
$("div").offset().top;
//offset().left用于获取距离文档左侧的距离
$("div").offset().left;
//设置div元素的偏移
$("div").offset({
	top: 200,
	left: 200
});

position()获取元素偏移：position()方法用于返回被选元素相对于带有定位的父级偏移距离，如果父级都没有定位，则以文档为准。该方法只能获取不能设置。

//获取div元素相对于最近的有定位的父级元素的偏移，返回的是一个对象,它有两个属性:left和top
$("div").position();
//position().top用于获取距离文档顶部的距离
$("div").position().top;
//position().left用于获取距离文档左侧的距离
$("div").position().left;
//不能设置div相对于有定位的父级元素的偏移，该方法只能获取
$("div").position({
	top: 200,
	left: 200
});

scrollTop0/scrollLeft()设置或获取元素被卷去的头部和左侧：页面滚动时，通过该函数获取元素被卷去的头部/左侧距离。

//设置元素被卷去的头部距离
$("div").scrollTop(100);
//获取元素被卷去的头部距离
$("div").scrollTop();
//设置元素被卷去的左侧距离
$("div").scrollLeft(100);
//获取元素被卷去的左侧距离
$("div").scrollLeft();

  

三、jQuery事件

1、jQuery事件注册
  单个事件注册：其他事件和原生基本一致，比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。

//语法：element.事件(function ({})
$("div").click(function (){ 
	//事件处理程序 
})

2、jQuery事件处理
事件处理on()绑定事件优势①：on()方法在匹配元素上绑定一个或多个事件的事件处理函数。

//语法:element.on(events,[selector],fn)
//1.events:一个或多个用空格分隔的事件类型，如"click"或"keydown";
//2.selector:元素的子元素选择器。
$("div").on({
	mouseover: function(){},
	mouseout : function(){},
	click: function(){}
});
//多个事件处理函数一样时的写法，current是写好的样式的类名
$("div").on("mouseover mouseout", function() {
	$(this).toggleclass("current");
});

优势②：可以事件委派（委托）操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。例如，ul元素有多个子元素li，以前我们都是使用隐式迭代直接给li元素绑定事件，现在我们直接给父元素ul绑定事件，但是触发的还是li元素。

$("u1").on('click','ii',function (){
	//……
});

优势③：动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件。例如，原本ol元素中没有子节点，现在我们动态给它创建子节点li，在绑定事件。

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

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

$("p").off()  //解绑p元素所有事件处理程序
$("p").off( "click")  //解绑p元素上面的点击事件(如果p绑定了多个事件)
$("ul").off("click","li");  //解绑事件委托
//如果有的事件只想触发一次，可以使用one()来绑定事件
$("p").one("click",function() { })  //仅第一次点击才会触发绑定事件

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

element.click()  //第一种自动触发的简写形式
element.trigger("type")  //第二种自动触发模式,type是事件的类型
element.triggerHandler(type)  //第三种自动触发模式,不会触发元素的默认行为

3、jQuery事件对象
  事件被触发,就会有事件对象的产生。

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

阻止默认行为: event.preventDefault()或者return false；阻止冒泡: event.stopPropagation().

四、一些常见的方法

1、jQuery对象拷贝：如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$ .extend()方法。

//语法：
$.extend ([deep],target,object1,[objectN])
//1.deep:如果设为true为深拷贝，默认为false 浅拷贝
//2.target:要拷贝的目标对象
//3.object1:待拷贝到的第一个对象，objectN:待拷贝到的第N个对象

注：浅拷贝是把被拷贝的对象的复杂数据类型中的地址拷贝给目标对象，则修改目标对象会影响被拷贝对象。另外，拷贝对象中所有数据会被被拷贝对象中的数据覆盖。深拷贝则是完全克隆(拷贝的是对象而不是地址)，修改目标对象不会影响被拷贝对象。深拷贝把里面的数据完全复制一份给目标对象。如果里面有不冲突的属性，则会合并到一起。

2、jQuery多库共存：jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用这$作为标识符，这样一起使用会引起冲突。需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

$(function() {
	function $(ele) {
		return document.querySelector(ele);
	}
	console.log($("div"));
	$.each();  //报错
	jQuery.each();  //解决方法1:把里面的$符号统一改为jQuery
	//解决方法2:jQuery变量规定新的名称:$.noConflict()
	let ￥ = jQuery.noConflict();
	console.log(￥("div"));

3、jQuery插件网站推荐：这些插件也是依赖于jQuery来完成的，所以在使用前必须先引入jQuery文件，因此也称为jQuery插件。常见的使用功能有瀑布流、图片懒加载、全屏滚动等。
  ①jQuery插件库 ②jQuery之家 ③全屏滚动插件GitHub 它的中文翻译网站