jQuery

JQuery

什么是jQuery？

JQ(jQuery)：是一个类库(方法库)，里面提供大量操作DOM及一些常用的方法，依托于这些方法可以简化项目开发「前提：项目是基于操作DOM完成的，在Vue/React数据驱动项目中，已经不怎么使用JQ了(此篇文章介绍JQuery了解即可，后续详细解读各种方法API)」

什么是类库？

方法库
不具备任何的思想和逻辑性，只是一个工具包 JQ
Zepto
underscore
Lodash…

什么是插件？

把业务中某个常用的功能进行封装（一般只是对JS的封装） 轮播图插件、日历插件…

什么是UI组件？

把项目中常用的功能板块封装，和插件的区别是：UI组件一般是 结构、样式、功能 都封装好了，而且UI组件库中，会包含大量的UI组件 bootstrap、swiper、element-ui、antd、vant…

什么是框架?

具备自己的核心思想
例如：MVVM(vue)、MVC(react)，一般来说，某个框架都有一个完整的生态圈：脚手架、方法库、插件和UI组件库、核心思想…

如何学习JQuery？

学习JQ
+ 看API文档
JQuery学习API网站
+ 看书
+ 看源码
+ Q提供的方法在两部分

JQ提供的方法在两部分

第一部分

JQ是个构造函数，在它原型上提供了大量的方法，供其实例使用

jQuery.prototype ($.fn)
实例.xxx()

操作样式类：

addClass
removeClass
hasClass
toggleClass

实现JS动画：

animate
stop/finish
fadeIn
fadeOut
fadeToggle
slideDown
slideUp
slideToggle
show
hide
toggle

实现DOM插入：

append
appendTo
insertAfter
insertBefore

自定义属性：

attr
removeAttr
prop
removeProp

操作事件：

on
off
one
bind
unbind
delegate
click
mouseover
mouseout
mouseenter
mouseleave
mousedown
mouseup
mousemove
blur
focus
keydown
keyup
keypress
change
contextmenu
hover

三大筛选方法：

children
find
filter

零零散散：

clone
contents
each(遍历数组、类数组、对象)
eq
get
sort

操作样式的

css
innerWidth<=!!!=>(一组)innerHeight
outerWidth<=!!!=>(一组)outerHeight
width<=!!!=>(一组)height
position
offset
scrollLeft<=!!!=>(一组)scrollTop

操作内容

html text

获取节点关系的

index
prev
prevAll
next
nextAll
siblings
parent
parents

第二部分

JQ也是个普通对对象

本身提供很多静态的私有属性方法，这些方法都是工具类方法

$.xxx()
$.Callbacks() 发布订阅设计模式
$.ajax() 发送ajax请求
$.each() 遍历数组、类数组、对象
$.filter/find 和数组类似的功能
$.isArray/isEmptyObject/isFunction/isNumeric/isPlainObject/isWindow/isXMLDoc…
$.unique() 数组去重
$.uniqueSort() 去重后排序

$->jQuery
$([selector]) JQ选择器，获取元素集合(类数组集合 JQ对象) -> 获取的是JQ这个类的一个实例
+ JQ实例对象.get(索引) -> DOM对象
+ $(DOM对象) -> JQ实例对象

语法结构：$(document).ready(function(){})等价于下面这行带有入口函数的闭包代码
$(function () {
闭包：等待当前页面的DOM结构加载完成就会触发执行
}); */、

后续将详细解读各个API…