JavaScript总结

最新推荐文章于 2024-09-14 18:52:56 发布

丶笑看退场

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量421

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/Lebron_xia/article/details/78693062

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 什么是JavaScript

JavaScript是被设计用来向HTML页面添加交互行为
JavaScript是一种脚本语言
JavaScript由数行可执行计算机代码组成
JvaScript通常被直接嵌入HTML页面
JavaScript是一种解释性语言
所有的人无需购买许可证均可使用JavaScript

1.1 JavaScript的变量

统一使用var定义

Array对象
数组的特点：长度可变！数组的长度=最大角标+1
Boolean对象
如果value 不写，那么默认创建的结果为false

1.2 JavaScript数据类型

原始数据类型有：string/number/boolean/null/undefined
引用数据类型：Array/Boolean/Date/Math/Number/String/ReqExp

注意：JavaScript并不区分浮点数和整数，都是用number来表示。
###1.3 获取元素内容
获取元素：

 document.getElementById(“id名称”);

获取元素里面的值

 document.getElementById(“id名称”).value;

1.4 JavaScript 语句

// 构造函数
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];

}
// 原型
Person.prototype = {
    constructor: Person,
    sayName: function() {
        return this.name;
    }
}
// 实例化
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

person1.friends.push("Van");
alert(person1.friends);                     //输出"Shelby,Count,Van"
alert(person2.friends);                     //输出"Shelby,Count"
alert(person1.friends === person2.friends);     //输出false
alert(person1.sayName === person2.sayName);        //输出true

###1.5 JavaScript事件
这里写图片描述

onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress：搜索引擎使用较多
onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove：购物网站商品详情页。
onsubmit：表单提交事件，有返回值，控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件(二级联动)

1.6 JavaScript的引入方式

内部引入方式
直接将javascript代码写到
外部引入方式
需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script标签的src属性引入该外部的js文件

2. JS Window

2.1 Window对象的方法

这里写图片描述

setInterval():它有一个返回值，主要是提供给clearInterval使用。
setTimeout():它有一个返回值，主要是提供给clearTimeout使用。
clearInterval():该方法只能清除由setInterval设置的定时操作
clearTimeout():该方法只能清除由setTimeout设置的定时操作

2.1.1 使用JS完成页面定时弹出广告的代码

<script type="text/javascript">
	var time;
	function init(){
		//设置显示图片的定时操作
		time = setInterval("showAd()",3000);
	}
	
	//显示图片的函数
	function showAd(){
		//获取广告图片的
		var imgEl = document.getElementById("img1");
		//设置图片的属性(display)让其显示
		imgEl.style.display="block";
		
		//清除显示图片的定时操作
		clearInterval(time);
		
		//设置隐藏广告图片的定时操作
		time = setInterval("hiddenAd()",3000);
	}
	
	//书写隐藏广告图片的函数
	function hiddenAd(){
		//获取广告图片并设置隐藏的属性

2.2 Location对象

Location 对象包含有关当前 URL 的信息。
这里写图片描述
href:该属性可以完成通过JS代码控制页面的跳转。

<html>
	<head>
		<meta charset="UTF-8">
		<title>location对象</title>
		<script>
			function tiao(){
				window.location.href="http://www.itcast.cn";
			}
		</script>
	</head>
	<body>
		<a href="#" onclick="tiao()">跳转到传智播客首页</a>
	</body>
</html>

2.3 History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。
Alt text
History页面代码：

<input type="button"  value="返回上一个页面" onclick="javascript:history.back()"/>

go(参数)
参数：-1 返回上一个历史记录页面；-2返回上上一个历史记录页面，1进入下一个历史记录页面。

3. DOM对象

3.1 DOM介绍

Alt text

Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.

3.2 Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。
Alt text

创建文本节点：document.createTextNode()
创建元素节点：document.createElement()

3.3 Element对象

我们所认知的html页面中所有的标签都是element元素

//向元素添加新的子节点，作为最后一个子节点。
element.appendChild()
//返回元素的首个子节点。
element.firstChild
//返回元素节点的指定属性值。
element.getAttribute()
//设置或返回元素的内容。
element.innerHTML
//在指定的已有的子节点之前插入新节点。
element.insertBefore()
//返回元素的最后一个子元素。
element.lastChild
//把指定属性设置或更改为指定值。
element.setAttribute()
//从元素中移除子节点。
element.removeChild()
//替换元素中的子节点。
element.replaceChild()

3.4 Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute
Alt text

3.5 Demo

//我们希望点击一个按钮实现动态添加城市。
<script>
	window.onload = function(){
		document.getElementById("btn").onclick = function(){
			//1.获取ul元素节点
			var ulEle = document.getElementById("ul1");
			//2.创建城市文本节点
			var textNode = document.createTextNode("深圳");//深圳
			//3.创建li元素节点
			var liEle = document.createElement("li");//<li></li>
			//4.将城市文本节点添加到li元素节点中去
			liEle.appendChild(textNode);//<li>深圳</li>
			//5.将li添加到ul中去
			ulEle.appendChild(liEle);
		}
	}
</script>		

<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
	<li>北京</li>
	<li>上海</li>
	<li>广州</li>
</ul>