JavaScript-day02笔记-优快云博客

本文详细介绍了JavaScript的基础概念，包括方法的定义与使用、变量类型、参数传递及返回值等，并深入探讨了DOM操作的基本原理和技术要点，如通过不同方式获取页面元素、修改样式和内容，以及如何处理页面事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法

方法：为了完成某个功能设置的代码块

方法的提供：

系统自带的

Alert(); confirm(); document.方法...

自定义方法

Function 方法名（隐形参数...）{

声明变量.

方法体（代码块...）

Return 返回值

}

Function :JS方法的关键字，说明是方法代码块

二：变量：全局变量和局部变量

全局变量：声明在JS范围内，方法外面声明的变量。作用范围（域）是JS范围的全部都能使用。

局部变量：声明在本方法里面。作用范围：本方法中使用，本方法外不能使用

三：参数：形式参数和实际参数

形式参数：简称形参：为了实现方法假定声明的变量

形参是在创建设计方法的时候声明

实际参数：简称实参：方法使用过程中，实际的参数的值

实参是调用方法的时候使用

返回值

方法完成后，如果需要方法完成后的信息，需要返回此信息。反之不需要返回值

利用return 返回值的关键字

Return：马上跳出方法，return 后面的代码不会执行

匿名方法

不需要方法名，就可以创建和使用方法一般创建匿名方法完成后，直接使用

匿名方法的结构：

Function (){

//方法

}

JS中常用的事件

事件：达到了临界条件，自动触发方法功能。

onfocus=”（达到事件条件是触发的）方法名()”;

Onfocus:获取鼠标的光标

Onblur：失去鼠标的光标

Onclick:鼠标点击

Onmouseover:鼠标悬停，与css中的伪类效果hover一致

Onmousesout:鼠标离开

Onchange:标签的值改变

Onsubmit:表单提交

Onload:页面加载

Onkeydown:键盘按键按下

Onkeyup:键盘松开

关键字：

This：当前标签，当前对象。在哪个标签中使用，就是指哪个标签。

Value：属性：input中的值

innerHTML:属性：innerHTML 标签中的内容

<div> innerHTML </div>

<p> innerHTML </p>

<a> innerHTML </a>

DOM操作

DOM:document object model 文档对象模型（表现页面对象）
在页面加载的时候，浏览器创建页面的文档对象模型，操作页面中任何元素
DOM对象操作的作用

操作innerHTML,改变页面中的标签内容
操作样式style，改变标签的样式
操作事件，对事件进行操作
操作属性，改变页面中标签的属性。

DOM操作标签，获取标签

通过id获取标签,返回一个标签

标签定义了id选择器
通过DOM的方法获取此标签：document.getElementBy(“id名”);

通过class获取标签，返回标签的数组

标签定义了class选择器
Document.getElemntsByClassName(“类名”);

通过标签名：tagName 获取标签，返回标签的数组

方法：document.getElementsByTagName(“标签名”);

通过name获取标签，返回标签的数组

先定义name的值
方法：document.getElementsByName(“name”);

5.取名规则：

不能采用关键字
思路：见名知意
驼峰命名法；意思：第一个单词首字母小写，后面的单词首字母大写
绝对不能以数字开头

6.DOM操作标签注意

（1）操作样式

//子属性:background-color,js中 - 去掉，子属性首字母大写backgroundColor

操作内容

dv.innerHTML+="<h1>内容改变</h1>";

操作样式过多，新建一个选择器，把选择器加入到标签中

//添加类名
dv.className="c1";

.c1{border: 1px solid;position: relative;top:100px;}

样式比较复杂的时候，利用css作为模板，定义样式

dv.style.backgroundImage="url('./image.png')";

城市选择

布局：选中标签和选择标签；

选中标签作为父级标签，选择标签作为子级标签
利用定位，以选中标签为定位参照物，进行绝对定位，不占用空间位置，不影响其他布局

JS功能：隐藏/显现选择标签，点击标签，传入城市到选中标签中。

-----------------------------------------------------------

所有JS事件

属性当以下情况发生时，出现此事件

onabort 图像加载被中断

onblur 元素失去焦点

onchange 用户改变域的内容

onclick 鼠标点击某个对象

ondblclick 鼠标双击某个对象

onerror 当加载文档或图像时发生某个错误

onfocus 元素获得焦点

onkeydown 某个键盘的键被按下

onkeypress 某个键盘的键被按下或按住

onkeyup 某个键盘的键被松开

onload 某个页面或图像被完成加载

onmousedown 某个鼠标按键被按下

onmousemove 鼠标被移动

onmouseout 鼠标从某元素移开

onmouseover 鼠标被移到某元素之上

onmouseup 某个鼠标按键被松开

onreset 重置按钮被点击

onresize 窗口或框架被调整尺寸

onselect 文本被选定

onsubmit 提交按钮被点击

onunload 用户退出页面

所有CSS伪类/元素

选择器示例示例说明

:checked input:checked 选择所有选中的表单元素

:disabled input:disabled 选择所有禁用的表单元素

:empty p:empty 选择所有没有子元素的p元素

:enabled input:enabled 选择所有启用的表单元素

:first-of-type p:first-of-type 选择每个父元素是p元素的第一个p子元素

:in-range input:in-range 选择元素指定范围内的值

:invalid input:invalid 选择所有无效的元素

:last-child p:last-child 选择所有p元素的最后一个子元素

:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素

:not(selector) :not(p) 选择所有p以外的元素

:nth-child(n) div:nth-child(1) 选择所有div元素的第一个子元素

:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素

:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素

:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素

:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素

:only-child p:only-child 选择所有仅有一个子元素的p元素

:optional input:optional 选择没有"required"的元素属性

:out-of-range input:out-of-range 选择指定范围以外的值的元素属性

:read-only input:read-only 选择只读属性的元素属性

:read-write input:read-write 选择没有只读属性的元素属性

:required input:required 选择有"required"属性指定的元素属性

:root root 选择文档的根元素

:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)

:valid input:valid 选择所有有效值的属性

:link a:link 选择所有未访问链接

:visited a:visited 选择所有访问过的链接

:active a:active 选择正在活动链接

:hover a:hover 把鼠标放在链接上的状态

:focus input:focus 选择元素输入后具有焦点

:first-letter p:first-letter 选择每个<p> 元素的第一个字母

:first-line p:first-line 选择每个<p> 元素的第一行

:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素

:before p:before 在每个<p>元素之前插入内容

:after p:after 在每个<p>元素之后插入内容

:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值