您的位置: 首页  >  文章  >  web前端知识（三）

web前端知识（三）

分类: 文章 • 2024-05-21 12:13:34

web前端知识（三）

JavaScript

JavaScript是一种动态、弱类型、基于原型的语言、内置支持类的脚本语言。

组成

JavaScript 实现是由3个不同部分组成：

  • 核心（ECMAScript）
  • 文档对象模型（Document Object Model 简称DOM）
  • 浏览器对象模型(Browser Object Model 简称BOM)
特点

可以使用任何文本编辑工具编写JavaScript 代码，然后用浏览器解释执行。
控制文档的外观和内容；
对浏览器进行控制；
与HTML表单的交互；
与用户的交互;
执行计算等

基本语法

定义变量：
声明变量: var 变量名
赋值 ： 变量名 = 5；
同时声明和赋值： var 变量名 = 10；
声明多个变量： var, a, b , c=10;

运算符号：
算术运算符：+、-、*、/、%、++、–、-
比较运算符：==、！=、>、>=、<、<=
逻辑运算符：&&、||、！

流程控制：
if 条件语句：

if (条件) {
	//js代码
}else{
	// js代码
}

switch 多分支语句：

switch(表达式) {
	case 常量1：
		//javaScript代码
		break;
	case 常量2：
		//javaScript代码
		break;
	...
	default:
	//javaScript 语句
}

for 循环语句：

for (初始化；条件；增量) {
	// javaScript 语句
}

while 循环：

while (条件) {
	//javaScript 语句
}

类型转化：
parseInt(String) 将字符串转换为整型数字。例如：parseInt(“10”) 将字符串转为整型值10；
parseFloat(String) 将字符串转为浮点型数字。如：parseFloat (“43.96”)将字符串“43.96”转换为浮点数值 43.96。

函数
使用function关键字自定义函数

function awsome() {
	// js代码
}
 // 以上定义了一个名为awsome()的无参函数
function awsome(obj) {
	//js代码
}
// 以上定义了一个名为awsome 的有参数构造

数组对象：
定义数组：
- 数组对象名称 = new Array(元素个数)
- 数组对象名称 = new Array(元素1，元素2，…)
- 数组对象名称 = [元素1，元素2，…]
如：

var obj0 = new Array(2)；
obj0[0] = "北京"；
obj0[1] = "上海"；
var obj1  = new  Array("北京","上海")；
var obj2 = ["北京"，"上海"]；

遍历数组：

for (var i in array) {
	document.write(array[i]);
}

** 事件**：
点击事件：onclick ;
失去焦点事件：onblur；
获得焦点事件： onfoucs;
数据发生变动时触发：onchange;
鼠标移入和移出事件：onmouseover和onmouseout事件
等等。。

浏览器对象

web前端知识（三）
分层结构：
web前端知识（三）

Window对象
Window对象是文档对象模型中的顶级对象，表示当前浏览器窗口，是所有其他对象的父对象；在window对象属性当中，除去代表窗口中对象的属性（document、frames、history、location等）外，其他属性还可分为两类：表示窗口状态信息的属性（closed、defaultStatus、length、status）和作为窗口代名词的属性（opener、self、parent、top）。
常用属性：
documen: 窗口中显示的HTML文档对象。
history：浏览过窗口的历史记录对象。
length:返回浏览器历史列表中的URL数量。
location:窗口文件地址对象。
event:事件对象。
screen:屏幕对象，height返回显示屏幕高度，width返回显示屏幕高度。

//打开另一个页面
window.open(URL)
// 关闭当前页面
window.close();

提示框：
web前端知识（三）

定时器
使用 JavaScript，可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为定时事件。
有两种定时器：

  • 周期性定时器： 以一定的间隔执行代码，循环往复。
    setInterVal(code,millsec); 创建周期性定时器
    clearInterVal(obj) 取消定时器。obj：启动的定时器对象。
  • 一次性定时：在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，执行之后，自动停止。
    setTimeout(code,millisec);
    clearTimeout(obj) 方法可以用于停止启动定时器，obj：启动的定时器对象。
    如：
function func() {
	alert("hello");
}
window.setTimeout(func(), 3000);
DOM

document对象–就是HTML文档。
每个载入浏览器的 HTML 文档都会成为 document 对象document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问，它也是window对象的一部分，可通过window.document属性对其进行访问。

DOM–访问所有的HTML元素的API。
DOM （Document Object Model），文档对象模型，用于处理文档中的内容。当网页被加载时，浏览器会创建页面的文档对象模型，HTML 文档中的所有节点组成了一个文档树（或节点树），而document 对象是一棵文档树的根。元素就是树的节点。
web前端知识（三）

节点：

  • 整个文档是一个文档节点
  • 每个 HTML 标签是一个元素节点(element node)
  • 包含在 HTML 元素中的文本是文本节点 (text node)
  • 每一个 HTML 属性是一个属性节点(atribute node)
  • 注释属于注释节点

nodeName 属性：
规定节点的名称，为只读属性。其中：

  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document
    注意：nodeName 始终包含 HTML 元素的大写字母标签名。比如： 节点的 nodeName 属性返回的字符串为 “INPUT”。

nodeType属性：
返回节点的类型，为只读属性。不同类型的节点的 nodeType 属性的返回值如下所示：
元素：1， 属性：2；文本：3； 注释：8；文档：9。

nodeValue属性：用于获取节点的值，其中：
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

元素节点的内容
获取元素内容的最简单方法是使用innerHTML属性，该属性用于设置或获取位于对象起始和结束标签内的 HTML 文本，适用于任意 HTML 元素，包括<html> 和 <body>。innerText 属性用于设置或获取位于对象起始和结束标签内的文本。
注：innerText只获取标签中的纯文本，而innerHTML 包含标签中的纯文本以及 HTML 文本标记。

节点属性：

  • getAttribute() 方法：根据属性名称获取属性的值，node.getAttribute(“href”)；获取nodej节点中的href属性的值。
  • setAttribute() 方法: 设置节点属性的值。
  • removeAttribute() 方法：删除节点的某个属性。

设置元素节点的样式 ：
1、style属性，是元素的通用属性，可以通过它来设置元素的属性。但是style 属性并非单一值，而是多个具体属性的集合，因此，需要使用具体的样式属性来进行样式设置。
如：

node.style.color //可以设置节点的字体颜色
node.style.fontSize //可以设置节点的字体大小
node.style.backgroundColor //用于设置节点的背景颜色
node.style.width ='300px' //用于设置节点的宽度
node.style.height ='200px' //用于设置节点的高度
node.style.display='none'  //用于设置节点隐藏
node.style.display='block'  // 用于设置节点显示成块
node.style.background="url('image/red.png')"; //是在背景图片

2、className属性：使用 style 属性设置元素的样式，只能一一的进行设置，过于麻烦。如果需要设置复杂的样式，可以先在 CSS 中定义样式类，再使用 className 属性来设置元素使用所定义的样式类，从而很方便的修改样式。使用className = “样式类名称”,从而定义样式。

查询节点：
常用的查询元素节点的方式有：

  • 通过id查询：getElementById()方法;通过指定的id返回元素节点，忽略文档结构;可以查找整个HTML的任何HTML元素;如果id值错误或未查询到，则返回null.

  • 通过层次（节点关系）查询：1、parentNode:返回元素的父节点。2、firstChild：返回元素的首个子节点，3、lastChild：返回元素的最后一个子节点，4、previousSibling ：返回位于相同节点树层级的前一个节点;5、nextSibling：返回位于相同节点树层级的下一个节点。6、childNodes：返回元素所有子节点组成的数组。这些都是属性方式，而且返回的都是节点对象（单个或者多个）。即对某节点调用上述属性，就可以得到相应层次关系的节点。需要注意的是，HTML 文档中的空白节点也是节点（不忽略文档结构）。

  • 通过标签名称查询：getElementsByTagName()方法用于根据指定的标签名称返回所有的元素节点，该方法会忽略文档的结构，即查找整个 HTML 文档中的所有元素。传入的标签名称错误，则返回长度为 0 的节点列表。getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。如果把特殊字符串 “*” 传递给getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
    提示：传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

  • 通过name属性查询：getElementsByName()方法 可返回带有指定名称的对象的集合该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

增加节点：
document.createElement()方法用于创建新的元素节点，只需要将需要创建的元素节点的名称作为参数传入即可。该方法返回新创建的元素节点，可以对新节点设置信息后，再加入到 DOM 文档中。

// 新节点
var newNode = document.createElement("input");
//设置节点属性
newNode.type = "text";
newNode.value = "marry";
newNode.style.color = "red";

创建新节点
创建完新节点后，需要将新节点加入到节点树上。新节点必须作为节点树上某个已有节点的子节点存在，因此，可以使用方法 parentNode.appendChild(newNode)来实现。该方法实现追加的功能。
appendChild() 方法只能将新节点作为某节点的最后一个子节点，如果希望实现有位置选择性的添加，可以使用下面的方法：parentNode.insertBefore(newNode,refNode);其中，第一个参数表示需要加入的新节点，第二个参数refNode 为参考节点，新节点将位于此节点之前。需要注意的是，refNode 必须也是 parentNode 的子节点。该方法的效果如图所示：
web前端知识（三）

删除节点
如果需要删除某个节点，则需要对其父类调用removeChild方法，如果需要删除某节点，则需要对其父节点调用 removeChild 方法，语法如下所示node.removeChild(childNode)
注意：，使用上述代码时，childNode 必须是 node 节点的子节点，否则会产生异常。因此，删除某个子节点时，常使用如下方式：childNode.parentNode.removeChild(childNode)
删除节点的操作如图所示：
web前端知识（三）

HTTP DOM 对象

HTML DOM 定义了用于HTML一系列标准的对象，以及访问和处理HTML文档的标准方法，它将HTML标签对象化，即将网页中的每一个元素都看作一个对象，然后用访问对象的属性和方法的方式来操作元素，常用HTMLDOM对象如同所示：web前端知识（三）

标准DOM和HTML DOM：
标准 DOM提供了统一的操作接口

  • createElement
  • appendChild
  • setAttribute
  • removeAttribute
  • nodeName

HTML DOM提供了封装好的各种对象

  • Image
  • Select
  • Option

区别：
为了更好的理解二者的区别，先查看如下代码：
标准 DOM 的实现方式：

var newNode = document.createElement("img");
newNode.setAttribute("src","a.jpg");

HTML DOM 的实现方式

var newNode = new Image();
newNode.src = "a.jpg";

在实际使用中，经常是两种方式结合使用。

  • 1、操作节点时，往往使用标准 DOM 操作。创建节点：使用createElement方法。HTML DOM 并没有提供所有元素的构造函数，因此，创建节点时，统一使用createElement 方法即可。删除和查找节点：使用标准 DOM 操作。
  • 2 、操作属性时，往往使用 HTML DOM 操作。在操作属性时，也可以使用标准DOM操作来实现，即使用方法setAttribute或者 getAttribute。但是这种方式比较麻烦，因此，往往使用HTML DOM操作。需要注意的是，如果需要删除某属性，只能使用标准 DOM 操作所提供的 removeAttribute方法，HTML DOM没有提供相关功能。

其实：HTML DOM对标准HTML元素对象封装（属性，方法）无法实现所有功能，优点是对常用元素对象进行简化操作，局限不是所有元素都支持，但标准DOM无所不能

事件：
事件指HTML对象在状态改变、操作鼠标或键盘时触发的动作。
三类事件：

  • 鼠标事件：如 onclick单击、ondblclick双击、onmouseover鼠标划入、onmouseout鼠标移除等
  • 键盘事件：如 onkeydown回车按下、onkeyup弹起等；
  • 状态改变事件：如 onblur 失去焦点、onfocus 获取焦点、onload加载完成、onchange状态改变等
    event 对象：事件触发后会产生一个event对象。该对象用于记载事件相关的所有信息，如引发事件的节点对象、位置等信息。
    web前端知识（三）

事件冒泡：
冒泡型事件指的是事件按照从最特定的事件目标到最不特定事件目标顺序逐一触发，如果p标签、div标签、body标签都添加了onclick事件，触发了add()函数，单击鼠标时触发了事件，会发现3个onclick函数都触发了，触发的顺序是p标签、div标签、最后的body标签。冒泡型事件像冒泡一样从DOM层次结构的最低端往上一级级上升，p-div-body-document。
取消事件冒泡（事件的捕获）：

  1. 在js代码相应的方法中，使用传过来event(e.cancelBubble = true)；
    2.<input "event.cancelBubble = true;alert('我是input')" />
    为了解决兼容性问题，找到引发该事件的罪魁祸首（事件源–引发事件触发的节点），可以通过以下代码找出:
<div  onclick="f1(event)">
JS代码：function f1(e){
	var  obj = e.srcElement||e.target;//ie||火狐
	//其他代码......
}
JS其他对像

Table 对象代表一个HTML表格，在HTML文档中，

标签每出现一次，一个Table对象就会被创建。
常用属性有：
cells：返回包含表格中所有单元格的一个数组；
rows：返回包含表格中所有行的一个数组。
常用方法：
deleteRow(index)：从表格删除一行–返回 TableRow对象；table.deleteRow(table.rows.length-1) 删除最后一行。
insertRow(index)：在表格中插入一个新行–返回 TableRow对象
–如果index=-1，则表示在最后追加一行

TableRow对象代表一个HTML表格行，在HTML文档中，标签每出现一次，一个 TableRow 对象就会被创建。
TableRow 对象的常用属性有：
cells[]：返回包含行中所有单元格的一个数组；
innerHTML：设置或返回行的开始标签和结束标签之间的 HTML；
rowIndex：返回该行在表中的位置。
TableRow 对象的常用方法有：
insertCell(index)：返回 TableCell 对象；
deleteCell(index)：删除行中的指定的单元格

TableCell对象代表一个HTML表格单元格。在一个 HTML文档中 标签每出现一次，一个 TableCell 对象就会被创建。
TableCell对象的常用属性有：
cellIndex： 返回单元格在某行的单元格集合的位置
innerHTML：设置或返回单元格的开始标签和结束标签之间的 HTML。

相关推荐