全面掌握DOM操作与jQuery实用指南

一、DOM知识

alert('我是弹窗');
prompt('弹窗输入');

1.Dom元素节点获取

方式一：通过 id 获取一个元素节点（为什么是一个呢？因为 id 是唯一的）

var div1 = document.getElementById("box1"); 

方式二：通过 标签名 获取元素节点数组，所以有s

var arr1 = document.getElementsByTagName("div"); 

方式三：通过 类名 获取元素节点数组，所以有s

var arr2 = document.getElementsByClassName("hehe"); 

2. jQuery元素节点获取

获取的是数组，里面包含着原生 JS 中的DOM对象。

var jqBox1 = $("#box");
var jqBox2 = $(".box");
var jqBox3 = $("div");

1.选择第1个匹配的元素–返回Element

document.querySelector (" #container" )

2.选择所有匹配的元素集合–返回NodeList

document. querySelectorAll( ".red”)

3.获取子节点-返回HTMLCollection

const container = document. querySelector (" #container" )
container.children

4.获取下方紧邻节点-返回Element

const red1 = document.querySelector(".red");
red1.nextElementSibling;

5.获取上方紧邻节点-返回Element

const red1 = document.querySelector(".red");
red1.previousElementSibling;

6.创建<p></p>元素

const p = document.createElement("p");

p.append("hello world");// 追加子节点，文本
const container = document.querySelector("#container");// 选择#container div
container.append(p);// 追加p元素到#container div
p.style = "color: red; padding: 20px;";// 修改p文字为红色
p.setAttribute("style", "color: red; padding: 20px;");// 或使用setAttribute(name, value)方式

7.addEventListener(eventName, listener)

eventName : string，事件名
listener : function，事件监听

3.节点

节点（Node）：构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。

虽然都是节点，但是实际上他们的具体类型是不同的。常见节点分为四类：

文档节点（文档）： 整个 HTML 文档。整个 HTML 文档就是一个文档节点。
元素节点（标签）： HTML标签。
属性节点（属性）：元素的属性。
文本节点（文本）： HTML标签中的文本内容（包括标签之间的空格、换行）。

节点的类型不同，属性和方法也都不尽相同。所有的节点都是Object。

4.BOM 对象

BOM可以让我们通过JS来操作浏览器。BOM中为我们提供了一些对象，来完成对浏览器相关的操作。常见的 BOM对象有：

Window： 代表整个浏览器的窗口，同时 window 也是网页中的全局对象。
Navigator：代表当前浏览器的信息，通过该对象可以识别不同的浏览器。
Location： 代表当前浏览器的地址栏信息，通过 Location可以获取地址栏信息，或者操作浏览器跳转页面。
History：代表浏览器的历史记录，通过该对象可以操作浏览器的历史记录。由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效。
Screen： 代表用户的屏幕信息，通过该对象可以获取用户的显示器的相关信息。

备注：可以通过window对象来使用，也可以直接使用。比如说，我可以使用 window.location.href，也可以直接使用 location.href，二者是等价的。
备注2：不要忘了，之前学习过的document也是在window中保存的。

5.常见的 BOM 对象

1.Navigator 和 navigator.userAgent

Navigator代表当前浏览器的信息，通过该对象可以识别不同的浏览器。
由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了。一般我们只会使用navigator.userAgent来获取浏览器的信息。

2.History 对象

History对象：可以用来操作浏览器的向前或向后翻页。
①History对象的属性

history.length // 属性声明了浏览器历史列表中的元素数量
解释：获取浏览器历史列表中的 url 数量。注意，只是统计当次的数量，如果浏览器关了，数量会重置为1。

②History对象的方法
方法①：

history.back(); // 只是单纯的返回到上一页 
解释：用来回退到上一个页面，作用和浏览器的「回退按钮」一样。

方法②：

复制代码
history.forward(); // 可加载历史列表中的前一个 URL（如果存在）
解释：用来跳转下一个页面，作用和浏览器的「前进按钮」一样。

方法③：

history.go(int n); // 需要整数作为参数

代码举例：

history.go(1); // 向前跳转一个页面，相当于 history.forward()
history.go(0); // 刷新当前页面
history.go(-1); // 向后跳转一个页面，相当于 history.back()

解释：向前/向后跳转 n 个页面。
备注：浏览器的前进按钮、后退按钮，在这个位置：

3.Location 对象
Location 对象：封装了浏览器地址栏的 URL 信息。

6.定时器的常见方法

setInterval()： 循环调用。将一段代码，每隔一段时间执行一次。（循环执行）
setTimeout()： 延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）
备注：在实际开发中，二者是可以根据需要，互相替代的。

1.setInterval() 的使用

setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）

参数：回调函数，该函数会每隔一段时间被调用一次，每次调用的间隔时间，单位是毫秒。
返回值：返回一个Number类型的数据。这个数字用来作为定时器的唯一标识，方便用来清除定时器。

清除定时器
定时器的返回值是作为这个定时器的唯一标识，可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是参数1，那么clearInterval(参数1)就可以清除定时器。setTimeout()的道理是一样的。

2.setTimeout() 的使用

setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）

参数：回调函数，该函数会每隔一段时间被调用一次，每次调用的间隔时间，单位是毫秒。
返回值：返回一个Number类型的数据。这个数字用来作为定时器的唯一标识，方便用来清除定时器。

二、jQuery 教程

1.jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()
	•	美元符号定义 jQuery
	•	选择符（selector）"查询"和"查找" HTML 元素
	•	jQuery 的 action() 执行对元素的操作
实例:
	1.	$(this).hide() - 隐藏当前元素
	2.	$("p").hide() - 隐藏所有 <p> 元素
	3.	$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
	4.	$("#test").hide() - 隐藏 id="test" 的元素

2.jQuery 选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
我们以前在CSS中学习的选择器有： 今天来学习一下jQuery 选择器。
jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。

3.jQuery 效果

（1）jQuery隐藏和显示

①jQuery hide() 和 show()

语法:
$(选择器).hide(speed,callback);//隐藏
$(选择器).show(speed,callback);//显示
例子：

<button id="hide-btn">隐藏</button>
<button id="show-btn">显示</button>
<p>Hello World!</p>

$(document).ready(function(){
  $("#hide-btn").click(function(){
    $("p").hide();
  });
  $("#show-btn").click(function(){
    $("p").show();
  });
});

②jQuery toggle()

⭐$(selector).toggle(speed,callback);

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

（2）jQuery Fading淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
①fadeIn()：jQuery fadeIn() 用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

②fadeOut()：jQuery fadeOut() 方法用于淡出可见元素。

$(selector).fadeOut(speed,callback);

③fadeToggle()：jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

$(selector).fadeToggle(speed,callback);

④fadeTo()：jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

$(selector).fadeTo(speed,opacity,callback);

（3）jQuery滑动

①slideDown()：

jQuery slideDown() 方法用于向下滑动元素。
语法:

$(selector).slideDown(speed,callback);

②slideUp()：

jQuery slideUp() 方法用于向上滑动元素。
语法:

$(selector).slideUp(speed,callback);

③slideToggle()：

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

$(selector).slideToggle(speed,callback);

④jQuery动画- animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

1.操作多个属性： 请注意，生成动画的过程中可同时使用多个属性：
2.使用相对值:（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
3.使用预定义的值可以把属性的动画值设置为 “show”、“hide” 或 “toggle”
4.使用队列功能： 默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

⑤jQuery 停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

⑥jQuery Callback 方法

Callback 函数在当前动画 100% 完成之后执行。
例子：

$("p").hide("slow")

⑦jQuery - 链(Chaining)

通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
实例

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

4.jQuery HTML

（1）jQuery 捕获

$("#btn1").click(function(){
	alert("值为: " + $("#test").val());
});

<p>名称: <input type="text" id="test" value="菜鸟教程"></p>
<button>显示值</button>

获取属性 - attr()

$("button").click(function(){ alert($("#runoob").attr("href")); });

jQuery - 设置

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
$(selector).height(); //不带参数表示获取高度
$(selector).height(200); //带参数表示设置高度val() - 设置或返回表单字段的值

jQuery 设置高度和宽度

高度操作：

$(selector).height();     //不带参数表示获取高度
$(selector).height(200);  //带参数表示设置高度

宽度操作：

$(selector).width();     //不带参数表示获取宽度
$(selector).width(200);  //带参数表示设置高宽度

jQuery 的坐标操作

$(selector).offset();
$(selector).offset({left:100, top: 150});

获取或设置元素相对于 document 文档的位置
position()方法

$(selector).position();

作用：获取相对于其最近的带有定位的父元素的位置。返回值为对象：{left:num, top:num}。
注意：只能获取，不能设置。
scrollTop()方法

	scrollTop();
	$(selector).scrollTop(100);

作用：获取或者设置元素被卷去的头部的距离。参数解释：
无参数：表示获取偏移。
有参数：表示设置偏移，参数为数值类型。
scrollLeft()方法

scrollLeft();
$(selector).scrollLeft(100);

作用：获取或者设置元素水平方向滚动的位置。参数解释：
无参数：表示获取偏移。
有参数：表示设置偏移，参数为数值类型。
jQuery 事件
事件中经常使用术语"触发"（或"激发"）例如： “当您按下按键时触发 keypress 事件”。
可以用 on() 方法来绑定事件，例如：

document.querySelector('#button').on('click', function() {
  //do something
});

document.querySelector('#button').on('click', function() {
  //do something
});

可以用 off() 方法来解绑事件，例如：

document.querySelector('#button').off('click');

常见 DOM 事件包括：

事件名	含义
点击事件	click
鼠标移入事件	mouseover
鼠标移出事件	mouseout
双击事件	dblclick
键盘按下事件	keydown
表单提交事件	submit
页面加载事件	load
页面卸载事件	unload
滚动事件	scroll
改变事件	change

const handleEvent = event => {event.target;{触发事件的元素}
//给按钮添加点击事件，弹出Hellow Word！

//选择按钮元素
const btn = document.querySelector ( " #btn" );

//创建事件监听函数
const btnClick = function(event) {
 console.log(btn === event.target); ll truealert( " hello world ! " );
}

//给按钮添加点击事件
btn.addEventListener(" click" , btnClick );