JQuery常用命令

1. DOM 分为三部分

(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

(4). 修改元素的样式

①. 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.

4. JQuery 提供了四类函数

(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 后续的所有兄弟选择器

10. 基本过滤选择器 — 重点

基本过滤选择器把所有满足选中的元素放在一个大集合中进行排序，不论是否在同一个父元素中与否，下标从 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')；

12. 属性选择器

(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"] 可以

14. 内容过滤选择器

(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

16. 操作元素的属性

(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

18. 操作元素的样式

(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. 获取元素

(1). 核心 DOM, 遍历 DOM 树上的节点

①. 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 );

// 添加到父节点

(2). JQuery

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('事件名称')

取消所有监听函数

on() 的第一种用法有两个限制：

①. 若选中元素很多，每个都会有一个监听函数

②. 无法为后添加的元素执行绑定

(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) . $(..).hover( fn, 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)

38. JQuery 中的插件函数

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' })