1. 函数定义方式
使用function关键词定义
函数的调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
func();//执行前将程序扫描一遍,存储起来,所以调用位置可以在上面。
// 一段特定功能的代码段 就是函数
// 函数的定义方式 使用 关键字function
function func(){
console.log('我是一个函数');
}
// 调用函数
func();
//求和函数
function sum(){
var res=1+1;
console.log(res);
return res;
}
var total=sum();//2 这里只把返回值给了total
console.log(total);//2 所以这里只会输出一个2
console.log(sum())//这里就是俩个2
//匿名函数
//func1(); 匿名函数只能在函数定义之后调用。这里就出错了。
var func1=function(){
console.log('我是匿名函数');
}
console.log(func1);
func1();
//自运行函数
(function(){
console.log('我是自运行函数');
})()
</script>
</body>
</html>
2. 函数的返回值
在函数的内部使用return 关键在来返回内容
function sum(){
var res=1+1;
console.log(res);
return res;
}
var total=sum();//2 这里只把返回值给了total
console.log(total);//2 所以这里只会输出一个2
console.log(sum())//这里就是俩个2
注意:如果函数没有设置返回值,默认返回undefined
3. 函数的三种形式
命名函数:
function 函数名(){}
这种定函数的方式,任何位置都可以调用
匿名函数:
一般在表达式中去定义 或者用于事件当中 或者使用做回调函数
匿名函数只能在函数定义之后调用。
自运行函数:
4. 函数的参数
- 定义了形参 传多个实参 多余的实参会自动忽略
- 定义了形参,不传实参 不会报错 形参的值undefined
在函数内部可以使用arguments 获取到所有的实参 是一个类数组对象
作用域:
变量的作用域
全局变量: 在函数外部定义的变量 和 在函数内部不使用var定义的变量是全局变量 在任意位置都可以使用
局部变量: 在函数内部使用var定义的变量是局部变量 只能在当前函数内部使用
5. 对象的操作
对象的定义方式:
- 使用系统提供Object() 实例化对象
Var 对象名=new Object(); // 创建一个空对象 - 直接定义
Var 对象名 = {key:val,key:functuon} - 使用构造函创建对象
// 创建构造函数
function fun(msg1,msg2){
this.name=msg1;
this.name=msg2;
this.函数名=function(){}
}
// 实例化
var 对象名 = new fun(参数1,参数2)
this 哪个对象调用了this, 那么this就指向当前对象
js中最大的对象window
在全局中this指向的是window对象
<script>
function func(){
console.log(this);
}
window.func()//Window
</script>
操作对象:
添加属性: 如果属性已经存在做修改 不存在做添加
对象名.属性名 = ‘’
修改属性:
对象名.属性名 = ‘’
删除属性:
delete 对象名.属性名
查看属性的值
对象名.属性名
调用对象的方法
对象名.方法名()
【】问题:
1.for in在遍历对象时,打印属性时需要使用【】
For(i in obj){
Console.log(obj[i])
}
2.当属性名被存到变量中的时候 我们需要使用【】
Var obj = {}
Var key = ‘属性名’
Obj【key】= val
3.当属性名是字符串的时候 也需要使用【】
<!DOCTYPE html>
<html lang="en">
<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);
console.log(obj2.say());
// 3.使用构造函数实例化对象
function Student(name){
this.name=name;
this.say=function(){
console.log('我是一头狼');
}
}
// this 在那个对象使用,就指向谁。
// 默认window.func(),这个是Student.func
//实例化
var haha=new Student('二哈');
console.log(haha)
// 什么时候用【】
// 当属性名被存在变量中时 使用【】去操作
// 当属性名是字符串时 也是用【】去操作
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(obj3[i]);
}
</script>
</body>
</html>
6. 元素操作
Js主要的目的是用来操作html,
如何操作html,css中如果要设置元素的样式需要通过选择器获取元素,
在js当中如果你要操作元素必须先获取元素对象
如何获取元素:
- 通过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">
//1. js想要操作元素第一步就是要获取元素对象
// 1.通过id获取元素对象 返回元素对象 get获取 Elemenet 元素 By Id
// 后两个getElements,要加s,会获取到多个
var oDiv=document.getElementById("box");
console.log(oDiv,typeof(oDiv));//<div id="box" class="item1"></div> "object"
// 2.通过标签名获取元素对象 返回类数组对象
var oDivs=document.getElementsByTagName('div');
console.log(oDivs,typeof(oDivs));
// 3. 通过类名获取元素 返回类数组对象
var oDivcs=document.getElementsByClassName('item1');
console.log(oDivcs,typeof(oDivcs));
//2.设置元素的样式 通过js设置的都是行间样式
// 格式: 元素对象.style.css属性='值';
// 注意双拼词 如background-color 需要将-线去掉 第二个单词首字母大写
oDiv.style.width='200px';
oDiv.style.height='200px';
oDiv.style.backgroundColor='red';
//3.通过标签或者类名获取的对象不能直接使用 必须遍历单独设置
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";
}
</script>
</body>
</html>
元素属性的操作:
getAttribute()
setAttribute()
removeAttribute()
表单值的操作:
value属性
文本值的操作:
InnerHTML
InnerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
<style type="text/css">
#Div{
width: 300px;
height: 300px;
background:#0f0;
}
</style>
</head>
<body>
<div id="Div"><h1>被你征服</h1></div>
<input type="text" name="" value="123" id='inp'>
<img src="../img/0.jpg" id="img">
<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','../img/1.jpg');
Img.src='../img/1.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);
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>Document</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>
<option value="3">北</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('我抬起了')
}
//表单事件,获取表单的id,再通过name去使用
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>