JQuery基础回顾

jQuery 是第三方开发的执行DOM操作的极简化的函数库
第三方: 需要下载
执行DOM操作:增删改查+事件绑定操作
极简化:JQuery对DOM中每个函数和对象都进行了终极的简化

原生DOM 繁琐 但 万能
JQuery 简单 但 没有简化做事的步骤 只支持PC
VUE 自动化 看不见步骤

函数库 jquery中一切都是函数不再有属性

简化: 增删改查 事件绑定 动画 ajax
解决了大部分兼容性问题 凡是jquery中的函数 都没有兼容性问题
今后激活所有的pc端项目都用jquery实现

版本 1.x 唯一兼容旧浏览器的版本 分为 未压缩版(开发) 压缩版(生产)
2.x 不兼容旧浏览器
3.x 不兼容旧浏览器 且添加了新功能 如 严格模式 for-of Promise
不需要下载也能使用 jquery.js 直接连接cdn服务器

CDN网络:内容分发网络
在全球范围 多台服务器共享资源 当用户访问整个CDN网络时 CDN网络会自动选择网络状况最优的服务器为用户下载资源

使用JQuery
引入 jquery.js 内存中实际上多出了一种类型(构造函数 原型对象)
.click()实际上是 自动调用原生js的 addEventListener(“click”,()=>{})

function jQuery(){return new JQuery()};
var $=jQuery()

查找:
JQuery几乎支持所有css3的选择器
添加了个别新选择器
(1)基本过滤选择器 vs 子元素过滤选择器
回顾 子元素过滤选择器css3中已经存在
:first-child 选择作为其父元素下第一个子元素的元素
:last-child选择作为其父元素下最后一个子元素的元素
:nth-child(i)选择作为其父元素下第i个子元素的元素 i从1开始
基本过滤选择器 jq新增
先把所有符合条件的元素放置在一个集合汇总 统一编号 i从0开始
:first 集合中的第一个元素
:even 偶数位置的元素
:odd 奇数位置的元素
:last 集合中的最后一个元素
:eq(n) 集合中的第n个元素
:lt(n) 集合中从0 - n的元素 不包含n
:gt(n) 集合中从n到末尾的元素 不包含n

equal 等于 less than 小于 greater than 大于
less than and equal 小于等于 greater than and equal 大于等于

(2)内容过滤选择器
通过元素内容选择 :contains(“筛选的内容”)
通过元素后代选择 :has(“后代元素”)
(3)可见性过滤选择则其
根据元素是否可见选择元素
:visible 选择可见的元素
:hidden 选择隐藏的元素 只能选择脱离文档流的隐藏元素
隐藏一个元素的四种方法: display:none 脱离文档流的隐藏
visibility:hidden 占位隐藏
opacity:0 占位隐藏
<input type=“hidden” 脱离文档流的隐藏
(4)表单元素的过滤
:input 表单元素选择器 可以选择所有的表单元素
包括input select textarea button
input 只能选择input元素
:[type] 每个input元素都有对应的type元素
:text :password :checkbox :radio
内容属性和样式

修改
几乎所有的修改函数都是两用:一个参数是获取 两个参数是修改
(1)内容: 原始HTML片段 .html()
纯文本内容 .text()
表单元素的值 .val()

(2)获取属性 .attr() .prop()
自定义扩展属性 .attr()
attr代替的是核心dom
prop代替的是 .
(3)样式:
获取或修改内联样式
$().css(“属性名”,"[属性值]")
如果给了新属性值 则等效于调用元素.style修改内联样式
如果没给新属性值 则等效于调用getComputedStyle()获取计算后的样式

jq中用元素的class 批量修改样式
DOM中 如果一个元素被多个class修饰 而只想改其中某一个class时 会繁琐
JQ中 $().addClass(“类名”) 添加类名
$().removeClass(“类名”)移除类名
$().hasClass(“类名”)是否有类名
$().toggleClass(“类名”) 在添加和删除之前来回切换

父子关系
$().children.$(“last/first-child”)
兄弟关系
.prev()
.next()
.prevAll()
.nextAll()

添加/删除/替换/克隆
添加新元素:
DOM:创建新的空元素 为新元素添加必要的属性 将新元素追加到dom树上
追加方法 .appendChild() .insertBefore() .replaceChild()
JQ:用HTML片段创建新元素 将新元素追加到dom树上
$(“html片段”)
末尾追加 $父元素.append($新元素) $新元素.appendto($父元素)
开头插入 $父元素.prepend($子元素) $新元素.prependto($父元素)
插入到现有元素前 $现有元素.before($新元素)
$新元素.insertbefore($现有元素)
插入到现有元素后 $现有元素.after($新元素)
$现有元素.insertAfter($新元素)
替换现有元素 $现有元素.replaceaWith($新元素)
$新元素.replaceaAll($现有元素)
删除元素 .remove()

事件绑定 回顾 dom中最灵活的事件绑定
元素.addEventListener(“事件名”，“处理函数”)
元素.removeEventListener(“事件名”，“原处理函数”)
jq中 .on 代替前者 .off代替后者

简写 jq对21种常用事件提供了简写方式–>查手册

对事件委托的简写
$父元素.on(“事件名”,“选择器条件”,function(){})

页面加载完成后自动执行
window.onload事件
为了多个引入的需要在页面加载后执行的js文件不被覆盖
window.addEventListener(“load”,function(){})
$(window).on(“load”,function(){})
$(window).load(function(){})

仅dom内容加载完时 其实还有一个事件
DOMContentLoaded 此事件仅等待html和js加载完就会发生
无需等待css和图片加载 比onload事件要早
此事件有兼容性问题 所以不在DOM中使用 而是在jq中使用
$(document).ready(function())//当dom树加载完成就执行函数简写$(function(){})
大部分和css以及图片无关的页面初始化操作 采用此方法导入

与css和图片有关的操作才放在$(window).load()

鼠标事件
1.dom中 mouseover mouseout 反复进出子元素也会反复触发父元素上的鼠标事件
jq中 mouseenter mouseleave 反复进出子元素不会反复触发父元素上的鼠标事件
因为鼠标进出引发的效果特别多 每次都绑定事件很繁琐
如果同时绑定mouseenter和mouseleave时 可以只绑定一个 hover()事件
hover(function(){},function(){})

$(目标元素).trigger(“事件名”) 模拟触发事件
如果要触发的事件属于21种常用事件之一 则可用事件处理函数 两用的特征
$(目标元素).事件名()

键盘事件
onkeydown 当键盘的按键被按下时自动触发
onkeyup 当键盘的按键被按下后又抬起时自动触发
input 输入事件

---

动画操作
1.简单动画:固定的三种动画效果 不带参数–瞬间 带参数(毫秒数)–过渡
显示隐藏 $().show() $().hide()
$().toggle()
淡入淡出 $().fadeIn() $().fadeOut() $().fadeToggle()
上滑下滑 $().slideUp() $().slideDown（） $().slideToggle()
问题:效率不如css动画高 jq中动画函数都是用js和定时器模拟的
不可维护
特例:.show() .hide()在不带参数时 很好用效率高
2.万能动画
能对任意css属性执行动画效果 类似于css的transition
$元素.animate({css属性:目标值,…},持续毫秒)让元素以当前位置为起点在规定时间段内过渡到目标值
animate中不需要定义当前状态 会自动获得当前状态 自动计算到目标状态如何过渡
只支持单个数值的css属性 不支持css3变换 和颜色变化
排队 .animate().animate()
并发 .animate({样式1：值1，样式2：值2，。。。})

实现动画效果有两种方式:
如果动画效果无需人工干预 且是机械的变化 首先用css实现
如果动画效果需要人工干预

---

类数组对象操作
jq所有的查找结果对象都是类数组对象
jq模拟出两个数组中常用的操作 遍历和查找
遍历 $(...).each(function(i,elem))对$()查询结果中的每个DOM元素执行相同的操作
i表示当前遍历到第几个dom元素
elem表示当前遍历到的dom元素
查找 $(…).indexOf

---

添加自定义函数
$.fn.函数名=function(){}

---

封装jQuery自定义插件
当项目中一个功能需要被反复使用
jquery提供了一套组件 jqueryUI 官网下载

jquery的原理:侵入性
组件函数根据自己的需要根据自己的需要自动为对应元素添加class属性 或自定义扩展属性
优点:使用组件会很省事 缺点:不可维护

封装自定义组件
前提:组件的样式和功能已经在页面上实现 但没有提取出来形成独立的可重用的组件
提取:提取jq组件样式和js到单独的外部文件中
多个组件的css样式可能出现冲突 所以以各种组件的所有样式类必须以统一的父元素的样式类作为选择器的开头

---

ajax
$.ajax({
url:接口地址,
type:“get” / “post”,
data:{
参数1:值1，
…
}
dataType:“json” //表示从服务器端返回结果的返回值
success(result){//只有当响应成功时才自动触发这个回调函数}
})

---

跨域
一个网站请求其他网站的资源

浏览器的同源策略(CORS->cross origin resouerces shareing)
浏览器只允许ajax使用与自己相同域名的服务端
允许ajax向不同源头的服务器发送请求 也能接受响应的结果
不允许ajax使用来自不同源头的响应结果

会被同源策略阻止的情况包括
域名不同
子域名不同
端口不同
协议不同
即使同一套机器相同域名 域名->ip发请求
如何解决跨域问题
服务器端CORS跨域:
浏览器会检查返回数据的响应头中的来源地址和当前网页的来源地址是否一致
只要让服务端返回数据时将来源地址篡改为和当前网页来源地址一致
res.writeHead(200,{“Access-Control-Allow-Origin”:“当前网页来源地址”})
cors模块—服务器端

JSONP: 视频
前后端分离
今后公司里的项目都是由前端和后端两个团队并行开发
前后端唯一联系:接口地址
后端跑出一系列接口地址
前端负责发送请求 获取数据 并将数据显示到界面

var funs={
getHeader(callback){
/$.ajax({
success(result){
callback(result)
}
})/

},
    getIndex(callback){},
    getFooter(callback){}

}

---

$().is() 判断元素是什么
e.preventDefault()阻止默认行为

---

this:
obj.fun() this->obj
fun() || (function(){})() setTimeout(function(){},ms) this->window
new Fun() this ->fun.prototyoe
arr.forEach()/map(function(){}) this ->window
dom元素.οnclick=function(){} this->dom元素
dom元素.addEventListener("",funcition(){}) this->dom元素
$().on() this->dom元素
$().click() this->dom元素
arr.prototype.方法=function(){} this->将来调用此方法的子数组对象
$.fn.函数名=function(){} this->将来调用此方法的子jq对象