本文深入讲解前端JavaScript基础知识，包括CSS属性display与visibility的区别，函数定义与调用，参数处理，对象操作，DOM元素操作，事件处理等核心内容，是前端开发者入门及进阶的必备指南。
一、补充 visibility
display:none;和visibility:hidden;的区别
两者都是隐藏
使用display:none;隐藏后，不再占据位置
使用visibility:hidden;隐藏后，还会继续占据位置
二、函数的定义方式
函数：一段特定功能，可重复利用的代码段，就是函数。
函数使用function关键字进行定义。
<script type="text/javascript">
func();
function func(){
console.log('我是一个函数');
}
//调用函数
func();
</script>
函数返回值
!!!注意：无返回值的函数，返回值为undefined
函数的几种形式
命名函数
格式：function 函数名(){}
这种定义函数的方式，任何位置都可以调用。
匿名函数
格式：var 变量名=function(){}
一般在表达式中去定义或者用于事件当中或者用做回调函数。
只能在函数定义之后调用。
自运行函数
格式：(function(){})()
自己调用自己，不需要手动调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
func();
function func(){
console.log('我是一个函数');
}
//调用函数
func();
//命名函数
function sum(){
var res=1+1;
return res;
}
console.log(sum());
console.log(func()); //undefined
//匿名函数
var func1=function(){
console.log('我是匿名函数');
};
console.log(func1);
func1();
//自运行函数
(function(){
console.log('我是自运行函数');
})();
</script>
</body>
</html>
三、函数的参数
1.实参比形参多，多余的实参会被自动忽略。
2.实参比新参少，参数值自动赋值为undefined。
在函数内部可以使用arguments，获取到所有的实参，它是一个类数组对象。
变量作用域
全局变量
在函数外部定义的变量和在函数内部不使用var定义的变量是全局变量。
在定义完成的任何位置都可以使用。
局部变量
在函数内部使用var定义的变量。
只能在当前函数内部使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的参数</title>
</head>
<body>
<script type="text/javascript">
function func(msg1,msg2){
console.log(msg1,msg2);
//获取全部实参
console.log(arguments);
for(i in arguments){
console.log(arguments[i]);
}
console.log(arguments instanceof Array); //false
console.log(arguments instanceof Object); //true
}
func('a','b');
function func1(msg1,msg2){
console.log(msg1,msg2);
}
//实参比形参少，未赋值参数会自动undefined
//实参比形参多，多余的实参会自动忽略
func1(1,2,3);
function func2(){
console.log('没有形参的参数');
}
func2(1,2,3);
var a='外部的a';
function func3(){
a+='我是拼接的内容';
var b='我是内部的b';
c='我是函数内部定义的全局变量';
console.log(a,b,c);
}
console.log(a);
// console.log(c); //报错，函数内部的全局变量，只能在函数调用之后使用
func3();
console.log(a);
console.log(c);
// console.log(b); //报错，函数外部不能访问函数内部的局部变量
</script>
</body>
</html>
四、对象的操作
对象的定义方式
使用系统提供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']='值';
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象</title>
</head>
<body>
<script type="text/javascript">
//1.使用系统提供Object()，实例化对象
var obj1=new Object();
//对象的操作
//添加成员属性和成员方法
obj1.name='欢欢';
obj1.say=function(){
console.log('我太难啦');
};
//修改name属性的值
obj1.name='刘欢';
//删除属性
delete obj1.name;
console.log(obj1);
//2.直接定义
var obj2={
name:'萌萌',
say:function(){
console.log('我太萌啦');
}
}
console.log(obj2);
//3.使用构造函数创建对象
function Student(name){
this.name=name;
this.say=function(){
console.log('我是一匹狼');
};
}
//实例化
var haha=new Student('二哈');
console.log(haha); //Student {name: "二哈", say: ƒ}
//this
//this代表当前对象
//js中最大的对象：window
//全局中的this指向的是window这个对象
console.log(this);
var obj3={name:'贵宾',age:3};
var key='gender';
obj3[key]='男';
console.log(obj3);
console.log(obj3[key]);
//添加一个成员属性'length'
obj3['length']='180cm';
console.log(obj3['length']);
for(i in obj3){
console.log(i);
console.log(obj3[i]);
}
</script>
</body>
</html>
五、元素操作
如何操作html：
在css中：如果要设置元素的样式，需要通过选择器获取元素。
在js中：如果要操作元素必须先获取元素对象。
如何获取元素对象
通过id获取元素对象
通过标签名获取元素对象
通过类名获取元素对象
如何设置元素样式
!!!注意：通过js设置的样式，都是行间样式。
!!!注意：双拼词，如background-color，需要将-去掉，采用驼峰命名，backgroundColor
通过id获取的元素对象
可直接操作。
通过标签名和类名获取的元素对象
不可直接操作，必须要进行遍历。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作元素</title>
</head>
<body>
<div id="box" class="item1">1</div>
<div class="item1">2</div>
<script type="text/javascript">
//js想要操作元素第一步就是要获取元素对象
//1.通过id获取元素对象
//返回元素对象
var oDiv=document.getElementById('box');
console.log(oDiv,typeof(oDiv)); //值就是该标签
//2.通过标签名获取元素对象
//返回一个类数组对象
var oDivs=document.getElementsByTagName('div');
console.log(oDivs);
//3.通过类名获取元素对象
//返回一个类数组对象
var oDivcs=document.getElementsByClassName('item1');
console.log(oDivcs);
//设置元素的样式
//通过js设置的样式，都是行间样式
//格式：元素对象.style.css属性='值';
//1.通过id获取的元素对象
//可直接操作
// oDiv.style.width='200px';
// oDiv.style.height='200px';
//注意：双拼词，需要将-去掉，采用驼峰命名
// oDiv.style.backgroundColor='blue';
//2.通过标签名或类名获取的元素对象
//不能直接使用，必须遍历，单独设置
for(var i=0;i<oDivs.length;i++){
oDivs[i].style.width='100px';
oDivs[i].style.height='100px';
oDivs[i].style.backgroundColor='red';
}
</script>
</body>
</html>
六、
属性操作
getAttribute()--获取
setAttribute()--设置
removeAttribute()--删除
表单值操作
value属性
文本值操作
innerHTML
innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img/tooopen_sy_148147934918.jpg" id="img">
<input type="text" value="123" id="inp">
<div id="Div">
<h1>就这样被你征服</h1>
</div>
<script type="text/javascript">
//属性操作
var Img=document.getElementById('img');
console.log(Img);
//获取src属性
console.log(Img.getAttribute('src'));
//src 本身就是img的默认属性，所以可以直接操作
console.log(Img.src);
//设置属性
Img.setAttribute('data','向日葵');
// Img.setAttribute('src','../day01/img/0.jpg');
Img.src='../day01/img/0.jpg';
//删除属性
Img.removeAttribute('data');
//表单值操作 value
var Inp=document.getElementById('inp');
console.log(Inp.value)
Inp.value='456';
//文本值的操作
var oDiv=document.getElementById('Div');
//获取文本
//innerHTML会连标签一起获取
//innerText获取纯文本
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
//设置文本内容
//innerHTML会解析标签
//innerText不会解析标签
// oDiv.innerHTML='<h1>切断了所有退路</h1>';
oDiv.innerText='<h1>我的心情已落幕</h1>';
</script>
</body>
</html>
七、常用的事件
鼠标事件
鼠标单击事件 onclick
鼠标移入事件 onmouseover
鼠标移出事件 onmouseout
鼠标移动事件 onmousemove
鼠标按下事件 onmousedown
鼠标抬起事件 onmouseup
键盘事件
键盘按下事件 onkeydown
键盘抬起事件 onkeyup
表单事件
获取焦点 onfocus
失去焦点 onblur
当value值发生变化时触发的事件 onchange
提交事件 onsubmit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用事件</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="box"></div>
<form action="" id="form">
用户名：<input type="text" name="username">
<select name="sel">
<option value="0">北京</option>
<option value="1">天津</option>
<option value="2">河北</option>
</select>
<button>提交</button>
</form>
<script type="text/javascript">
//鼠标事件
var oDiv=document.getElementById('box');
//绑定鼠标单击
var flag=1;
oDiv.onclick=function(){
if(flag==1){
//改变背景颜色
oDiv.style.backgroundColor='red';
flag=0;
}else{
oDiv.style.backgroundColor='#fff';
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值发生变化时触发
//对于一般的输入框只有失去焦点是才会触发change事件
//一般配合下拉选框去使用
Form.sel.onchange=function(){
console.log('选我');
//获取当前选定的value值
//这里this-谁触发的事件，它就代表哪个元素对象
console.log(this.value);
}
//提交事件 一般绑定给form元素 当单击提交按钮时触发
Form.onsubmit=function(){
alert('提交');
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
