jQuery设计模式
什么是 jQuery
参考：阮一峰-jQuery设计思想、jquery.com、jQuery API 中文文档
官方简介：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库，它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
==简单来说就是使用 jQuery能更加便捷的DOM。==
最新版 jQuery
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
作为工具库历史悠久
从2006年8月26日首发至今，仍然被大多数的网站使用，在互联网的行业里简直算是”稳如泰山“。对新人来说，该库是极其友好上手，而且其中有不少的设计风格值得我们去参考，包括：改变结果集、链式风格、命名风格等。
快速选择元素
标准格式$('selector') selector与 css 的选择器使用一致，如：
$('#myId') //ID 选择器
$('div.className') //选择 class 为 className 的 div
$('className') //选择 class 为 className 的元素
$('input[name=frist]') //选择 name 属性等于 frist 的 input 元素
jQuery特有的表达式
$('div:first h2')//选择第一个 div 子元素 h2 的元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
过滤器
$('div').eq(5); //选择第6个div元素，可以接受负数
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.class #id'); //不匹配 class | id 的div元素
$('div').filter('.myClass'); //匹配myClass的div元素
$('div').first(); //选择第1个div元素
其中$('div').is('p')：判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
链式操作
jQuery其中最重要设计思想之一，是选中网页元素后返回一个jQuery对象，从而不断链接操作。
$("ul").find('.hi').text("hi,Aziz!").css('border','1px solid red')
原理：每一次调用jQuery返回的都是jQuery对象，所以不同操作可以连在一起。
jQuery = function (selector) {
let elements = document.querySelectorAll(selector)
return {
get(index) {
return elements[index]
},
addClass(className) {
for (let i = 0; i < elements.length; i++) {
elements[i].classList.add(className)
}
return this;
},
}
$('div').addClass('red').addClass('border').xxx
同时 jQuery 还提供.end()方法是结果后退一步
$('.test')
.find('.child') //找到子元素
.addClass('red')
.end() //后退一步
.addClass('blue');
操作元素
适配器模式
使用同一个函数，根据判断完成取值和赋值操作
$('#test').html();
$('#test').html('<p>hi</p>')
原理：通过对参数length的判断，来匹配不同的函数操作
window.jQuery = {
text(node, string) {
if (arguments.length === 2) {
if ('innerText' in node) {
node.innerHTML = string
} else {
node.textContent = string
}
} else if (arguments.length === 1) {
if ('innerText' in node) {
return node.innerText
} else {
return node.textContent
}
}
},
html(node, string) {
if (arguments.length === 2) {
node.innerHTML = string
} else if (arguments.length === 1) {
return node.innerHTML
}
}
}
常见的元素取值和赋值
.html() //取出或设置html内容，可设置<p>hi</p>等HTML 元素
.text() //取出或设置text内容
.attr() //取出或设置某个属性的值
.width() //取出或设置某个元素的宽度
.height() //取出或设置某个元素的高度
.val() //取出某个表单元素的值
复制 | 删除 | 创建
.clone()可以复制一个元素
const copy = $('#test').clone();
$('body').append(copy);
有两种删除方法：.remove()和.detach()
两者区别：remove不保留被删除元素的事件，detach则保留元素事件，利于重新插入文档时使用。
$('#test').remove(); //删除ID为test的元素
$('#test').detach()
创建元素和DOM操作比较类似。
$('<p>Hello</p>').appendTo($('#test')); //将前者元素创建到 test 里面
$('ul').append('<li>list item</li>');
使用工具方法
共有37 个方法，参考文档
与元素无关的工具方法，与原生的一些对象方法相似
$.trim() //去除字符串两端的空格。
$.each() //遍历一个数组或对象。
$.inArray() //返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
$.grep() //返回数组中符合某种标准的元素。
$.extend() //将多个对象，合并到第一个对象。
$.makeArray() //将对象转化为数组。
$.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
$.isArray() //判断某个参数是否为数组。
$.isEmptyObject() //判断某个对象是否为空（不含有任何属性）。
$.isFunction() //判断某个参数是否为函数。
$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support() //判断浏览器是否支持某个特性。
添加参数直接调用
console.log($.type($('#test')))
事件操作
事件监听
$('p').click(function(){ //点击事件
alert('Hello');
});
常用的方法
.blur() // 表单元素失去焦点。
.change() // 表单元素的值发生变化
.click() // 鼠标单击
.dblclick() // 鼠标双击
.focus() // 表单元素获得焦点
.focusin() // 子元素获得焦点
.focusout() // 子元素失去焦点
.hover() // 同时为mouseenter和mouseleave事件指定处理函数
.keydown() // 按下键盘（长时间按键，只返回一个事件）
.keypress() // 按下键盘（长时间按键，将返回多个事件）
.keyup() // 松开键盘
.load() // 元素加载完毕
.mousedown() // 按下鼠标
.mouseenter() // 鼠标进入（进入子元素不触发）
.mouseleave() // 鼠标离开（离开子元素不触发）
.mousemove() // 鼠标在元素内部移动
.mouseout() // 鼠标离开 （离开子元素也触发）
.mouseover() // 鼠标进入（进入子元素也触发）
.mouseup() // 松开鼠标
.ready() // DOM加载完成
.resize() // 浏览器窗口的大小发生改变
.scroll() // 滚动条的位置发生变化
.select() // 用户选中文本框中的内容
.submit() // 用户递交表单
.toggle() // 根据鼠标点击的次数，依次运行多个函数
.unload() // 用户离开页面
绑定多个事件
一个元素需要绑定多个事件，需要运用.bind()灵活调用事件
$('input').bind(
'click change', //同时绑定click和change事件
function() {
alert('Hello');
});
执行一次的方法
只想运行一次，可以使用.one()
$("p").one("click", function() {
alert("Hello"); //点击运行一次，以后的点击不会运行
});
解绑事件
.unbind()用来解除事件绑定。
$('p').unbind('click');
可利用解绑事件来执行一次事件
$('input').bind(
'change keydown',
function() {
$('<p>Hello</p>').appendTo($('#test'));
$('input').unbind('change keydown');
});
页面效果
自带效果
.fadeIn() //淡入
.fadeOut() //淡出
.fadeTo() //调整透明度
.hide() //隐藏元素
.show() //显示元素
.slideDown() //向下展开
.slideUp() //向上卷起
.slideToggle() //依次展开或卷起某个元素
.toggle() //依次展示或隐藏某个元素
除了.show()和.hide()所有其他特效的默认执行时间都是400ms（毫秒），也可以通过参数更改
$('h1').fadeIn(300); // 300毫秒内淡入
$('h1').fadeOut('slow'); // 缓慢地淡出
特效结束后执行函数
$('p').fadeOut(300, function() { $(this).remove(); });
自定义特效
$('div').animate(
{
left : "+=50", //不断右移
opacity : 0.25 //指定透明度
},300, // 持续时间
function() { alert('done!'); } //回调函数
);
停止动效
$.fx.off如果设置为true，则关闭所有网页特效。
end.