jQuery常用方法、设置自定义属性的两种方式、匿名函数具名化

JQ/jQuery

传统的项目开发思想：

• 首先分析项目的需求，把需要实现的功能和思路分开
• 编写代码，实现需求
  • 先要操作谁，就先获取谁——获取元素要精准
  • 完成事件的绑定，前提是需要用户手动操作触发的，
  • 按照需求，修改元素的样式或者内容

JQ是一个前端框架（或类库），里面封装了大量的方法，就可以简化我们对DOM的操作（以及其他的一些操作）

JQ类库存在三大主版本

• v1.xx
  特点：兼容到IE6-8

• v2.xx
  特点：放弃了IE6-8的兼容（主要是为移动端准备的，配合jQueryMobile使用）
  但是同时代出现了一个语法和JQ几乎完全类似，但是比JQ更懂移动端——Zepto

• v3.xx
  特点：依然不考虑IE6-8的兼容，但是设计思想和代码的编写上都升级了很多，
  但是生不逢时，因为时代变了，编程思想变了，现在几乎都在用Vue/React这样的框架去开发项目

JQ提供的方法中，大部分都是关于对DOM的操作

• 获取元素
• 事件绑定
• 动画处理
• 样式处理
• 内容管理
• DOM的增删改查
• …
  当然除了对DOM操作，也有对数组/对象操作，以及Ajax数据通信等

JQ选择元素

JQ提供了非常强大的选择器方案，可以让我们很方便的获取到需要的元素/元素集合

选择器：$(选择器)

let $tabBox =$('.tab-box')

我们习惯把基于JQ选择器获取的内容，基于"$开始"的变量存储
获取元素的时候，JQ提供了三大筛选方法：

• find 后代查找
• children 子代查找
• filter 同级查找

获取多个中的某一个

• eq(索引)

JQ中事件绑定（最基本的应用）

• $xxx.on(‘事件类型’，绑定的方法函数)

JQ中有内置循环机制

• $xxx是一个集合（包含很多项），我们直接用集合进行操作，例如：事件绑定，修改样式，JQ内部会分别迭代集合中的每一项，帮助我们处理每一项，这样就不需要我们自己去做循环处理

$liList.on('click', function () {
    })

JQ中有循环迭代的方法：each

$tabList.each((idnex,item)=>{
  //只有基于JQ选择器获取的内容（JQ对象）才可以使用JQ提供的方法
  $(item).on('click',function(){})
})

$(this).index()->获取元素的索引

• 原理：去结构中找所有的兄弟，算出自己所在位置的索引

JQ中操作类名的方法

• addClass（） 增加样式类
• removeClass（）移出样式类
• toggleClass（）增加或者移出样式类

JQ中提供了获取兄弟元素的方法

• prev、prevAll:上一个同级元素或者所有
• next、nextAll:下一个同级元素或者所有
• siblings:获取所有同级元素

JQ中还提供了链式写法，就是可以一直调用

$this.addClass('active').siblings().removeClass('active')

设置自定义属性的两种方式

• 对象的成员访问
  原理：直接操作元素对象的堆内存空间

• 基于set/remove/getAttribute去管理
  原理：直接设置在元素的标签上所以属性值都会转换为字符串,并且属性名不区分大小写，最后都会转换为小写

DOM映射

两种方式因为原理不一样，不能混用（除非一些特殊的内置属性，例如ID、在结构中设置，在堆内存中也有，改了堆内存的信息，结构上的也改变了，这个机制叫做DOM映射）

JS中的两大编程思想

1. 函数式编程 （优先推荐）
   关注的是what（结果），不关注how（过程），
   把需要实现的功能基于函数进行了封装，后期想实现这个需求，直接执行函数即可，无需重复实现

• 优势：
  • 低耦合，高内聚
  • 开发效率高
• 弊端：不灵活需要完全按照方法内部的操作去处理

2. 命令式编程
   关注的是how（过程），
   需要自己一步步的实现功能，每一个实现步骤都是自己去把控的

• 弊端：
  • 冗余代码多
  • 开发效率低
• 优势：可以灵活的控制每一个步骤，实现自己的特殊需求

匿名函数具名化

原本是匿名函数，不需要写名字，但是给他写上名字

匿名函数：

• 立即执行函数

(function(){})()

• 函数表达式——把函数作为值，赋值给变量/事件绑定，或者作为回调函数

document.body.onclick = function(){}
const sum = function(){}
arr.forEach(function(){})

优势：

• 设置的名字对外部不会产生影响，但是在函数内部可以使用，代表函数本身
• 更符合语法规范

user strict 开启严格模式
立即执行函数递归

(function(){
  arguments.callee()//可以调用函数本身，但是在严格模式下不支持

})()
//所以可以给匿名函数具名化
(function foo(){
  foo()
})()