2020-11-23

关于jQuery

jQuery是目前世界上最长寿且使用最广泛的库，虽然现在它已经不火了，但是它的一些设计思想还是可以作为学Vue和react的之前的过渡来学学的。
jQuery不是严格意义上的构造函数，理由：jQuery确实构造出了对象，但是没用new方法

前言（别名）

以下都是用的别名

window.$=window.jQuery //相当于给jQuery添加一个别名'$'
$.fn=$.prototype //相当于给prototype添加一个别名'fn'

术语

jQuery对象指代jQuery函数构造出来的对象
Object对象指代Object函数构造出来的对象
Function和Array以此类推

技巧(概念)

封装：即隐藏对象的属性和实现细节，仅对外公开接口。
重载：根据不同的参数写不同的代码
适配器：针对不同的环境（浏览器）写不同的代码

一、链式风格

$('div').find('h3').eq(2).html('Hello');
分解：
$('div') //找到div元素
　　　.find('h3') //选择其中的h3元素
　　　.eq(2) //选择第3个h3元素
　　　.html('Hello'); //将它的内容改为Hello

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起

二.end()方法

　$('div')
　　　.find('h3')
　　　.eq(2)
　　　.html('Hello')
　　　.end() //退回到选中所有的h3元素的那一步

三、取值赋值

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值
常用：
.html() //取出或设置html内容
.text()//取出或设置text内容
.attr()//取出或设置某个属性的值
.width()//取出或设置某个元素的宽度
.height()//取出或设置某个元素的高度
.val()//取出某个表单元素的值

注意：如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（ .text() 例外，它取出所有元素的text内容）

四、元素的移动

有两种方法，一组方法是直接移动该元素（返回div元素），另一组方法是移动其他元素（返回p元素），使得目标元素达到我们想要的位置。（操作视角的不同）

把div元素移动p元素后面：
$('div').insertAfter($('p'));//返回div元素

把p元素加到div元素前面：
$('p').after($('div'));//返回P元素

---

1、查

$('#xxx')的返回值并不是一个元素，而是一个对象
$('#xxx').find('.red')//查找#xxx里的.red元素
$('#xxx').parent()//获取父节点
$('#xxx').children()//获取子节点
$('#xxx').siblings()//获取所有同级节点
$('#xxx').index()//获取此节点索引
$('#xxx').next()//获取下一个节点
$('#xxx').prev()//获取上一个节点
$('.red').each(fn)//遍历并对每个元素执行fn

2、增

$(<div><span>1</span></div>).appendTo(document.body)
//创建div并插入到body中

3、删

$div.remove()//删除节点
$div.empty()//清空节点

4、改

$div.text(?)//读写文本内容
$div.html()//读写HTML内容
$div.attr('title',?)//读写属性
$div.css({color:'red'})//读写style
$div.addClass('blue')//添加class属性
$div.on('click',fn)//增添点击事件
$div.off('click',fn)//关闭点击事件

注意：$div大部分时候对应对个div元素，使用时最好遍历一下

五、使用原型

把共用属性（函数）全部放到$.prototype上

$.fn=$.prototype
api.__proto__指向$.fn //api.__proto__=jQuery.prototype