jQuery基础

关于jQuery

现在是否还需要学习jQuery，毫无疑问到目前为止，我们仍然需要学习jQuery，原因如下：

0. 各大网站还在应用（京东、百度）
1. 一些广告页面、落地页还在应用
2. 源码非常优秀，有助于理解JavaScript
3. 其实对DOM操作并不能完全移除，只要涉及到DOM操作，jQuery是非常方便的

• jquery更方便写js8

jQuery简介

• jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画操作更加简单。
• jQuery最大的优点就是简化DOM操作

jQuery版本说明

jQuery分为三个大版本：1.x 2.x 3.x

1.x版本

兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x版本

不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.x版本

不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.6.0

jQuery重点讲解知识点

0. 选择器
1. DOM操作
2. CSS操作
3. 事件处理
4. 遍历
5. 动画

jQuery重点讲解知识点

0. 选择器

   0. [基础选择器]  ##选择器之基础选择器 

      0. 类选择器 $(".box")
      1. 元素选择器 $("span")
      2. ID选择器 $("#it")
      3. 子元素选择器 $(".topnav > li")
      4. 后代元素选择器 $(".topnav li")

   1. [属性选择器]  ##选择器之属性选择器 

      0. 完美匹配 [name="value"]
      1. 包含 [name*="value"]
      2. 前缀 [name|="value"]
      3. 开头 [name^="value"]
      4. 结尾 [name$="value"]
      5. 空格 [name~="value"]

   2. [jQuery选择器]  ##选择器之jQuery扩展 

      0. 索引值为index的元素 :eq(index) Selector
      1. 索引值为偶数 :even Selector
      2. 索引值为奇数 :odd Selector
      3. 第一个匹配 :first Selector
      4. 最后一个匹配 :last Selector
      5. 所有大于给定index（索引值） :gt(index) Selector
      6. 所有索引值小于给定index :lt(index) Selector

1. [DOM操作]  ##DOM操作 

   0. Class操作

      0. 添加类名 addClass()
      1. 移除类名 removeClass()
      2. 开关类名（若有则关，若无则开） toggleClass()
      3. 判断是否有类名 hasClass()

   1. 文本操作

      0. 获取或者设置html内容 html()
      1. 获取到的内容是字符串 text()
      2. 获input标签中的内容 val()

   2. 属性操作

      0. 获取或者设置元素的属性 attr() 例如src、alt等等
      1. 移除一个属性 removeAttr()

   3. DOM 插入并包裹现有内容（父级元素）

      0. 添加父级元素（可以设置父级属性） .wrap()
      1. 删除父级元素 .unwrap()
      2. 添加一个包裹所有相同子级的父级 .wrapAll()
      3. 子级元素里的内容被包裹 .wrapInner()

   4. DOM 插入现有元素内

      0. 在匹配元素里面的末尾处插入参数内容 .append()
      1. 在匹配元素里面的开头处插入参数内容 .prepend()

   5. DOM 插入现有元素外

      0. 同极元素的后面加入兄弟节点 .after()
      1. 同极元素的前面加入兄弟节点 .before()

   6. DOM 移除

      0. 清空元素里面的内容 .empty()
      1. 包括元素都移除 .remove()

   7. DOM 替换

      0. 用需要的内容代替匹配元素 .replaceAll()
      1. 把匹配元素替换成需要的内容 .replaceWith()

2. CSS操作

   0. 获取和设置匹配元素的样式 .css()

   1. 宽度高度处理 .height()，.width()

   2. 内部宽高处理（宽高+padding） .innerHeight()，.innerWidth()

   3. 外部宽高处理（宽高+padding+border+选择性magin（true）） .outerHeight()，.outerWidth()

   4. 位置

      0. 相对于文档的坐标 .offset()
      1. 相对于父级元素的坐标 .position()
      2. 滚动条的位置 .scrollLeft(), .scrollTop()

3. 事件处理

   0. 绑定事件处理器

      0. 添加事件或事件代理 on()
      1. 添加只能执行一次的事件 .one()
      2. 移除事件 .off()

   1. 鼠标事件

      0. 点击事件 .click()
      1. 滑入滑出俩个事件 .hover()
      2. 滑入事件（不支持冒泡） .mouseenter()
      3. 滑出事件（不支持冒泡）.mouseleave()
      4. 监听滑动事件 .mousemove()
      5. 滑入事件（支持冒泡）.mouseover()
      6. 滑出事件（支持冒泡）.mouseout()

   2. 表单事件

      0. 获取焦点事件 .focus()
      1. 失去焦点事件 .blur()
      2. 表单内容改变事件、改变后回车、改变后失去焦点 .change()
      3. 表单提交事件（只能form） .submit()

   3. 键盘事件

      0. 添加键盘按下事件 .keydown()
      1. 添加键盘事件 .keypress()
      2. 添加键盘抬起事件 .keyup()

   4. 浏览器事件

      0. 浏览器窗口发生变化 .resize()
      1. 浏览器滚动事件 .scroll()

   5. 事件对象

      0. 获取事件类型 event.type
      1. 获取指向触发事件的元素 event.target
      2. 获取指向添加事件的元素event.currentTarget
      3. 事件行为将不再触发 event.preventDefault()
      4. 防止事件冒泡到DOM树上(防止事件冒泡到DOM树上)event.stopPropagation()

4. 遍历

   0. 列表遍历

      0. 匹配当前集合中的每个元素(返回一个新的数组) .map()
      1. 匹配当前集合中的每个元素(返回一个新的数组) .each()

   1. 列表中获得一个JS对象的DOM元素 .get()

   2. 树遍历（元素关系）

      0. 获得子元素(可以传递一个选择器参数) .children()
      1. 获得后代元素 .find()
      2. 获得元素紧邻的后面同辈元素 .next()
      3. 获得元素的父元素 .parent()
      4. 获得元素的兄弟元素(可以传递一个选择器参数) .siblings()

5. 动画

   0. 执行显示动画（变大） .show()
   1. 执行隐藏动画（变小） .hide()
   2. 淡入的方式显示匹配元素 .fadeIn()
   3. 淡出的方式显示匹配元素 .fadeOut()
   4. 滑动动画显示（从上到下展开） .slideDown()
   5. 滑动动画隐藏（从下到上隐藏） .slideUp()
   6. 自定义动画 .animate()