JQuery 笔记

概述

1.x 支持 ie 678
2.x 不支持 ie 678
3.x 不支持 ie 678 且支持罪行浏览器

jquery.js 文件会导出 JQuery 函数
JQuery 函数名 简写为 $

1. 传入参数为匿名函数
   会在页面加载完成后，执行传入的匿名函数

$(funciton() {
  ···
})

相当于：

window.addEventListener('click', function (event) {
  ···
})

2. 传入参数为 css选择器的字符串 或 DOM对象
   JQuery() 会返回 “JQuery 对象“
   JQuery 对象 实际为数组格式 （因为选择器存在数组的情况）
   

JQuery对象

选择器

与 css 不完全相同
:first 第一个
:last 最后一个
:even 偶数项
:odd 奇数项
:eq(index) 等于指定索引
:gt(index)
:lt(index)
:header 标题

常用方法

合并对象
使用jQuery.extend()
合并数组
使用$.merge()

dom文本内容

.text() 文本 获取所有
.html() html标签 只获取第一个

表单内容

.val() value
.prop() checked,selected
.attr(属性名[, 属性值]) 属性

style

.css() 样式

.addClass()
.removeClass()
.toggleClass() class

.index() 下标
.siblings() 同级其他元素
.find() 在子级中寻找
.parent() 获取父级

DOM操作

.append(ele) 添加节点
.prepend(ele)

$(“<xx>yyy</xx>”)

before() 在同级前插入
after() 在同级后插入
insertBefore()
insertAfter()

remove() 移除指定元素
empty() 清空子元素

动画

显示隐藏
滑动动画
淡入淡出

css 的各种动画效果
以及丰富的动画库

事件委托

将子级事件交由父级管理
.on(事件, 标签, 方法)

现代的事件 api 早已支持

ajax

$.get()
$.post()
$.ajax()

模块化的当下有更好的网络请求库，如 axios

插件

说白了就是封装函数
没有模块化时代的产物

结语

jquery 在 ES 标准不健全，js 没有模块化 的年代，无疑是非常强大的工具库。
但随着 ES 的发展，哪些当年的痛点早已不复存在。
而 jquery 不具备模块化，且保罗万象，这使他非常的笨重。
事实证明，专注于坐单一的事更能提高效率。
另外 ES 还在不断增加新的标准，而 jquery 早已不再更新新的内容。
如过要在jquery的基础上构建项目，不可能一部分jquery，一部分原生吧。
jquery 也因此种种渐渐淡出历史舞台。