DOM知识

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

Dom元素节点获取

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

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

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

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

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

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

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

获取下方紧邻节点-返回Element
const red1 = document.querySelector ( “.red”)
red1. nextElementSibling
获取上方紧邻节点-返回Element
const red1 = document.querySelector ( “.red”)
red1. previousElementSibling
//创建

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

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

事件

事件名	含义
click	鼠标/屏幕点击
mouseenter/mouseleave	鼠标进入 / 移出元素区域
drag/dragstart/dragend	元素被拖拽 / 拖拽开始/拖拽结束
input	<input>、<select>、<textarea>内容改变
focus/blur	获取 / 失去焦点
keydown/keyup	键盘按下 / 松开
play/pause	媒体(视频、音频)播放 / 暂停

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

节点

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

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

文档节点（文档）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。
元素节点（标签）：HTML标签。
属性节点（属性）：元素的属性。
文本节点（文本）：HTML标签中的文本内容（包括标签之间的空格、换行）。
节点的类型不同，属性和方法也都不尽相同。所有的节点都是Object。

BOM 对象

BOM可以让我们通过JS来操作浏览器。BOM中为我们提供了一些对象，来完成对浏览器相关的操作。
常见的 BOM对象有：
Window：代表整个浏览器的窗口，同时 window 也是网页中的全局对象。
Navigator：代表当前浏览器的信息，通过该对象可以识别不同的浏览器。
Location：代表当前浏览器的地址栏信息，通过 Location 可以获取地址栏信息，或者操作浏览器跳转页面。
History：代表浏览器的历史记录，通过该对象可以操作浏览器的历史记录。由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效。
Screen：代表用户的屏幕信息，通过该对象可以获取用户的显示器的相关信息。
备注：可以通过window对象来使用，也可以直接使用。比如说，我可以使用 window.location.href，也可以直接使用 location.href，二者是等价的。
备注2：不要忘了，之前学习过的document也是在window中保存的。

常见的 BOM 对象。

Navigator 和 navigator.userAgent

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

History 对象

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

1.History对象的属性

history.length//属性声明了浏览器历史列表中的元素数量

解释：获取浏览器历史列表中的 url 数量。注意，只是统计当次的数量，如果浏览器关了，数量会重置为1。

2.History对象的方法

方法①：

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

方法②：

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

方法③：

history.go( int n); // 需要整数作为参数
代码举例：
history.go( 1 ); // 向前跳转一个页面，相当于 history.forward()
history.go( 0 ); // 刷新当前页面
history.go( -1 ); // 向后跳转一个页面，相当于 history.back()

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

Location 对象

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

定时器的常见方法

setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）
setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）
备注：在实际开发中，二者是可以根据需要，互相替代的。
setInterval() 的使用
setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）
参数：回调函数，该函数会每隔一段时间被调用一次，每次调用的间隔时间，单位是毫秒。
返回值：返回一个Number类型的数据。这个数字用来作为定时器的唯一标识，方便用来清除定时器。
清除定时器
定时器的返回值是作为这个定时器的唯一标识，可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是参数1，那么clearInterval(参数1)就可以清除定时器。
setTimeout()的道理是一样的。
setTimeout() 的使用
setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）
参数：回调函数，该函数会每隔一段时间被调用一次，每次调用的间隔时间，单位是毫秒。
返回值：返回一个Number类型的数据。这个数字用来作为定时器的唯一标识，方便用来清除定时器。

jQuery 教程

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" 的元素

jQuery 选择器

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

1、jQuery 的基本选择器
2、层级选择器
3、基本过滤选择器

4、属性选择器

5、筛选选择器

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滑动

1.slideDown()：

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

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

2.slideUp()：

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

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

3.slideToggle()：

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

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

4.jQuery动画- animate() 方法

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

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

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

5.jQuery 停止动画

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

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

6.jQuery Callback 方法

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

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

7.jQuery - 链(Chaining)

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

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

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()方法
javascript
$(selector).position();

作用：获取相对于其最近的带有定位的父元素的位置。返回值为对象：{left:num, top:num}。
注意：只能获取，不能设置。
scrollTop()方法
javascript
scrollTop();
$(selector).scrollTop(100);
作用：获取或者设置元素被卷去的头部的距离。参数解释：
无参数：表示获取偏移。
有参数：表示设置偏移，参数为数值类型。
scrollLeft()方法
javascript
scrollLeft();
$(selector).scrollLeft(100);
作用：获取或者设置元素水平方向滚动的位置。参数解释：
无参数：表示获取偏移。
有参数：表示设置偏移，参数为数值类型。
jQuery 事件
事件中经常使用术语"触发"（或"激发"）例如： “当您按下按键时触发 keypress 事件”。
常见 DOM 事件：
常见 DOM 事件包括：

1. 点击事件（click）
2. 鼠标移入事件（mouseover）
3. 鼠标移出事件（mouseout）
4. 双击事件（dblclick）
5. 键盘按下事件（keydown）
6. 表单提交事件（submit）
7. 页面加载事件（load）
8. 页面卸载事件（unload）
9. 滚动事件（scroll）
10. 改变事件（change）

可以用 on() 方法来绑定事件，例如：

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

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

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

常见 DOM 事件包括：

1. 点击事件（click）
2. 鼠标移入事件（mouseover）
3. 鼠标移出事件（mouseout）
4. 双击事件（dblclick）
5. 键盘按下事件（keydown）
6. 表单提交事件（submit）
7. 页面加载事件（load）
8. 页面卸载事件（unload）
9. 滚动事件（scroll）
10. 改变事件（change）

可以用 on() 方法来绑定事件，例如：

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

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

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

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