JavaScript语言诞生主要是完成页面的数据验证。

方式一：只需要在head或body标签中，使用script标签来书写JavaScript代码。

方式二：使用script标签引入单独的Js代码文件。

​ a.js文件内容

​ html代码内容

Object形式的自定义对象

对象的定义：

var 变量名 = new Object();

变量名.属性名 = 值;

变量名.函数名 = funcion(){};

对象的访问：

变量名.属性/函数名();

{}花括号形式的自定义对象

对象的定义：

var 变量名 = {

​ 属性名：值

​ 属性名：值

​ 函数名：function(){}

}

对象的访问：

变量名.属性/函数名();

事件是电脑输入设备与页面进行交互的响应。

常用的事件

onload加载完成事件

onclick单击事件

onblur失去焦点事件

onchange内容发生改变事件

onsubmit表单提交事件

DOM全称是Document Object Model 文档对象模型

就是能够将文档中的标签，属性，文本，转换成为对象来管理。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u4TeXxBo-1628931304286)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20210811154204687.png)]

Document对象的理解

document.getElementById(elementId)

通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值

document.getElementsByName(elementName)

通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值

document.getElementsByTagName(tagname)

通过标签名查找标签 dom 对象。tagname 是标签名

document.createElement( tagName)

方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

childNodes 获取当前节点的所有子节点

firstChild 获取当前节点的第一个子节点

lastChild 获取当前节点的最后一个子节点

parentNode 获取当前节点的父节点

nextSibling 获取当前节点的下一个节点

previousSibling 获取当前节点的上一个节点

className 用于获取或设置标签的 class 属性值

innerHTML 表示获取 /设置起始标签和结束标签中的内容

innerText 表示获取 /设置起始标签和结束标签中的文本

jQuery是JavaScript和Query，它是辅助JS开发的类库。

核心思想是write less, do more。

目前世界上10000个访问最多的网站中，有超过55%的在使用jQuery。

使用jQuery给一个按钮绑定单击事件。

1. dom对象转换为jQuery对象

2.jQuery对象转为dom对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v0EANKKs-1628931304289)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20210811161303886.png)]

#id 选择器：根据 id查找标签对象

.class 选择器：根据 class 查找标签对象

element 选择器：根据标签名查找标签对象

* 选择器：表示任意的，所有的元素

selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回

ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素

parent > child 子元素选择器:在给定的父元素下匹配所有的子元素

prev + next 相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素

prev ~ sibings 之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings元素

基本过滤器

:first 获取第一个元素

:last 获取最后个元素

:eq(index) 匹配一个给定索引值的元素

内容过滤器

:empty 匹配所有不包含子元素或者文本的空元素

[attribute=value] 匹配给定的属性是某个特定值的元素

属性过滤器

[attribute] 匹配包含给定属性的元素

表单过滤器

:text 匹配所有 文本输入框

:password 匹配所有的密码输入框

:radio 匹配所有的单选框

:checkbox 匹配所有的复选框

表单对象属性过滤器

:checked 匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象

:selected 匹配所有选中的 option

html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。

text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。

val() 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样。

attr() 可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled等等

​ 还可以操作自定义的属性

prop() 可以设置和获取属性的值，只推荐操作checked、readOnly、selected、disabled等等、

内部插入：

appendTo() a.appendTo(b) 把a插入到b子元素末尾，成为最后一个子元素

prependTo() a.prependTo(b) 把a查到b所有子元素前面，成为第一个子元素

外部插入：

insertAfter() a.insertAfter(b) 得到ba

insertBefore() a.insertBefore(b) 得到ab

替换：

replaceWith() a.replaceWith(b) 用b替换掉a

replaceAll() a.replaceAll(b) 用a替换掉所有的b

删除：

remove() a.remove(); 删除a标签

empty() a.empty(); 清空a标签里的内容

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有就删除，没有就添加样式

offset() 获取和设置元素的坐标

基本动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏

toggle() 可见就隐藏，不可见就显示

以上动画方法都可以添加参数

淡入淡出动画

fadeln() 淡入(慢慢可见)

fadeOut() 淡出(慢慢小时)

fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0透明,1完全可见,0.5半透明.

fadeToggle() 淡入/淡出 切换

$(function(){});和window.οnlοad=function(){}的区别？

他们分别是在什么时候出发的？

他们触发的顺序？

他们执行从次数？

click() 它可以绑定单击事件，以及触发单击事件

mouseover() 鼠标移入事件

mouseout() 鼠标移除事件

bind() 可以给元素一次性绑定一个或多个事件

one() 使用上跟bind一样。但是one方法绑定的事件只会触发一次。

unbind() 跟bind方法相反，取消绑定

live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效。

什么是事件的冒泡？

​ 事件的冒泡是指，父子元素同时监听同一个时间。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

如何阻止事件的冒泡？

​ 在事件函数体内，return false;可以阻止事件的冒泡传递。

参考视频：尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版