前端知识点总结——JQ

1.什么是jQuery:

jQuery: 第三方的极简化的DOM操纵的函数库
第三方: 下载
极简化: 是DOM操纵的最终简化: 4个方面:

1. DOM: 增编削查
2. 事宜绑定:
3. 动画结果:
4. Ajax

DOM操纵: 进修jQuery照样在学DOM，只不过API简化了
函数库: jQuery中都是函数，用函数来处置惩罚一切题目
为何运用:

1. DOM操纵的最终简化
2. 处置惩罚了大部分浏览器兼容性题目
   通常jQuery让用的，都没有兼容性题目

2.怎样运用:

下载: 版本:
1.x: 兼容旧浏览器 IE8

1.x.js  未压缩版  
  优: 包含完全的解释，花样，变量名，可读性好
  缺: 体积大，不便于传输
 什么时候: 进修和开辟阶段
1.x.min.js  压缩版
  优: 体积小，便于传输
  缺: 去掉解释，花样，极简化了变量名
      可读性差
 什么时候: 临盆环境

2.x: 不再兼容旧浏览器
3.x: 不再兼容旧浏览器，供应了更多新特性:
蔑视: 3.x的新特性:

1. 一切代码运行在严厉形式下
2. 用for...of替代了forEach  $.each
3. 新动画API: requestAnimationFrame()
4. 支撑promise
5. ajax的API预防跨站点剧本(XSS)进击

引入网页: 2种:

1. 引入服务器当地的js文件: <script src=”js/jquery-1.x.js”
2. 引入CDN收集中同享的js文件:

<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js”

道理:
引入jquery-1.x.js实际上是在全局增加了一种新范例jQuery
包含:
组织函数jQuery: 用于建立jQuery范例的子对象
原型对象jQuery.fn: 用于保留只需jQuery范例的子对象才接见的共有要领
怎样运用jQuery简化版API:
题目: DOM元素没法运用jQuery简化版API
处置惩罚: 要想运用jQuery简化版API，必需先建立jQuery范例的子对象:
怎样建立jQuery范例的子对象: 2种:

1. 经由过程查找DOM元素，将DOM元素保留到新建立的jQuery对象中:
   var $jq=$(“selector”)
   什么是jQuery对象: 包含找到的DOM元素的类数组对象
2. 将已取得的DOM元素直接保留进新建立的jQuery对象中

jQuery API的通用特性: 3个

1. 自带遍历: 对jQuery对象团体挪用一次API，等效于对内部每一个元素都挪用一次API
2. 一个函数两用: 给新值，就修正；没给新值，就读取原值
3. 每一个函数都返回正在操纵的jq对象: 链式操纵!

3.查找: 挑选器

基础挑选器: 同CSS
id class element * ,
条理挑选器: 同CSS
空格 > + ~
子元素过滤挑选器: 同CSS
在各自父元素内，离别排序，从1最先
:first-child :last-child :only-child
:nth-child(2n/2n+1/odd/even/i)
基础过滤挑选器(位置过滤挑选器): jQuery新增
将一切相符条件的元素，保留在一个一致的鸠合中，在鸠合内一致编号。从0最先
:first/last :gt/lt/eq(i) :even/odd
属性过滤挑选器: 同CSS
内容过滤: jQuery新增4种:

1. 以内容中的文本作为条件查询父元素
   :contains(text) 内容包含指定笔墨的元素
2. 以子元素的特性作为查询条件，查询父元素
   :has(selector) 包含相符selector要求的子元素的父元素
3. 空元素/非空元素:
   :parent
   :empty

可见性过滤: jQuery新增
:hidden 只能挑选两种隐蔽的元素

type="hidden"     display:none

:visible
状况过滤: 同CSS 四大状况:
:enabled :disabled :checked :selected
表单元素过滤:
:input 挑选一切表单元素: input select textarea button
:[type] 每种type都对应一种挑选器

:text  :password  :file    :button  :submit ....

4.修正:

内容: 3种:
html代码片断: $(…).html([新内容]) .innerHTML
纯文本内容: $(…).text([新内容]) .textContent
表单元素的值: $(…).val([新值]) .value
清空内容: $(…).empty();
属性: 3种:
HTML规范属性: $(…).attr(“属性名”[,”值”])

题目: 一次只能修正一个属性的值:
处置惩罚: 同时修正多个属性的值:
 $(...).attr({
   属性名:值,
   属性名:值,
      ... : ...
 })

状况属性: $(…).prop(“属性名”[,bool])
自定义扩大属性: $(…).data(“属性名”[,”值”])
款式:
修正: 内联款式:
猎取: 盘算后的款式:
都用.css: $(…).css(“css属性名”[,值])
题目: 零丁修正每一个css属性，代码烦琐
处置惩罚: 用class批量修正款式:
$(…).addClass(“class … “)
$(…).removeClass(“class …”)
$(…).hasClass(“class …”)

$(…).toggleClass(“class …”)

1. 按节点间关联查找:
   2大类:

   1. 父子:
      $(…).parent()
      $(…).children([“selector”])
      题目: 只能取得直接子元素
      处置惩罚: 在一切子女中查找
      $(…).find(“selector”)
      $(…).children().first();
      $(…).children().last();
   2. 兄弟:
      $(…).prev/next()
      $(…).prevAll/nextAll([“selector”])
      $(…).siblings([“selector”])

2. 增加,删除,替代,克隆:
   增加: 2步:

   1. 建立新元素: var $elem=$(“html代码片断”)

   2. 将新元素增加到DOM树:
      末端追加: $parent.append($elem) //return $parent

             $elem.appendTo($parent) //return $elem

      开首插进去: $parent.prepend($elem) //return $parent

             $elem.prependTo($parent) //return $elem

      指定元素前插进去: $child.before($elem)
      指定元素后插进去: $child.after($elem)

可简化为1步:
$(“html代码片断”).appendTo($parent)
$parent.append(“html代码片断”)

移除: $(…).remove()
替代: $(…).replaceWith(); //右替代左 //return 左

  $(...).replaceAll(...); //左替代右 //return 左

克隆: $(…).clone();
浅克隆: 仅复制内容和款式，不复制行动

.clone() 默许是浅克隆

深克隆: 即复制内容和款式，又复制行动

.clone(true) 

5.事宜:

蔑视: jq中有几种事宜绑定体式格局，离别是什么:

1. .bind(“事宜名”,handler)
   .unbind(“事宜名”,handler)
   3个重载:

    .unbind("事宜名",handler) 移除指定事宜上的一个处置惩罚函数
    .unbind("事宜名")  移除指定事宜上的一切处置惩罚函数
    .unbind() 移除一切事宜上的一切处置惩罚函数

2. .one(“事宜名”,handler)
   只能触发一次，触发后，自动解绑

3. .delegate(“selector”,”事宜名”,handler)
   实在就是运用冒泡的简化版：

   1. 将运用冒泡中的目的元素推断提升到第一个参数，用挑选器作为推断条件
   2. 将this从新指回了目的元素

蔑视: .delegate vs .bind

1. 绑定位置差别:
   .bind() 直接绑在目的元素(子元素)上
   .delegate() 绑在父元素上
2. 事宜监听的个数差别:
   .bind() 致使事宜监听个数增加
   .delegate() 一直只需一个监听
3. .bind() 没法让动态天生的新元素自动取得事宜处置惩罚函数
   .delegate() 纵然厥后动态天生的新元素也可自动取得父元素上的事宜处置惩罚函数

解绑: .undelegate()

1. .live/die() 烧毁

2. .on: 一致bind和delegate的用法

   1. 替代bind: .on(“事宜名”,handler)
   2. 替代delegate: .on(“事宜名”,”挑选器”,handler)

解绑: .off()

1. 最终简化: .事宜名(handler)

6.页面加载后实行: 2种:

1. DOMContentLoaded:
   DOM内容(html,js)加载完成,就提早触发
   什么时候: 操纵不须要守候css和图片时，首选DOMContentLoaded
   jQuery: $(document).ready(function(){ … })
   简化: $().ready(function(){…})
   更简化: $(function(){…})

    ES6: $(()=>{ ... })

2. window.onload=function(){
   //守候页面一切内容(html,css,js,图片)都加载完才实行
   }
   什么时候: 假如必需守候css和图片加载完，才实行的操纵，必需放在window.onload中

蔑视: jQuery中$的道理: 4种重载

1. 假如传入挑选器字符串，则查找并建立jq对象
   优化: speed up
   假如挑选器只是一个id，则挪用getElementById
   假如挑选器只是一个标签，则挪用getElementsByTagName
   假如挑选器只是一个class，则挪用getElementsByClassName
   假如挑选器庞杂，才调querySelectorAll
2. 假如传入DOM元素对象，则封装现有DOM元素为jq对象
3. 假如传入html代码片断，就建立新元素:
4. 假如传入函数，就绑定DOM内容加载后实行

7.鼠标事宜:

DOM: mouseover mouseout
收支子元素，也会重复触发父元素上的事宜
jq: mouseenter mouseleave
收支子元素，不再触发父元素上的事宜
简化: 假如同时绑定mouseenter和mouseleave

可简化为.hover(enterHandler, leaveHandler)
 假如enterHandler和leaveHandler可一致为一个处置惩罚函数: .hover(handler)

模仿触发:
$(…).trigger(“事宜名”) => $(…).事宜名()

8.动画:

简朴动画: 3种:

1. 显现隐蔽: .show(ms) .hide(ms) .toggle(ms)
   不带参数，默许: 霎时显现隐蔽，不带动画

    道理: display属性完成的，不支撑动画

   带毫秒数参数: 会有动画结果

2. 上滑下滑: .slideUp(ms) .slideDown(ms) .slideToggle(ms)
3. 淡入淡出: .fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)

题目: 1. 结果是牢固的，不便于保护

  2. 用顺序的定时器完成的动效，效力不如transition

全能动画:
$(…).animate({
css属性:目的值,
css属性:目的值,
},ms)
题目: 只支撑单个数值的css属性

不支撑色彩和CSS3变更

动画播放后自动实行: 动画API的末了一个参数都是一个回调函数，在动画播放完成后自动实行!
回调函数中的this，指正在播放动画的当前DOM元素

9.列队和并发:

1. 并发: 多个css属性同时变化
   放在一个animate函数内的多个css属性默许并发变化
2. 列队: 多个css属性前后变化
   对同一个元素，前后挪用多个动画API，都是列队实行
   道理: 一切动画API肇端并非马上最先动画，而仅是将当前动画函数到场元素的动画行列中守候实行。

住手动画: $(…).stop();
默许: 仅住手动画行列中，当前正在播放的一个动画，行列中后续动画，依旧实行！
怎样住手动画，并清空行列: .stop(true)

挑选器: :animated 可挑选或推断一个正在播放动画的元素

10.类数组对象操纵:

遍历:
$(…).each(function(i,elem){
//this->当前elem
})
蔑视: $(…).each() vs $.each(数组/鸠合,fun)

查找:
var i=$(…).index(要找的DOM元素/jq对象)
简化: 假如在一个父元素内查找子元素:

$(子元素).index();

11.为jquery增加自定义要领:

1. 增加在jQuery.fn中
   强调: jQuery.fn.自定义要领=function(){

        //this->未来挪用该要领的jq对象
      }

2. 挪用时: $(…).自定义要领()

12.插件: 为规范函数库或框架增加功用的第三方库

1. 官方插件jQuery UI:
   运用jQueryUi:
   先引入jquery.js，由于jQuery UI是基于jQuery开辟的
   再引入jquery-ui.js
   再编写自定义剧本
   包含:
   交互: 自学
   结果:

   1. 重写了三类简朴动画API，增加了新的动效
   2. 为addClass/removeClass/toggleClass，也增加了动效
   3. 重写了animate要领，支撑色彩动画

部件:
什么是部件: 具有完全款式和行动的小功用
怎样运用: 4步:

1. 引入: jquery-ui.css
2. 依据部件商定，编写html内容构造
3. 引入jquery.js和jquery-ui.js
4. 在自定义剧本中，找到插件的父元素，挪用插件API

道理:

侵入性: 在开辟者不知情的情况下，自动增加class和行动
优: 简朴!
缺: 不可保护!

jQuery UI vs bootstrap
jQuery UI 傻瓜式，侵入式
优: 简朴 缺: 不可保护
bootstrap 少许手动增加款式和行动(自定义扩大属性)
缺: 比拟jQuery UI，轻微贫苦
优: 可定制!

13.第三方插件:

文件上传:
富文本编辑器:
masonry: 彩砖墙/瀑布流

14.自定义插件:

什么时候: 只需愿望复用一块功用和款式时，都要封装为插件
怎样:
条件: 必需已用原生的html,css,jss完成了插件的功用
2种封装插件的作风:
jQuery侵入式:

1. 将插件所需的css提取出来，保留在零丁的css文件中

2. 定义插件的js文件:
   先搜检是不是提早引入了jQuery
   定义插件函数，保留在jQuery的原型对象jQuery.fn中

   侵入: 依据插件须要，为子元素自动增加class
         为子元素绑定事宜处置惩罚函数

3. 运用插件:
   引入插件的css文件
   在body中按插件的划定，编写html内容
   引入jquery.js和插件的js文件
   在自定义剧本中，查找要运用插件的父元素，挪用插件函数

Bootstrap DIY式:

1. 将css拷贝到自力的css文件中
2. 编写js:
   先考证是不是提早加载了jQuery
   查找自定义扩大属性，为其绑定事宜
3. 运用插件:
   引入插件的css
   依据插件的HTML花样要求，编写内容
   为插件的HTML元素手动增加class
   为触发事宜的元素增加指定的自定义扩大属性

15.jQuery的ajax API

$.ajax({
type:”get/post”,
url:”xxx”,
data:”rawData”/{ 变量名:值, …}
dataType:”json”,
beforeSend(){

//在发送之前触发

}
completed(){

//只需要求完成，不管胜利照样失利，都触发

}
success(data){

//要求胜利触发

}
error(){

//发作错误时触发

}
}).then(data=>{
… …
}).catch(err=>{ … })
简写:

1. 特地发送get要求

$.get(url,data,dataType).then(data=>{ … })

1. 特地发送get要求，吸收JSON相应，并自动转为js对象

$.getJSON(url,data).then(data=>{ … })

1. 特地发送get要求，吸收js语句相应，并实行

$.getScript(url,data)

1. 特地发送get要求，猎取一段html代码片断的相应，并自动添补到前面的父元素中

$(父元素).load(“xx.php/xx.html”)
强调: 不支撑then!

特地简化post要求的:
$.post(url,data,dataType).then(data=>{ … })

16.跨域要求:

跨域:
从http://store.company.com/dir/…

许可跨域要求: link, img, script
不许可跨域: xhr对象 (ajax要求)
变通: script 须要服务器返回一段可实行的js语句

 服务器应当返回包含数据的一条可实行的js语句

怎样完成:
客户端完成: JSONP (添补式json)

1. 在客户端定义处置惩罚函数
2. 在按钮单击事宜中，动态建立script元素，src设置为服务端地点，并照顾要求参数callback=函数名
3. 在服务器端，吸收要求参数中的函数名，将函数名和要返回的数据，拼接为一条可实行的js语句
4. 客户端script，要求服务端php，取得可实行语句，自动挪用提早定义好的函数处置惩罚数据
5. 在客户端处置惩罚函数末端，要动态删除script

肇端jQuery的ajax api都可用, 只不过，dataType必需都写成jsonp，道理同上。

服务端: header(“Access-Control-Allow-Origin:*”);
许可客户端运用xhr对象跨域要求！

结语：以为总结的还能够的话，点下赞咯，你们的勉励是我行进的动力，感谢列位老铁们！