JavaScript相关基础知识

最新推荐文章于 2023-10-24 22:05:07 发布

毛茸茸的勺子

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量297

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46019555/article/details/115855649

笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍JavaScript的基础概念、语法特点及常用操作方法，涵盖数据类型、函数、事件处理等内容，并讲解如何利用DOM模型操作网页元素。

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

JavaScript概述

1、JavaScript 是一种基于对象和事件驱动并具有安全性能的脚本语言。
2、JavaScript 优点：
①动态类型，不用给变量指定数据类型
②弱类型，一个变量可以赋不同类型的值（弱类型是指不同类型的变量之间可以相互赋值，但在某一时刻，一个变量只存在某一种数据类型）
③简单性，解释性语言，不需要编译，方便调试
④跨平台性，依赖浏览器本身，与操作环境无关
⑤必要性，主流浏览器统一支持的语言
缺点：兼容性差，因为依赖于浏览器执行，所以受各浏览器影响，兼容性叫较差。
3、JavaScript 优缺点和用法：
（1）是一种解释性脚本语言（代码不进行预编译）。
（2）主要用来向 HTML 页面添加交互行为。
（3）可以直接嵌入 HTML 页面，但写成单独的 js文件有利于结构和行为的分离。
（4）跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

JavaScript基础语法

1、JavaScript 原始数据类型：Number，String，Boolean，Undefined，Null
2、===：类型和值都须相同则为 true

函数与事件处理

1、匿名函数：函数定义时，函数名是可选的，即可以定义没有函数名的函数，但该函数必须马上执行或赋值给一个变量（或事件）
2、在定义函数时使用了多少个形参，在该函数调用的时候应该给出相同数目的实参。若给出的实参少于数目形参，则未给出的形参类型为undefined；若给出的实参数目多于形参，则被调函数忽略多余的实参。
3、全局变量：
①在所有函数之外定义，或者没有通过 var 声明的变量
②其作用范围是同一个页面文件中的所有脚本
局部变量：
①通过 var 声明且定义在函数体之内的变量
②只作用于该函数体
4、函数返回值注意事项：
①返回值可以直接赋予变量或用于表达式中
②return 语句表示结束当前函数的执行
③return语句可以不带表达式（例如：return;），此时返回值为undefined
④函数中可以不出现 return 语句，仍会返回值，该值为 undefined
5、事件：
①onclick 单击事件
②onload 页面加载事件（文档元素）—— 在页面或图像加载完成后立即发生。
③onunload 页面退出事件 —— 在用户退出页面时发生。
6、事件在 JavaScript 中的地位：
JavaScript 程序是“基于事件驱动”
—通过事件同用户产生交互
—初始化代码通常在文档加载事件中执行

字符串和数组

1、字符串操作：
（1）slice(start [,end]) 截取字符子串。从 start 开始（包括 start），到 end 结束（不包括 end）
（2）indexOf(searchvalue [,fromindex]) 要查找的子串；规定在字符串中开始检索的位置。找到之后返回该子串首字符下标，找不到返回-1
（3）charAt(index) 指定位置字符的下标。若index<0||index>=string.length，返回一个空字符串
（4）split(separator [, howmany]) 从指定字符分割的参数；返回的数组的最大长度。
2、定义数组：
（1）var arr1 = [‘a’,‘b’,‘c’];
（2）var arr3 =new Array();

对象

1、定义对象
（1）new关键字创建对象：var obj = new Object( );
（2）直接创建对象实例
var objName = {
attrName : attrValue ,
methodName : function( ){
//some code…
} ， …
}
（3）使用构造函数创建对象。构造函数不能被直接调用执行；使用 new 关键字来通过构造函数创建对象（实例化）
2、this 关键字
①在对象方法内部，使用 this 指代当前对象
②在构造函数中，this指代实例对象
③在全局定义的普通函数内部，this指向window对象
3、对象分类: 宿主对象、内置对象、自定义对象
4、内置对象：
String、Array、Boolean、Number、Date、RegExp、JSON、Math

BOM模型

1、JavaScript 组成：
ECMAScript、BOM（Browser Object Model）、DOM（Document Object Model）
2、window对象：
（1）对话框：① 警告框 ----- alert( )
② 确认窗口 ----- confirm( )
③ 输入框 ----- prompt(message, [default])
（2）延迟执行 setTimeout(code,interval)
取消延迟执行 clearTimeout(id)
（3）周期执行 setInterval(code,interval)
取消周期执行 clearInterval(id)
（4）打开浏览器窗口 window.open(url,name,features,replace)
关闭浏览器窗口 window.close()
3、history对象：
后退到上一个访问过的页面 window.history.back();
前进到下一个访问过的页面 window.history.forward();
跳转到某个访问过的页面 window.history.go(n);
4、location对象：包含当前窗口的URL信息
host 主机名和端口
hostname 主机名
href 当前页面的URL
port 端口号
reload 重新加载当前页面
hash 设置或返回 URL 的锚部分
search 设置或返回当前 URL 的查询部分
5、navigator对象：包含当前使用浏览器的信息
appName 浏览器名称
appVersion 浏览器版本和运行平台
onLine 是否在线（非脱机）
platform 浏览器运行平台
userAgent HTTP用户代理请求头的字符串
6、screen对象：客户端屏幕相关信息
height 屏幕的垂直分辨率 width 屏幕的水平分辨率
availHeight 可用屏幕高度 availWidth 可用屏幕宽度
7、document子对象代表了在浏览器中加载的子文档

DOM模型

1、DOM（Document Object Model）：文档对象模型
①对文档的结构化的描述
②定义了在程序中对该结构进行访问的方式
2、DOM分类：
①核心DOM：用于任何结构化文档的标准模型
—定义了与系统平台和编程语言无关的接口，DOM是一种API（应用程序接口）
②HTML DOM：用于HTML文档的标准模型
③XML DOM：用于XML文档的标准模型
3、DOM作用：访问、增加、删除、修改文档内容，包括元素、属性、文本
4、HTML 文档中的所有内容都是节点：
① 整个文档是一个文档节点
② 每个 HTML 元素是元素节点
③ HTML 元素内的文本是文本节点
④ 每个 HTML 属性是属性节点
⑤ 注释是注释节点
5、直接获取节点
①document.getElementById( )
②document.getElementsByTagName( )
③document.getElementsByClassName( )
④document.documentElement 返回 HTML 文档中元素
⑤document.head 返回 HTML 文档中元素
⑥document.body 返回 HTML 文档中元素
6、通过节点关系访问节点
①获取子节点：childNodes，元素节点：children
②获取第一个子节点：firstNodes，元素节点：firstElementChild
③获取父节点：parentNode，元素节点：parentElement
④获得前后兄弟节点：previousSibling，nextSibling
7、元素节点内容：innerHTML
获取某一元素节点的属性：
—标准方式：node.getAttribute(“attrName”)
—简单方式：node.attrName
设置某一元素节点的属性：node.setAttribute(“attrName”, value)
删除某一元素节点的属性：node.removeAttribute(“attrName”)
判断某一元素节点是否含有某属性：node.hasAttribute(“attrName”)
8、DOM节点属性：
（1）nodeType 属性以数字值返回节点的类型
元素节点：1 属性节点：2 文本节点：3
nodeType是只读的
（2）nodeName 属性依据节点的类型返回其名称
元素节点：大写标签名属性节点：属性名文本节点：#text
nodeName是只读的
（3）nodeValue 属性返回或设置当前节点的值
元素节点：null 属性节点：属性值文本节点：文本本身
9、添加一个DOM节点：
①生成一个DOM节点
—生成元素节点：document.createElement(“name”)
—生成文本节点：document.createTextNode(“text”)
②把生成的节点作为某一个节点的子节点进行添加
向父节点的末尾添加新的子节点： node.appendChild( newNode ）
在已有子节点前插入新的子节点：node.insertBefore( newNode, oldNode )
10、删除一个DOM节点
删除元素节点或文本节点：parentNode.removeChild(childNode)
删除属性节点：node.attrName = “”
11、修改一个DOM节点
修改一个元素节点（即用新节点替换某个子节点）：
oldNode.parentNode.replaceChild ( newNode, oldNode )
修改一个文本节点（替换文本值）：textNode.nodeValue = “ ”;
修改一个属性节点（覆盖原有属性）：node.attrName = ‘newAttrValue’;

JavaScript控制样式

1、element.style 可读可写行内样式

function getStyle(obj, attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	} else {
		return getComputedStyle(obj, null)[attr];
	}
}

事件对象

1、事件在浏览器中是以对象的形式存在的。在事件处理函数执行时，事件对象将会由浏览器自动传递给事件处理函数。
2、button：返回当事件被触发时，哪个鼠标按钮被点击。
clientX：返回当事件被触发时，鼠标指针相对于浏览器的水平坐标。
clientY：鼠标指针的垂直坐标。
screenX：鼠标指针相对于屏幕的水平坐标。
screenY：鼠标指针的垂直坐标。
keyCode：被敲击的键的虚拟键盘码。
3、preventDefault( ) 取消事件的默认动作
4、使用 stopPropagation() 方法阻止事件冒泡