JavaScript中函数 对象 元素操作 元素属性的操作 表单值的操作 常用的事件 this关键字

一.函数

---

1.定义

一段特定功能的代码段 就是函数

---

2.函数的定义方式

使用 关键字function

---

3.函数的格式及调用

	   function func(){
    			console.log('我是一个函数');
    		}
    		// 调用函数
    		 func();

---

4.函数的三种形式

1.命名函数
格式如上
Function 函数名(){}
这种定函数的方式，任何位置都可以调用

2.匿名函数
一般在表达式中去定义 或者用于事件当中 或者使用做回调函数

匿名函数只能在函数定义之后调用

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

3.自运行函数

	(function(){
				console.log('我是自运行函数');
			})()

---

5.函数的返回值

在函数的内部使用return 关键在来返回内容

	function sum(){
				var res = 1+1;
				console.log(res);
				return res;
			}
			var total = sum();
			console.log(total);

---

6.函数的参数

1.定义了形参 传多个实参 多余的实参会自动忽略

2.定义了形参，不传实参 不会报错 形参的值undefined

在函数内部可以使用arguments 获取到所有的实参 是一个类数组对象

function func(msg1,msg2){
		console.log(msg1,msg2);
		// 获取所有的实参
		console.log(arguments);
		for(i in arguments){
			console.log(arguments[i])
			console.log(arguments instanceof Array);
		}
	}

---

7.变量的作用域

1.全局变量：
在函数外部定义的变量 和 在函数内部不使用var定义的变量是全局变量 在任意位置都可以使用

2.局部变量：
在函数内部使用var定义的变量是局部变量 只能在当前函数内部使用

var a = '外部的a';
		function func3(){
			a+='我是拼接的内容';
			var b = '我是内部的b';
			c = '我是函数内部定义的全局变量';
			console.log(a,b,c);
		}
		console.log(a); // 外部的a
		// console.log(c); // 函数内部定义的全局变量 只能在函数调用后使用   此处会报错
		func3();
		// console.log(b); // 函数外部是不能访问函数内部的局部变量 此处会报错
		console.log(c);

二.对象

---

1.对象的三种定义方式

1.使用系统提供Object() 实例化对象

Var 对象名=new Object(); // 创建一个空对象

2.直接定义

Var 对象名 = {key:val,key:functuon}

3.使用构造函创建对象

// 创建构造函数
Function fun(msg1,msg2){
This.name=msg1;
This.name=msg2;
This.函数名=function(){}
}
// 实例化
Var 对象名 = new fun(参数1，参数2)

---

2.操作对象：

1.添加属性和修改属性：
如果属性已经存在做修改 不存在做添加

对象名.属性名 = ‘’

2.删除属性

Delete 对象名.属性名

3.查看属性的值

对象名.属性名

4.调用对象的方法

对象名.方法名()

5.对象中[ ]得使用问题

for in在遍历对象时，打印属性时需要使用[ ]

For(i in obj){
Console.log(obj[i])
}  

当属性名被存到变量中的时候 我们需要使用[ ]

Var obj = { }
Var key = ‘属性名’
Obj[key]= val

当属性名是字符串的时候 也需要使用[ ]

var obj3 = {name:'贵宾',age:3};
var key = 'gender';
obj3[key] = '男';

---

三.元素操作

---

Js主要的目的是用来操作html

如何操作？ html,css中如果要设置元素的样式需要通过选择器获取元素

在js当中如果你要操作元素必须先获取元素对象

---

获取元素的方式：

1.通过id获取元素对象

var oDiv = document.getElementById('box');
console.log(oDiv,typeof(oDiv));

直接返回元素对象 ，可以操作

设置元素样式： 元素对象.style.css属性=‘值’;

oDiv.style.width='200px';
oDiv.style.height='200px';
oDiv.style.backgroundColor='red';

注意双拼词        如background-color 需要将-线去掉 第二个单词首字母大写

---

2.通过标签名获取元素对象

var oDivs = document.getElementsByTagName('div');
console.log(oDivs,typeof(oDivs));

返回类数组对象,不能直接操作，必须遍历后才能操作

---

3.通过类名获取元素对象

var oDivcs = document.getElementsByClassName('item1');
console.log(oDivcs,typeof(oDivcs))

返回类数组对象,不能直接操作，必须遍历后才能操作

---

4.设置元素的样式

通过js设置的都是行间样式

通过标签或者类名获取的对象不能直接使用 必须遍历单独设置

for(var i = 0;i<oDivs.length;i++){
				console.log(oDivs[i]);
				oDivs[i].style.width="200px";
				oDivs[i].style.height="200px";
				oDivs[i].style.backgroundColor="green";
		}

四.元素属性的操作

---

1.获取属性 getAttribute()

1.第一步先获取对象

var Img = document.getElementById('img');

2.获取属性

console.log(Img.getAttribute('src'));

src 本身就是img的默认属性 所以可以直接操作

console.log(Img.src);

---

2.设置属性 setAttribute()

Img.setAttribute('data','凹凸曼');
Img.setAttribute('src','../day02css/img/1.jpg');
Img.src='../day02css/img/1.jpg';

---

3.删除属性 removeAttribute()

Img.removeAttribute('data');

---

四.表单值的操作

---

Value属性

var Inp = document.getElementById('inp');
	console.log(Inp.value);
	Inp.value='456';
	console.log(Inp.value);

五.文本值的操作

---

1.获取文本

var oDiv = document.getElementById('Div');

1.InnerHTML 会连标签一起获取

console.log(oDiv.innerHTML);

2.InnerText 获取纯文本

console.log(oDiv.innerText);

2.设置文本内容

1.innerHTML 会解析标签

2.innerText 不会解析标签

六.常用的事件

事件驱动语言

1.鼠标事件：

鼠标单击事件 onclick

oDiv.onclick=function(){
		if(flag==1){
			// 改变背景颜色;
			oDiv.style.backgroundColor='red';
			flag=0;
		}else{
			// 改变背景颜色;
			oDiv.style.backgroundColor='#fff';
			flag=1;
		}
		
	}

鼠标的移入： onmouseover

oDiv.onmouseover=function(){
			console.log('我进来了');
		}

鼠标的移出： onmouseout

oDiv.onmouseout=function(){
		console.log('我出来啦');
	}

鼠标移动： onmousemove

oDiv.onmousemove=function(){
		console.log('我动啦');
	}

鼠标按下： onmousedown
鼠标抬起： onmouseup

---

键盘事件：

键盘按下： onkeydown

window.onkeydown=function(){
		console.log('我按下了键盘');
	}

抬起： onkeyup

window.onkeyup=function(){
		console.log('我抬起啦');
	}

---

表单事件：

获取焦点 onfocus

Form.username.onfocus=function(){
			console.log('获取焦点');
		}

失去焦点 onblur

Form.username.onblur=function(){
			console.log('失去焦点');
		}

当value值发生改变时触发的事件 onchange

对于普通的输入框只有失去焦点时才会触发change事件，一般配合下拉框使用

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

提交事件： onsubmit

Form.onsubmit=function(){
				alert('提交');
			}

---

七.this关键字

在全局中this指向的是window对象

在事件绑定的函数中的this就是事件发生的时候触发事件的元素

函数执行的时候，函数中的this就是调用函数的主体，没有调用主体，那么this指向的是全局
（通俗来说：哪个对象调用了this this就指向这个对象）

---