web前端(4)：熟悉JavaScript和常见案例(函数+对象+常用事件+js操作元素)

一、js中的函数 1.函数的定义

• 功能：一段特定功能的代码块
• 定义方式：函数定义使用关键字 function

2.函数的种类 2.1.命名函数

函数声明必须始终带有一个标识符，也就是我们所说的函数名，而函数表达式则可以省略。 函数声明会给函数指定一个名字，会在代码执行以前被加载到作用域中，所以调用函数在函数声明之前或之后都是可以的：

function func1(){
    console.log('我是一个函数');

    return '我是函数的返回值，如果没有返回值，我会返回undefined';
}

func1();

b=func1();
console.log(b);

2.2.函数表达式

函数表达式，创建一个匿名函数，然后将这个匿名函数赋给一个变量，在代码执行到函数表达式的时候才会有定义，所以调用函数在函数表达式之后才能正确运行，否则是会报错的

var func2=function(){
    console.log('我是匿名函数')
}

func2();

2.3.自执行函数

不需要启动，自己会运行的函数。格式众多

①匿名函数前面加上一元操作符，后面加上 ()

!function () {
    console.log("自执行函数")
}();

-function () {
     console.log("自执行函数")
}();

+function () {
      console.log("自执行函数")
}();

~function () {
     console.log("自执行函数")
}();

②匿名函数后面加上 ()，然后再用 () 将整个括起来：

(function () {
    console.log("I AM IIFE")
}());

③先用 () 将匿名函数括起来，再在后面加上 ()：

(function () {
    console.log("I AM IIFE")
})();

④使用箭头函数表达式，先用 () 将箭头函数表达式括起来，再在后面加上 ()：

(() => {
  console.log("I AM IIFE")
})()

⑤匿名函数前面加上 void 关键字，后面加上 ()， void 指定要计算或运行一个表达式，但是不返回值：

void function () {
    console.log("I AM IIFE")
}();

⑥有的时候，我们还有可能见到立即执行函数前面后分号的情况，例如：

;(function () {
    console.log("I AM IIFE")
}())

;!function () {
    console.log("I AM IIFE")
}()

这是因为立即执行函数通常作为一个单独模块使用一般是没有问题的，但是还是建议在立即执行函数前面或者后面加上分号，这样可以有效地与前面或者后面的代码进行隔离，否则可能出现意想不到的错误。

将参数放在末尾的 () 里即可实现参数传递

var text = "I AM IIFE";
var dict = {name: "Bob", age: "20"};
var list = [1, 2, 3, 4];

(function (param) {
    console.log(param)
})(text);


(function () {
    console.log(dict.name);
})(dict);


(function () {
    var sum = 0;
    for (var i = 0; i 1
	2
	
	//----------------------获取元素------------------------------
	//1.通过id获取元素对象，返回元素对象，多个id同名会只获取第一个，每天返回null
		var oDiv=document.getElementById('box');//获取元素
		console.log(oDiv,typeof(oDiv));

	//2.通过标签名获取元素，反回类数组对象(因为可能有多个标签名)
		var oDivs=document.getElementsByTagName('div');
		console.log(oDivs,typeof(oDivs));

	//3.通过类名获取元素,返回类数组对象(因为可能有多个类名)
		var oDivcs=document.getElementsByClassName('item1');
		console.log(oDivcs,typeof(oDivcs));


	//--------------------设置元素的样式-------------------
		//设置js设置的都是行间样式
		oDiv.style.width='200px';
		oDiv.style.height='200px';
		oDiv.style.backgroundColor='red';//中划线要去掉换为小驼峰

		//注意通过标签或类名获取的需要先遍历获取某个元素，再设置样式
		for(var i =0;iDOCTYPE html>


	
	js获取元素的增删改
	
		#Div{
			width: 200px;
			height: 200px;
			background: green;
		}
	


	
	
	哈哈哈哈哈哈哈哈
	
	//-----getAttribute(),setAttribute(),removeAttribute()
	//-------------------操作图片-----------------------------
		var Img=document.getElementById('img');
		console.log(Img);
	//获取src属性
		console.log(Img.getAttribute('src'));
		//src本身就是img的默认属性
		console.log(Img.src);

	//设置属性,修改属性
		Img.setAttribute('data','电视');
		Img.name='xixi';

	//删除属性
		Img.removeAttribute('data');


	//---------------------操作表单值----------------------
		 var Tex=document.getElementById('tex');
		 console.log(Tex.value);
		 Tex.value='456';
		 console.log(Tex.value);

	 //----------------文本值的操作--------------------
	 	var oDiv=document.getElementById('Div');
	 	console.log(oDiv.innerHTML);//会连标签一起获取
	 	console.log(oDiv.innerText);//值获取纯文本

	 	//设置文本内容
	 	//修改的时候会覆盖原先内容，但是还能加入标签并且解析
	 	oDiv.innerHTML='切断了所有退路';
	 	//修改的时候会覆盖原先内容，不能解析标签
	 	// oDiv.innerText='我的心情已落幕';
	
	

DOCTYPE html>


	
	常用的事件
	
		#box{
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
	


	点击触发变色，移入移出触发提醒，键盘按下抬起触发提醒
	
		客户名：
		
			小张
			小李
			小王
		
		
	
	
		var oDiv=document.getElementById('box');
		//绑定鼠标单击事件
		var flag=1;
		oDiv.onclick=function(){
			if(flag==1){
			//改变背景颜色
			oDiv.style.background='red';
			flag=0
			}else{
				oDiv.style.background='white';
				flag=1;
			}
		}
	//鼠标事件
		//绑定鼠标移入事件
		oDiv.onmouseover=function(){
			console.log('我进来了');
		}
		//绑定鼠标移出事件
		oDiv.onmouseout=function(){
			console.log('我出来了');
		}
		//绑定鼠标移动事件
		oDiv.onmousemove=function(){
			console.log('我移动了');
		}

	//键盘事件
		//键盘按下事件
		window.onkeydown=function(){
			console.log('按下键盘了');
		}
		//键盘抬起事件
		window.onkeyup=function(){
			console.log('抬起键盘了');
		}


	//表单事件
		var Form=document.getElementById('form');
		//获取焦点
		Form.username.onfocus=function(){
			console.log('你得到我了');
		}
		//失去焦点
		Form.username.onblur=function(){
			console.log('掏完钱再走');
		}

		//onchange 当value值发生变化时候触发
		Form.sel.onchange=function(){
			console.log('选我啊');
			//获取当前选中的value值,谁触发的事件，this就代表哪个元素对象
			console.log(this.value);
		}

		//提交事件，一般绑定给form元素，当单击提交按钮时候则触发
		Form.onsubmit=function(){
			alert(Form.sel.value+':靓仔还没给钱');
		}
	

五、定时器

定时器一般用来完成动画效果 定时器不会阻塞程序执行，并行执行的

DOCTYPE html>


	
	定时器


	
	
	
		//1.单次定时器setTimeout(回调函数，等待时间值毫秒），
		//有返回值，返回定时器的标符
		//-----------启动一个单次定时器
		var a=1
		var b=setTimeout(function(){
			console.log('我是单次定时器',a)
		},3000)
		console.log(a,'我是a');
		
		//------------清除单次定时器
		console.log(b,'我是单次定时器的标符');
		clearTimeout(b);
//-----------------------------------------------------------------------------------

		//2.多次定时器/循环定时器setInterval(回调函数,间隔时间毫秒)
		//有返回值，返回定时器的标符
		var a=1;
		c=setInterval(function(){
			a++;
			console.log('我是多次定时器',a)
		},3000)
		console.log(a);
		//-----------清除多次定时器
		// 配合单次定时器使用 让多次定时器执行3次后清除
		setTimeout(function(){
			// 清除多次定时器
			clearInterval(c);
		},9001)