JavaScript

Alan冲冲冲

于 2019-11-17 00:27:15 发布

阅读量443

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/Cxgoodjob/article/details/103075178

版权

1.JS代码的引用

1.1四种方式

方式一：
< script>< /script>标签包裹，可以放在任何位置，但是推荐放在 < head>< /head>里
方式二：
单独编写一个文件 (*.js) 来存放 Javascript 代码，然后在需要使用的 html 页面直接引入该 js 文件。好处：可以使 js 文件和 HTML 文件相分离、一个 js 文件可被多个 HTML 文件使用、维护起来也更方便等等。
方式三：
写在< a>标签的href属性里，但是要在前面加javascript:
方式四：
一些具备事件的属性后面直接加 js代码或者js函数的调用如onclick属性

Attention
方式一方式二不能共存如果共同出现在一个< script>标签里面则引用方式优先

2.JS代码中的变量

需注意的有：

变量没有初始化默认是undefined
var a;
console.log(a); //undefined
不事先用var声明则会报错
console.log(b); //报错

3.运算符

=，==， = = =
①=是赋值
②= =判断值是否相同如console.log(“18”==18); //true
③= = =先判断类型再判断值相同 console.log(“18”= = =18);//false
逻辑运算符
① 一切变量都是 boolean 类型 0 , null, NaN,undefined, false, " " (这6个是false),其余的全都是 true
② && 和 ||
&& 返回第一个false 否则的话返回最后一个值
|| 返回第一个 true 否则返回最后一个值
经典应用
function fun(x) {
x=x||0;
console.log(x);
} //如果x是非false变量则输出x；如果是false 的六个变量则赋值为0

4.函数

无返回值则返回 undefined
匿名函数不能单独写出来没意义会报错
function (x,y) {
return x+y;
} //会报错
通常会定义一个变量接受匿名函数，当成一个方法对象，调用的时候：变量名()
var fun=function (x,y) {
return x+y;
}
fun(); //调用
匿名函数的应用场景

//注意这里传入的callback 只是一个形式参数 后面callback()则是调用传入对象的方法
function fun3(callback) {
	if(callback) {
		callback();
	} else{
		console.log("没有函数传过来");
	}
}
fun3(
		function() {
			console.log("我是一个匿名函数");
		})

fun3();

传参规则：①实际参数少于形式参数，defined来凑
② 实际参数多于形式参数，多了不要
内置参数
arguments 的应用 (若干数求和)

function fun() {
//这里arguments是内置参数 ，不需要在形式参数里面定义  即可使用
	var sum=0;
	for(var i=0;i<arguments.length;i++) {
		sum+=arguments[i];
	}
	console.log(sum);
}

fun(1,2,3,4,5);  //15

5. 全局变量、局部变量

5.1声明提前

情形一：say范围内 var username; 提前

var username="zhangsan";

function say() {
	//相当于 var username;
	console.log(username);
	//相当于 username="lisi";
	var username ="lisi";
	console.log(username);
}
say();
//undefined 
//lisi
console.log(username);
//zhangsan

情形二：username 是全局变量 (和情形一作对比)

 var username="zhangsan";

function say() {
	console.log(username);
	username ="lisi";
	console.log(username);
}
say();
//zhangsan 
//lisi
console.log(username);
//lisi

5.2全局变量的特殊形式

在局部变量位置 (方法内) ，直接为变量名赋值，不加var声明,则是全局变量

function fun() {
var a=10;
b=20;  //b是全局变量 
}

6.全局函数

6.1parseInt()

如在 “随机出现一个字母” 的demo中使用

7. 面对对象

7.1构造函数

//1.定义构造函数
function Student(name,age) {
	this.name=name;
	this.age=age;
}
//2.创建对象,并赋予属性
var student=new Student("林泽",18);
console.log(student);
//3.获取对象的属性的两种方式(各自的优点)
console.log(student.name);
console.log(student["age"]);

//4.动态添加属性 
student.email="4525@qq.com";
console.log(student["email"]);
//5.原型
Student.prototype.set=function() {
	console.log("原型set");
}
var s1=new Student();
s1.set();

Attention

构造函数形式和函数类似，不过首字母通常大写
对象取得属性的两种方式：
①对象 . 属性名 ②对象[“属性名”]
方式二的两个优点：可以去到特殊的属性名如 “background-color” ; 同时也可以取一些关键字的属性名如 class
对象可以动态添加属性 (原本没有的可以直接添加，原本有的可以覆盖)
原型：直接为整个构造函数提供新的属性这样创造的每个对象都有这种属性
如 Student.prototype.set=function() { console.log(“原型set”); }

1.var b; (默认为undifined ,但是 var不能省略)
5. console.log(a,b) 输出 a b
6. augument是内置变量形式参数的()内不写也可以直接应用

8.参数传递

基本类型传递的是值的拷贝
引用类型传递的是地址值的拷贝

//1.基本类型传的是值 的拷贝

function f1(num) {
	console.log(num);
	num+=100;
	console.log(num);
}
var num1=100;
f1(num1);
console.log(num1);
//2.引用类型传的是内存地址值的拷贝
function Student (name,age) {
	this.name=name;
	this.age=age;
}

function f2(s) {
	console.log(s);
	s.name="改正的name";
	console.log(s);
}

var s=new Student("林泽",18);
f2(s);
console.log(s);

在这里插入图片描述

9.内置对象

9.1用类调用方法还是用对象调用方法

看API
如 String 对象有
创建对象调用
在这里插入图片描述
直接调用

9.2Array对象

9.2.1创建数组的四种方式

var arr1=new Array();
console.log(arr1);
console.log(arr1.length);

var arr2=new Array("哈哈","嘎嘎");
console.log(arr2);
console.log(arr2.length);

var arr3=["哇哇","呱呱"];
console.log(arr3);
console.log(arr3.length);

var arr4=new Array(4);
console.log(arr4);
console.log(arr4.length);

9.2.2数组的常用方法

concat(array1, array2, …, arrayX)：连接两个或更多的数组，并返回结果。
join(separator)：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
reverse()：颠倒数组中元素的顺序（该方法会改变原来的数组，而不会创建新的数组）。
slice(start[, end])：从某个已有的数组返回选定的元素（返回的是一个新数组）。 [slaɪs], 切片
pop()：删除并返回数组的最后一个元素。
shift()：删除并返回数组的第一个元素。
push(newelement1, newelement2, …, newelementX)：向数组的末尾添加一个或更多元素，并返回新的长度。
unshift(newelement1, newelement2, …, newelementX)：向数组的开头添加一个或更多元素，并返回新的长度。
splice(index, howmany, element1, …, elementX)：用于插入、删除或替换数组的元素。[splaɪs], 拼接

//定义一个方法 将指定数组的指定索引处的值改变为newnum 
function arrayFunction(arr,index,newnum) {
	 arr.splice(index,1,newnum);
	 return arr;
}

9.2.3遍历数组的三种方式和map

第一种
var arr=[“小明”,“小红”,“小刚”];
for(var i=0;i<arr.length;i++) {
console.log(arr[i]);
}
第二种
arr.forEach(function(item,index,array) {
console.log(index,"---->",item);
})
第三种(数组中 i是索引，对象中 i是属性名 )
for(var i in arr) {
console.log(arr[i]);
}
var object={“name”:“lisi”,“age”:13};
for(var i in object) {
console.log(i,"—>",object[i]);
}
map

var arr=["小明","小红","小刚"];
var newarr=arr.map(function(item,index,array) {
	return item+"很搞笑";
})
console.log(newarr);
//["小明很搞笑", "小红很搞笑", "小刚很搞笑"]

9.3Demo

9.3.1. 查看现在日期

 var d=new Date();
var date=d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
console.log(date);

9.3.2. 随机获得一个字母

var num=parseInt(Math.random()*26 +65);
//console.log(num);
console.log(String.fromCharCode(num));

9.3.3. BOM

window对象用来跳转

function fun1 () {
	window.location.href="http://www.baidu.com";
}

表格提交：

function fun2() {
	document.forms[0].submit();
}

加载完后表格自动提交

window.onload=function () {
	document.forms[0].submit();
}

Attention
① < a>标签中 href 后要加 JavaScript：
而 onclick 属性后直接跟 function()

9.3.4 消息框，确认框，输出框

window.alert弹出
window.confirm 确认框返回 true 或false 可以用加If判断
window.prompt 输出框返回的是输入的字符串
Attention

都是window 对象的方法 window可以省略

9.3.5 定时器

用到的window对象的方法
setTimeout (function,time) time时间后进行 function
setInterval(function,interval) 每隔interval 时间后进行一次 function
clearInterval(timer);取消 Interval定时器

<body>
<a href="javascript:fun1()">3秒跳转百度</a>
<a href="javascript:fun2()">5秒后爆炸</a>
<span id="span">5</span>
</body>

//1.定时跳转  setTimeOut
function fun1 () {
	window.setTimeout(function () {
		window.location.href="http://www.baidu.com";
	},3000)
}
//2. x秒后爆炸  setInterval
//cleatInterval
function fun2 () {
	var time=5;
	var timer=window.setInterval(function() {
		var span=document.getElementById("span");
		span.innerHTML=time;
		time--;
		if(time==0) {
			window.clearInterval(timer);
			console.log("bommmmmmm");
		}else {
			span.innerHTML=time;
		}
	},1000)
}

9.3.6 BOM获取对象

通过 id ClassName TagName
其中 classname 和 TagName 获得的是HTMLCollectoin 的伪数组不能forEach遍历只能通过 for循环遍历

9.3.7 获取节点Node对象

有这些常用属性：
由父节点：firstChild lastChild childNodes
由子节点： parentNode previousSibling nextSibling

9.3.8 Element属性操作

10.事件的绑定方式

方式一：标签内为 onclick属性赋值

<a href="#" onclick=fun1(this,event) id="btn1">点击1</a>

	//第一种绑定方式 
	function fun1(srcEle,event) {
		console.log(srcEle);
		console.log(event);
	}

Attention:
① 这里 event 和 this 是关键字和位置无关 (定义的functoin中可以是function(aaa,bbb) 而绑定中带入 οnclick=function(this,event) 依然表示的是本标签和事件对象
②这种方式只能绑定一个响应函数

方式二：为元素的事件属性赋值的方式元素 . 事件属性 =fun() { }

<a href="#" id="btn2">点击2</a>

window.onload=function() {
	//第二种绑定方式
	var btn2=document.getElementById("btn2");
	btn2.onclick=function(event) {
		console.log(event);
	}

Attention
①此时function（）里面不能加 this
②只能绑定一个响应函数

方式三：获取节点对象后，addEventListener(事件，方法)，attachEvent(“on”+事件名，方法)

var btn3=document.getElementById("btn3");
	btn3.addEventListener("click",function(event) {
		console.log(event);
		console.log("你点了我一次");
	})
	btn3.addEventListener("click",function() {
		console.log("你点了我两次");
	})

提取一个兼容的方法

function addFunc(srcEle,eventname,func) {if(srcEle.attachEvent) {
	//IE浏览器   这里ie的attachEvent方法 里要加on 
	srcEle.attachEvent("on"+eventname,func);
}else {
	//w3c
	srcEle.addEventListener(eventname,func);
}
}

window.onload=function() {
	var btn1=document.getElementById("btn1")
	addFunc(btn1,"click",function (event) {
		console.log(event);
		console.log("我是btn1");
	})}

Attention
①这种方法可以绑定多个响应函数
②(不可兼容 )w3c浏览器中有addEventListener方法，而IE浏览器中对应的方法是attachEvent 且对应的参数是 “on”+事件名称
③ 可以写一个兼容的addFunction方法，里面用if判断元素是否有对应的方法 (类似于 Nodelist.forEach 没有对应的方法则返回undefined,而并非是 Nodelist的属性) 所以在获取元素后由 if(srcEle . attachEvent) 来判断是否为 IE浏览器

.JS的Demo

10.1 CRUD

在这里插入图片描述
其中注意function2 原地克隆要原地克隆后把克隆体加过去(克隆体用span3接收) ，原地span2不变

function fun2() {
	var div2=document.getElementById("div2");
	var span2=document.getElementById("span2");
	var span3=span2.cloneNode(true);
	div2.appendChild(span3);
}

function3中注意如何创造有值的span并添加：document的createElement（）方法 (没有by) 并且为 span.innerHTML赋值

function fun3() {
	var span=document.createElement("span");
	span.innerHTML="span";
	var div3=document.getElementById("div3");
	div3.appendChild(span);
}

function4中用到插入的方法：父节点 . insertBefore(newNode,refNode);

function fun4() {
	var parent=document.getElementById("character");
	var option=document.createElement("option");
	option.innerHTML="诸葛亮";
	var guanyu=document.getElementById("item2");
	parent.insertBefore(option,guanyu);
}

function5用到 replaceChild(new,old) 方法

function fun5() {
	var guanyu=document.getElementById("item2");
	var weiyan=document.createElement("option");
	weiyan.innerHTML="魏延";
	var parent=document.getElementById("character");
	parent.replaceChild(weiyan,guanyu);
}