第四天

  • javascript 中的函数
  • 对象的操作
  • 元素操作
  • 常用的事件


javascript 中的函数

1、函数定义方式
使用function 关键词定义
函数的调用

python写javascript代码 python运行js中的函数_html


2、函数的返回值

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

python写javascript代码 python运行js中的函数_javascript_02


注意：如果函数没有设置返回值，默认返回undefined

3、函数的三种形式

(1) .命名函数

function 函数名(){}

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

(2).匿名函数

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

python写javascript代码 python运行js中的函数_html_03


(3).自运行函数

自己调用自己

python写javascript代码 python运行js中的函数_对象名_04


4、函数的参数

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

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

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

作用域：
变量的作用域
全局变量：在函数外部定义的变量 和 在函数内部不使用var定义的变量是全局变量 在任意位置都可以使用。
局部变量：在函数内部使用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:function}

(3).使用构造函数创建对象
//创建构造函数
function fun(msg1,msg2){
this.name=msg1;
this.age=msg2;
this.函数名=function(){}
}
//实例化
var 对象名=new fun( 参数1，参数2)

2、操作对象
(1).添加属性：如果属性已经存在做修改 不存在做添加
对象名.属性名=‘’
(2).修改属性
(3).删除属性
delete 对象名.属性名
(4).调用对象的方法
对象名.方法名()

3、【】问题：
(1).for in 在遍历对象时，打印属性对应的值时使用【】
for(i in obj){
console.log(obj[i])
}

(2).当属性名存在变量中的时候 我们需要使用【】
var obj = {}
var key = ‘属性名’
obj【key】= val

(3).当属性名是字符串的时候 也需要使用【】

注意：this 哪个对象调用了this 那么this就指向当前对象

<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);


		// 使用构造函数实例化对象
		function Student(name){
			this.name=name;
			this.say=function(){
				console.log("我是一头狼");
			}
		}

		// 实例化
		var haha=new Student("二哈");
		console.log(haha);


		// js中最大的对象是window
		// this 这个  哪个对象调用了this this就指向这个对象  在全局中this指向的是window对象


		// 什么时候用【】
		//  当键存在变量中时 使用【】
		//  当键为字符串时 也是用【】
		var obj3={name:'贵宾',age:18};
		var key='gender';
		obj3[key]="男";
		console.log(obj3);
		// console.log(obj3[key])或者console.log(obj3.gender)
 		

 		// 添加一个成员属性 "length"
 		obj3['length']='180cm';
 		console.log(obj3);
 		// console.log(obj3['length'])

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


	</script>

元素操作

js主要目的是用来操作html，
在js当中如果你要操作元素必须先获取元素对象
如何获取元素
《1》.通过id获取元素对象
《2》.通过标签名获取元素对象
《3》通过类名获取元素对象

<div id="box" class="items">1</div>
	<div class="item1">2</div>
<script type="text/javascript">
//js想要操作元素第一步就是要获取元素对象

		//1、通过id获取元素对象 返回元素对象 get获取 Element元素 By Id
		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('items');
		console.log(oDivcs,typeof(oDivcs));
</script>

1、样式的操作

//设置元素的样式 通过js设置的都是行间样式
		// 格式：元素对象.style.css属性=‘值’;
		//注意双拼词 如background-color 需要将-去掉 第二个单词首字母大写
		oDiv.style.width='200px';
		oDiv.style.height='200px';
		oDiv.style.border='1px solid red';
		oDiv.style.backgroundColor='blue'

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

		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';
		}

2、元素属性的操作
getAttribute()
setAttribute()
removeAttribute()

3、表单值的操作 value属性

4、文本值的操作
innerHTML
innerText

<body>
	<img src="../img/2.png" 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','../img/1.gif');
			Img.src='../img/1.gif';
		//删除属性
		Img.removeAttribute('data');


		//表单值的操作 value
		var Inp=document.getElementById('inp');
		console.log(Inp.value);
		Inp.value=456;
		// Inp.setAttribute('value','789')

		 //文本值的操作
		 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>

常用的事件

事件驱动语言
鼠标事件
鼠标单击事件：onclick
鼠标的移入事件：onmouseover
鼠标的移出事件：onmouseout
鼠标移动事件：onmousemove
鼠标按下事件：onmousedown
鼠标抬起事件：onmouseup

键盘事件
键盘按下：onkeydown
键盘抬起：onkeyup

表单事件
获取焦点：onfocus
失去焦点：onblur
当value值发生改变时触发的事件 onchange
提交事件：onsubmit

<!DOCTYPE html>
<html>
<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>

 	<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值发生变化时触发
 			// 对于普通的输入框只有失去焦点时才会触发onchange事件
 			// 一般配合下拉框去使用
 			Form.sel.onchange=function(){
 				console.log('选我啊');
 				// 获取当前选中的value值
 				// 谁触发的事件this就代表哪个元素对象
 				console.log(this.value);
 			}
 			// 提交事件 一般绑定给form元素 当单击提交按钮时触发
 			Form.onsubmit=function(){
 				alert('你还没付钱');
 			}
 	</script>	

	</form>
</body>
</html>

练习：
简单的计算器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>简单的计算机</title>
</head>
<body>
	<input type="text" name="" id="num1" value="0">
	<input type="text" name="" id="num2" value="0">
    <br>
    <button onclick="func('+')">+</button>
    <button onclick="func('-')">-</button>
    <button onclick="func('*')">*</button>
    <button onclick="func('/')">/</button>
    <span id="res">0*0=0</span>


<script type="text/javascript">
	//获取num1和num2和res的元素对象
	var Num1=document.getElementById('num1');
	var Num2=document.getElementById('num2');
	var result=document.getElementById('res');

	// 定义一个运算函数
	function func(msg){
		// 获取num1和num2的value值
		var num1=Num1.value;
		var num2=Num2.value;
		// 字符串拼接
		var str=num1+msg+num2;
		console.log(str);
		var res=eval（str);
		console.log(res);
		//拼接最后的结果并写入span标签
		result.innerHTML=str+'='+res;
	}


</script>
</body>
</html>

全选全不选反选

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>全选反选全不选</title>
</head>
<body>
	<input type="checkbox" name="">美元<br>
	<input type="checkbox" name="">人民币<br>
	<input type="checkbox" name="">日元<br>
	<input type="checkbox" name="">英镑<br>

	<button>全选</button>
	<button>全不选</button>
	<button>反选</button>

<script type="text/javascript">
	var btns=document.getElementsByTagName('button');
	var inps=document.getElementsByTagName('input');

	 // 全选
	btns[0].onclick=function(){
		for(var i=0;i<inps.length;i++){
			// 修改checked的值
			inps[i].checked=true;
		}
	}
	// 全不选
	btns[1].onclick=function(){
		for(var i=0;i<inps.length;i++){
			// 修改checked的值
			inps[i].checked=false;
		}
	}
	// 反选
	btns[2].onclick=function(){
		for (var i=0;i<inps.length;i++){
		// 	if(inps[i].checked==true){
		// 		inps[i].checked=false;
		// 	}else{
		// 		inps[i].checked=true;
		// 	}
		inps[i].checked = !inps[i].checked;//=!反选的意思
		}
	}

</script>

</body>
</html>

选项卡

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选项卡</title>
	<style type="text/css">
		*{margin:0px;padding:0px;list-style:none;}
		.wrap{
			width:300px;
			height:300px;
			border:1px solid #c4c4c4;
		}
		.title{
			overflow:hidden;
		}
		.title li{
			float:left;
			width:100px;
			height:50px;
			background: #c4c4c4;

			text-align:center;
			line-height:50px;
		}
		.title .active1{
			background:pink;
		}
		.content li{
			height:250px;
			border:1px solid red;

			/*默认给所用的内容隐藏*/
			display:none;
		}
		.content .active2{
			display:block;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<ul class="title">
			<li class="active1">话费</li>
			<li>机票</li>
			<li>酒店</li>
		</ul>
		<ul class="content">
			<li class="active2">话费内容</li>
			<li>机票内容</li>
			<li>酒店内容</li>
		</ul>

	</div>
	<script type="text/javascript">
		//获取元素对象
		var uls=document.getElementsByClassName('title');
		var tit=uls[0].getElementsByTagName('li');
		var conts=document.getElementsByClassName('content');
		var cli=conts[0].getElementsByTagName('li');
		// 遍历所有标题li 并添加移入事件
		for(var i=0;i<tit.length;i++){
			// 存储标题的索引 标题的索引和内容的索引一一对应
			tit[i].index=i;
			tit[i].onmouseover=function(){
				// 初始化 清除所有标题的active1属性和内容的active2属性
				for(var j=0;j<tit.length;j++){
					// 初始化标题的类 不管移入是谁 先将所有标题的类删除
					tit[j].removeAttribute('class');
					// 初始化内容 部分 不管移入是哪个标题 将所有内容的类删除
					cli[j].removeAttribute('class');
				}
				//移入谁给谁添加active1属性
				this.setAttribute('class','active1');
				// 移入的哪个标题给标题对应的内容添加active2;
				cli[this.index].setAttribute('class','active2');

			}
		}
	</script>
</body>
</html>