为啥2202年了还要学jQuery，学了也找不到工作

因为jQuery比较简单，作为菜鸟的我可以学习大佬是怎么用特别厉害的思想写代码的，也能为后续的Vue和react打打基础

目录

jQuery介绍

jQuery准备工作

jQuery的使用方法

一、jQuery介绍

• jQuery是目前最长寿的库，发布于2006年，全球目前还有约75%的网站在使用。

1.设计模式

• 不用new的构造函数，这么模式没有专门的名字

• $(支持多种参数)，这个模式叫重载

• 用闭包隐藏细节，这个模式没有专门的名字

• $div.text()即可读也可写，这个模式叫 getter/setter

• $.fn 是$.prototype的别名，这个操作叫别名

• jQuery针对不同浏览器使用不同代码，这个模式叫适配器

• jQuery获取对象后返回能操作该对象的api，这个模式叫链式操作

2.jQuery实现原理

• jQuery(选择器)用于获取对应的元素

• 但它不返回这些获取到的元素，而是返回一个对象，被jQuery构造出来的对象

• 这个对象可以操作获取到的元素

3.jQuery构造函数

• jQuery函数确实构造了一个对象，但它不需要new jQuery()，以前学习的构造函数都需要new

• jQuery是用到了一些技巧实现的，以后会补充

二、jQuery准备工作

1.命名风格

• 声明全局变量window.jQuery(){}

• 把window.jQuery(){} = window.$ 这样会简单很多

2.使用原型(节约性能)

• 把共有属性(函数)全部放到$.prototype里

• $.fn = #.prototype 简化名字

• 让api.__proto__指向 $.fn

• 在$.fn里写上constructor: jQuery

三、jQuery的使用方法

1.增

• $('<div><span></span></div>') 创建div标签，div标签里有个span标签

• .appendTo(document.body) 把标签插入到body中

2.删

• $div.remove() 删除选中的元素

• $div.empty 删除选中元素里的所有子元素

3.改

• $div.text(?) 读或改写文本内容

• $div.html(?) 读或改写HTML内容

• $div.attr(?) 读或改写属性

• $div.css({color:'red'}) 读写style属性

• $div.addClass('blue') 添加类名

• $div.on('click',fn) 添加事件监听

• $div.off('click,fn') 删除事件监听

4.查

• $('#xxx') 返回值不是元素，而是能操作元素的api对象

• $('#xxx').find(.'red') 查找id为xxx里面类名为red的元素

• $('#xxx').parent()获取父元素

• $('#xxx').children()获取子元素

• $('#xxx').siblings()获取兄弟元素

• $('#xxx').index() 获取该元素在父元素中排行第几

• $('#xxx').next() 获取弟弟元素

• $('#xxx').prev() 获取哥哥元素

• $('.red').each(fn) 遍历并对每个元素执行fn函数