Web前端开发（五）--js函数，对象，元素操作，属性操作，事件

一、补充 visibility

display:none;和visibility:hidden;的区别

两者都是隐藏

使用display:none;隐藏后，不再占据位置

使用visibility:hidden;隐藏后，还会继续占据位置

二、函数的定义方式

函数：一段特定功能，可重复利用的代码段，就是函数。

函数使用function关键字进行定义。

函数返回值

!!!注意：无返回值的函数，返回值为undefined

函数的几种形式

命名函数

格式：function 函数名(){}

这种定义函数的方式，任何位置都可以调用。
匿名函数

格式：var 变量名=function(){}

一般在表达式中去定义或者用于事件当中或者用做回调函数。

只能在函数定义之后调用。
自运行函数

格式：(function(){})()

自己调用自己，不需要手动调用。

三、函数的参数

1.实参比形参多，多余的实参会被自动忽略。

2.实参比新参少，参数值自动赋值为undefined。

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

变量作用域

全局变量

在函数外部定义的变量和在函数内部不使用var定义的变量是全局变量。

在定义完成的任何位置都可以使用。

局部变量

在函数内部使用var定义的变量。

只能在当前函数内部使用。

四、对象的操作

对象的定义方式

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

格式：var 对象名=new Object();    //创建一个空对象

直接定义

格式：var 对象名={key:val,key:function};

使用构造函数创建对象

//创建构造函数

function fun(msg1,msg2){

this.name=msg1;

this.age=msg2;

this.函数名=function(){};

}

//实例化

var 对象名=new fun(参数1,参数2);

操作对象

添加属性

如果属性不存在，添加；如果属性存在，即相当于修改。

对象名.属性名='';

修改属性

删除属性

delete 对象名.属性名;

查看属性值

对象名.属性名

调用对象的方法

对象名.方法名();

[]到底在什么时候使用的问题

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

for(i in obj){
            console.log(obj[i]);
}

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

格式：

var obj={key:val};

var key='属性名';

obj[key]=val;

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

格式：

var obj={};

obj['name']='值';

五、元素操作

如何操作html：

在css中：如果要设置元素的样式，需要通过选择器获取元素。

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

如何获取元素对象

通过id获取元素对象

通过标签名获取元素对象

通过类名获取元素对象

如何设置元素样式

!!!注意：通过js设置的样式，都是行间样式。

!!!注意：双拼词，如background-color，需要将-去掉，采用驼峰命名，backgroundColor

通过id获取的元素对象

可直接操作。

通过标签名和类名获取的元素对象

不可直接操作，必须要进行遍历。

	
	


	
1
	
2

	

六、

属性操作

getAttribute()--获取

setAttribute()--设置

removeAttribute()--删除

表单值操作

value属性

文本值操作

innerHTML

innerText

	
	


	
	
	

		
就这样被你征服
	
	

七、常用的事件

鼠标事件

鼠标单击事件 onclick

鼠标移入事件 onmouseover

鼠标移出事件 onmouseout

鼠标移动事件 onmousemove

鼠标按下事件 onmousedown

鼠标抬起事件 onmouseup

键盘事件

键盘按下事件 onkeydown

键盘抬起事件 onkeyup

表单事件

获取焦点 onfocus

失去焦点 onblur

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

提交事件 onsubmit

	
	
	


	

	

		用户名：
		
			北京
			天津
			河北
		
		提交