(1). 核心 DOM：操作任意标签树
(2). HTML DOM：操作 HTML 标签树
(3). XML DOM：操作 XML 标签树
2. 常用的核心 DOM 操作
(1). 查找元素的方法
①. document.getElementById('p1')
②. document.getElementsByName('uname')(表单元素)
③. document.getElementsByTagName('div')
④. document.getElementsByClassName('btn')
⑤. document.querySelector('选择器')
⑥. document.querySelectorAll('选择器')
遍历 DOM 节点：
①. node.parentNode
②. parent.childNodes、parent.children
③. node.nextSibling、node.previousSibling
(2). 修改元素的属性
①. node.setAttribute('title','值')
②. node.getAttribute('title')
(3). 修改元素的内容
①. element.innerHTML
②. element.textContent/innerText
①. element.style.color = 'red';
②. element.className = 'btn btn-danger'
(5). 修改元素的值
①. inputElement.value
(6). 添加新元素
①. var obj = document.createElement('div');
parent.appendChild(obj)
(7). 删除已有元素
①. parent.removeChild(node)
(8). 替换旧元素
①. parent.replaceChild(oldChild, newChild)
(9). 元素克隆
①. element.cloneNode()
(10). 总结：核心 DOM 操作的问题
①. 方法名普遍比较长
②. 操作比较僵硬
③. 方法存在浏览器兼容性
3. JQuery 概述
JQuery 是一个 DOM 操作的函数库，简化了常用的 DOM 操作,理念：Write Less， Do More.JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
(1). DOM 操作 — 重点
(2). 事件处理
(3). 动画函数
(4). AJAX
5. JQuery 的版本问题
(1). JQuery 1.x：比较大、功能偏弱、兼容老 IE
(2). JQuery 2.x：比较小、功能强大、不兼容老 IE
(3). JQuery 3.x：比较小、功能更强大、不兼容老 IE
HTML 中使用 JQuery，只需要使用 Script 标签引入 JQuery-*.js 即可，会为全局window添加两个新的成员：
(1). window.$
(2). window.Jquery
6.JQuery 函数的特点
(1). $或者 JQuery 是一个函数，返回值是一个 JQuery 类数组对象
(2). 即使没有查找到需要的元素，JQuery 类数组对象也不会是 null/undefined，调用 JQuery 函数不会报错
(3). JQuery 类数组对象提供的函数都自带 for 循环遍历每个查找到的元素
(4). JQuery 函数底层都是 DOM 操作，所以可和原生的 DOM 操作组合使用
(5). 原生 DOM 对象不能调用 JQuery 提供的函数
JQuery 函数返回的类数组对象也不能调用核心 DOM 成员
(6). 原生 DOM 对象和 JQuery 对象间如何转换
①. 原生 DOM 对象封装到JQuery 类数组对象
$(domObject)
②. JQuery 类数组对象中取出封装的 DOM 对象
$('button')[index]
(7). JQuery 对象方法的返回值一般还是当前选定的类数组对象，可以实现“链式调用”
7. JQuery 的选择器语法支持所有的 CSS 选择器语法，并屏蔽了浏览器兼容性，同时还扩展了一些新的选择器语法
8. 基本选择器 — 重点
(1). #id
(2). className
(3). 标签名
(4). *通用选择器
9. 层级选择器 — 重点
(1). ancestor descendant 后代选择器
(2). parent > child 直接子代选择器
(3). prev + next 下一个相邻兄弟选择器
(4). prev ~ siblings 后续的所有兄弟选择器
基本过滤选择器把所有满足选中的元素放在一个大集合中进行排序，不论是否在同一个父元素中与否，下标从 0 开始
(1). :first 第一个
(2). :last 最后一个
(3). :eq(index) 第 index 个
(4). :gt(index) 下标大于 index
(5). :lt(index) 下标小于 index
(6). :odd 下标为奇数的
(7). :even 下标为偶数的
(8). :not(selector)
11. 子元素过滤选择器 — 重点
在每个父元素中进行分组，查找指定的子元素，下标从 1 开始
(1). :first-child 第一个子元素
语法: $('li:first-child');
(2). :last-child 最后一个子元素
语法: $('li: last -child');
(3). :nth-child(index) 第 index 个子元素
语法: $('li:nth-child(2)')；
奇数个: $('li:nth-child(odd)')；
偶数个: $('li:nth-child(even)')；
(4). :only-child 只有一个子元素的元素
语法：$('li:only-child')；
(1). [attribute]
语法:$('a[title]') 选中所有具备 title 属性的 a 元素
(2). [attribute=value]
语法: $('[data-toggle="dropdown"]')，选中所有具备 data-toggle 属性且值为 dropddown 的元素
(3). [attribute!=value] 属性值不等于value的属性
(4). [attribute^=value] 属性以value开头的属性
(5). [attribute$=value] 属性以value结尾的属性
(6). [attribute*=value] 具备指定的属性，且值中包含指定字符
13. 可见性选择器
(1). :visible
语法:$(':visible')选中所有可见元素
(2). :hidden
语法:$(':hidden')选中所有隐藏元素
(3). 测试：哪些是:hidden 可以选中的？
①. display:none 可以
②. visibility: hidden 不可以
③. opacity: 0 不可以
④. input[type="hidden"] 可以
(1). :contains(txt) 文本中包含“txt”字的元素
(2). :has(selector) 包含选择器所匹配的元素的元素
(3). :empty 选中内容为空元素
(4). :parent 匹配含有子元素或者文本的元素
15. 表单元素选择器
(1). :input
(2). :text
(3). :password
(4). :radio
(5). :checkbox
(6). :submit
(7). :image
(8). :reset
(9). :button
(10). :file
(11). :hidden
(12). :enabled
(13). :disabled
(14). :checked
(15). :selected
(1). 核心 DOM
①. element.getAttribute('title')
读取属性的值
②. element.setAttribute('title', 'abc')
设置属性的值
(2). JQuery
①. var value = $(..).attr('title')
读取属性的值
②. $(..).attr('title', 'abc')
设置属性的值
提示：读取和设置元素的 data-*扩展属性，可以使用 attr()方法，也可以使用 data()
方法，如：<a data-my-target="1.jpg">
①. var v = $(...).data('my-target') 读取
②. $(...).data('my-target', '2.jpg') 设置
17. 操作元素的内容
(1). 核心 DOM
①. var h = element.innerHTML;
②. element.innerHTML = h;
③. var t = element.innerText/textContent;
④. element.innerText/textContext = t;
(2). JQuery
①. $(..).html( )
读取 innerHTML
②. $(..).html( 'html' )
设置 innerHTML
③. $(..).text()
读取 innerText
④. $(..).text( 'txt' )
设置 innerText
(1). 核心 DOM
①. var c = element.style.color
读取行内样式
②. element.style.color = 'red'
设置行内样式
③. var n = element.className
读取 ClassName
④. element.className = n
设置 ClassName
(2). JQuery
①. $(..).css('color')
读取指定样式的值
②. $(..).css('color', 'red')
设置行内样式
③. $(..).addClass('alert')
添加一个 class
④. $(..).removeClass('alert')
删除一个 class
⑤. $(..).hasClass('alert')
判断选定元素是否具有指定 class
19. 操作表单元素的值
(1). 核心 DOM
①. var v = input.value
②. input.value = 'v'
(2). Jquery
①. $(...).val( )
②. $(...).val('value')
(3). 面试题：在操作元素的相关属性时，使用 attr()、val()、prop()、data()有何区别？
attr() 一般只用于操作元素的 HTML 字面属性，如 src、href、name..
val() 操作的是HTML 元素对应的 JS 对象的 value 属性
prop() 操作的是 HTML 元素对应的 JS 对象的 disabled、readyonly、selected、checked 等 Boolean 类型属性
data() 操作的是 HTML 元素对应的 JS 对象的扩展数据属性（对象缓存数据），而attr('data-xx')读取/修改的 HTML 元素字面
20. 获取元素
①. element.parentNode
寻找父节点
②. element.childNodes/children
获取子节点
③. elemnet.nextSibling
获取下一个兄弟
④. element.previousSibling
获取上一个兄弟
(2). JQuery
①. $(..).parent()；
返回选定元素的父节点
②. $(..).children()；
返回所有子节点
③. $(..).next()；
返回下一个兄弟
④. $(..).prev()；
返回上一个兄弟
⑤. $(..).siblings()；
返回所有的同辈兄弟
21. 添加新的元素
(1). 核心 DOM
var li = document.createElement('li')
// 创建子节点
ul.appendChild( li );
// 添加到父节点
var li = $('<li class="item">内容</li>')
// 创建子节点
$('ul').append( li );
// 在父节点最后追加子节点
$(li).appendTo( 'ul' )
// 子节点追加到父节点最后
以上代码可以简写为
$('ul').append( '<li class="item">内容</li>' )
22. 删除已有的元素
(1). 核心 DOM
①. ul.removeChild( li )
由父元素删除孩子
(2). JQuery
①. $('li').remove()
删除当前选定元素
23. 替换已有元素
(1). 核心 DOM
①. parent.replaceChild(oldChild, newChild);
(2). JQuery
①. $('oldChild').replaceWith( newChild )
已有节点用新节点替换，返回被删除的旧节点
②. $('newChild').replaceAll( oldChild )
24. 克隆节点
(1). 核心 DOM
①. var copy = element.cloneNode( )
(2). JQuery
①. var copy = $(..).clone()
返回选定元素的副本
②. var copy = $(..).clone(copyListener)
参数指示是否复制选定元素绑定的监听函数，默认为 false，不复制监听函数
25. JQuery 函数第二部分：事件处理函数
JQuery 的历史上先后出现了若干事件处理函数
(1). one(事件名称, fn) 仅对指定事件监听一次
(2). on() / off()
(3). click() / mouseover() / mouseout() / keyup()
26. on()函数
(1). 第一种使用方法——直接绑定在事件源上
①. $('事件源').on('事件名称', fn)
绑定监听函数
②. $('事件源').off('事件名称')
取消所有监听函数
①. 若选中元素很多，每个都会有一个监听函数
②. 无法为后添加的元素执行绑定
(2). on()函数的第二种使用方法——委托给父元素进行事件代理
①. $('parent').on('事件名称', '子元素选择器', fn)
A. DOM 中为元素绑定监听函数：
btn.onclick = function(){ }；
btn.addEventListener('click', function(){ })；
B. JQuery 中的 on()函数底层是 addEventListener
27. 面试题：window.onload 和$(document).ready()的异同？
(1). window.onload 是核心 DOM 的写法
window.onload = function(){ ... }
只能为绑定一次，只有全部的网页内容(html/css/js/图片....)加载完成才能触发
(2). $(document).ready()是 JQuery 的写法
$(document).ready(function(){ ... })
底层是 addEventListener('DOMContentLoaded', fn)，可以先后绑定多次，只要“DOM 内容(只包括 html/js)加载完成”即可触发
28. JQuery 中的 hover()函数
JQuery 监听“鼠标进入+鼠标离开”有如下三种方法：
(1). $(..).mouseover(fn) + $(..).mouseout(fn)
(2) . $(..).mouseenter(fn) + $(..).mouseleave(fn)
注意: 方法 3 等同于方法 2
29. JQuery 中的 trigger()函数
使用 JS 代码代替用户触发指定的事件，调用之前绑定的监听函数
$('.btn').trigger( 'click' ) 可简写：$('.btn').click()
30. JQuery 中的函数第三部分：动画函数 — 隐藏和显示动画
隐藏和显示函数通过使用定时器修改目标元素的 width / height / opcaity 三个样式的值来实现动画
(1). $(..).show()
(2). $(..).hide()
(3). $(..).toggle()
31. JQuery 中的函数第三部分：动画函数 — 折叠展开/收起动画
折叠展开/收起动画函数通过使用定时器修改目标元素的height 一个样式的值来实现动画：
(1). $(..).slideUp( )
(2). $(..).slideDown( )
(3). $(..).slideToggle()
32. JQuery 中的函数第三部分：动画函数 — 淡入/淡出动画
淡入/淡出动画函数通过使用定时器修改目标元素的 opacity 一个样式的值来实现动画：
(1). $(..).fadeIn( )
(2). $(..).fadeOut( )
(3). $(..).fadeToggle( )
提示: 上述六个动画函数都可以在最后接收一个参数为函数
$(..).fadeOut( 300, function(){ //在动画结束时的回调函数 })
33. JQuery 中的函数第三部分：动画函数 — animate()
语法 : $(..).animate({
属性 1: 值 1
}, 300, fn);
动画排队：执行完一个动画后，再执行另一个
动画并发：同时执行多个属性的动画效果
34. animate({ })可以对哪些 CSS 属性执行动画？
(1). width、height、opacity、fontSize....等等有可渐变属性值（数值型）的样式可以执行动画
(2). display、fontFamily、transform、颜色类属性等没有渐变属性值的样式不能执行动画
35. Web 应用中可用的动画技术：
(1). CSS3 Transition
(2). CSS3 Keyframes
(3). 定时器 + 属性修改 JQuery1/2 动画函数
(4). requestAnimationFrame JQuery3
36. JQuery 类数组对象的操作：
window.$ <=> window.Jquery
$()函数或 JQuery()返回值是一个“类数组象”— 有点像数组，但不是 Array 类型的实例，其中封装着查找到的所有 DOM 元素。该对象称为“JQuery 对象”，其类数组相关操作：
(1). $(..).length
获取类数组中封装的 DOM 对象的数量
(2). $(..)[index]
获取类数组中封装的第 index 个 DOM 对象
(3). $(..).get(index)
获取类数组中封装的第 index 个 DOM 对象
(4). $(..).each(fn)
遍历类数组中封装的每一个 DOM 对象，针对每个 DOM 元素执行一次指定的回调函数
(5). $(..).index(domObj)
返回指定的 DOM 元素在当前类数组中的下标
37. 补充：页面 DOM 内容加载完成后执行指定的函数，以下三种写法一样
(1). $(document).ready(fn)
(2). $().ready(fn)
(3). $(fn)
Plugin：插件，在现有的功能基础上添加更多的功能，扩展整体的应用。
JQuery 中的插件（即函数）分为两类：
(1). JQuery 全局插件函数
原本要声明的工具函数（如 max()/min()）如果声明为全局函数，会造成“全局对象(window)的污染；为了避免污染全局对象，可以把这些函数纳入到 JQuery 对象的名下
声明方式：JQuery.max = function(arr){ }
调用方式：JQuery.max([10,38,50])
(2). JQuery 对象插件函数
JQuery 对象插件函数就是为所有的 jQuery 对象添加的公共函数，用于操作当前选定的 DOM 元素
声明方式：JQuery.fn.max = function( ){ }
调用方式：$('li').max()
JQuery(..)或 $(..)的返回值是一个类数组对象—“JQuery 对象”,所有的 JQuery 对象的原型：JQuery.fn;
若想给所有的 JQuery 对象都添加一个扩展函数，只需要加给 JQuery.fn 即可
39. JQuery 常用AJAX函数
(1). $.get(url, data ,callback);
发起一个ajax的GET请求, 在请求主体中提交请求数据，如果服务器返回成功，响应消息，调用callback函数，在方法中处理响应的数据 callback ＝> function(data){}
$.get会根据服务器端返回的响应消息内容类型自动决定如何处理，如果是application/json,会自动调JSON.parse(xhr.responseText)进行解析
$.get("cake_type.php", {cid:id },function(data){
// data json＝>JSON.parse(data);
});
(2). $.post(url,data,callback);
发起一个ajax POST请求，并在请求主体中提交请求数据，如果服务器返回成功响应消息，调用callback，在callback方法中处理响应数据，使用方法三种：
①. $.post(url,data,callback);
②. $.post(url,'id=1&name=tom',callback);
③. $.post(url,{id:1,name:tom},callback);
(3). $.getJSON(url,data,callback); (了解)
发起异步请求GET，要求服务器返回JSON数据格式,会自动JSON.parse(data);
(4). $(“选择器”).load(url);获取服务器返回的HTML响应片段，设置为当前元素的innerHTML
①. 服务器返回的必须是HTML片段
②. 服务器返回的数据会替换已有数据
(5). $.getScript(url,data,callback); (了解)
发起异步请求GET, 要求服务器返回Javascript数据格式，即使不是，也会自动eval(xhr.responseText)进行执行，而$.get()可以实现同样的功能，却可以根据服务器端的响应头来决定是否调用eval()
(6). $.ajax({}); 功能最全最强，万能AJAX封装函数，提供非常多的可选项,可以处理各种情形，前面函数都是它的简化版,无法处理失败的情况
$.ajax({
// 请求方式post/pub/delete/head
type:'GET'
//请求地址
url:"x.php"
//请求服务器数据
data:'k=v&k1=v1'
//请求消息发送之前调用fn
beforeSend:fn
//响应完成并且成功调用fn
success:fn
//响应完成但有问题调用fn
error:fn
//响应完成回调(无论成败)fn
complete:fn
});
40. AJAX注意事项
对于异步请求成功后创建DOM元素，不能进行直接事件绑定! click()/bind(),因为在执行此事件绑定时，这些元素在DOM还不存在，必须将相关事件委托给DOM树上己经存在父元素
41. 面试题：JQuery中如何使用JSONP发起异步请求：
(1). $.getJSON()
①. 使用XHR发起异步请求(不能跨域)
$.getJSON('x.php', doResponse)
②. 使用JSONP发起跨域异步请求
$.getJSON('http://跨域地址/x.php?callback=?', doResponse)
(2). $.ajax()
①. 使用XHR发起异步请求(不能跨域)
$.ajax({ })
②. 使用JSONP发起跨域异步请求
$.ajax({ dataType: 'jsonp' })
转载：https://blog.csdn.net/qq_36824777/article/details/114480881