JS快速回顾

最新推荐文章于 2024-06-20 20:20:21 发布

九洲清晏

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量258

点赞数

分类专栏：前端学习笔记文章标签： js javascript html

本文链接：https://blog.csdn.net/JIUZHOUU/article/details/108755928

版权

前端学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.JavaScript简介

是属于网络的脚本语言，向HTML页面添加交互性，用来改进设计、验证表单、检测浏览器、创建Cookies。

2.JS使用

1. <script>标签：浏览器会解释并执行script标签中的JS。
2. JS函数与事件：把JS代码放入函数中，在事件发生时调用该函数。
3. <head><body>标签：通常把JS集中放在head标签中或页面底部的同一位置。
4. 外部的JS文件：以.js结尾，可以在<script>标签的src属性中设置该js文件：<script src="myScript.js"></script>。

3.JS输出

JS通常用于操作HTML元素。
（1）操作HTML元素：用document.getElementID从JS访问某个HTML元素。
document.getElementByID("demo").innerHTML = "My First JS";浏览器将访问id=“HTML”的元素并将它的内容替换。
（2）文档输出：document.write("<p>My First JS</p>")直接把p标签里的内容写到HTML文档输出流中，如果在文档已完成加载后执行则整个页面被覆盖。

4.JS变量

在JavaScript中创建变量通常为“声明”变量，使用var关键词来声明，该变量声明之后是空的（没有值）。
var carname; carname = "Volvo"
var carname = "Volvo"

5.JS数据类型

JavaScript有字符串、数字、数组、布尔、对象、null、undefined等数据类型。
1. 动态类型：相同的变量可用作不同的类型
2. 字符串：可以使用单引号或双引号
3. 数组：

var cars = new Array();
cars[0] = "Audi";
cars[1] = "BMW";
cars[2] = "Volvo";
// var cars = new Array("Audi","BMW","Volvo");
// var cars = ["Audi","BMW","Volvo"];

4. 对象：对象由花括号分隔，在括号内部，对象的属性以键值对的形势（name:value）来定义，属性由逗号分割；
var person = {firstname:"Bill",lastname:"Gates",id:5566};
person有三个属性：firstname，lastname和id
寻址方式：name = person.lastname;和name = person["lastname"];
5. 声明变量类型：用new来声明新变量类型
var carname = new String
var x = new Number

6.JS表单验证

JavaScript可用于在数据被送往服务器前对HTML表单中的这些输入数据进行验证。
1. JS表单验证
用户是否填写必填项目/用户输入的邮件地址是否合法/用户是否已输入合法日期/用户是否在数据域中输入了文本
2. 必填/必选项目
返回值是true时表示数据没有问题

function validate_required(field,alerttxt)
{
	with(field)
	{
		if(value == null||value == "")
			{alert(alertxt);return false;}
		else {return true;}
	}
}

7.JavaScript HTML DOM

1. DOM简介
1、HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），该模型会被构建成对象的树。
HTML DOM树通过可编程的对象模型，JavaScript可以创建动态的HTML，可以改变页面中所有的HTML元素、属性、CSS样式并对所有事件做出反应。
2、查找HTML元素
（1）通过id查找：var x = document,getElementByID("intro");如果找到该元素，则以对象在x中存在的形式返回该元素，否则返回NULL。
（2）通过标签名查找：查找intro中所有的<p>元素var y = x.getElementsByTagName("p");
（3）通过类名找到HTML元素
2. HTML DOM 改变HTML
（1）改变HTML输出流： document.write(Daye()); //直接向HTML输出流写内容 注意：不要在文档加载之后使用，这将覆盖文档。
（2）改变HTML内容：document.getElementById(id).innerHTML = new HTML;
（3）改变HTML属性：document.getElementById(id).attribute = new value;
3. JS HTML DOM 改变CSS
document.getElementById(id).style.property = new style
4. JS HTML DOM 事件
(1）对事件做出反应，在事件发生时执行代码 onclick = JavaScript 事件举例：用户单击鼠标时/网页已加载时/图像已加载时/鼠标移动时到元素上时/输入字段被改变/提交HTML表单时/当用户触发按键时。
(2)onload和onunload事件
在进入页面时触发onload事件，可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来正确加载网页；离开页面时触发onunload事件，两者都可用于处理Cookie。
5. JS HTML DOM 元素/结点
（1）创建新的HTML元素
首先必须创建该元素（元素结点），然后向一个已存在的元素追加该元素。
注：此处注释语法格式应为:<!- 注释的内容 ->

<div id-"div1">
	<p id="p1">这是一个段落</p>
	<p id="p2">这是另一个段落</p>
<div>
<script>
	var para = document.createElement("p");         //创建新的p元素
	var node = document.createTextNode("这是新段落");  //创建文本节点
	para.appendChild(node);                      //向p元素追加这个文本节点
	var element = document.getElementById("div1");
	element.appendChild(para);               //必须向一个已知元素追加这个新元素
<script>

（2）删除已有的HTML元素，必须先获得该元素的父元素。

<div id = "div1">                  //div元素有两个子节点为p元素
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另一个段落。</p>
</div>
<script>
	var parent = document.getElementById("div1");
	var child = document.getElementById("p1");
	parent.removeChild(child); //从父元素中删除子元素
</script>

九洲清晏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS快速回顾

1.JavaScript简介是属于网络的脚本语言，向HTML页面添加交互性，用来改进设计、验证表单、检测浏览器、创建Cookies。2.JS使用1. <script>标签：浏览器会解释并执行script标签中的JS。2. JS函数与事件：把JS代码放入函数中，在事件发生时调用该函数。3. <head><body>标签：通常把JS集中放在head标签中或页面底部的同一位置。4. 外部的JS文件：以.js结尾，可以在<script>标签的src属性中设
复制链接

扫一扫