JavaScript复习

一、javaScript常用工具对象

1、string字符串工具类

<script type="text/javascript">
	var str = "123qweasd123";
	//返回指定下标的字符       
	var c = str.charAt(5);
	//console.log("c="+c)      
	//拼接字符串，往后拼接        
	var str2 = str.concat("90");
	//console.log("str2="+str2);        
	var code = str.charCodeAt();
	//console.log("code="+code);        
	//指定字符首次出现所在的下标，没有返回-1        
	var index = str.indexOf("2")
	//console.log("index="+index);        
	var lastIndex = str.lastIndexOf("2");
	//console.log("lastIndex="+lastIndex);       
	var str3 = "12,345,546,7678,123,56";
	//按照指定的字符进行切割，得到数组     
	var arrs = str3.split(",");
	for (var j = 0; j < arrs.length; j++) {
		console.log(arrs[j]);      
	}
	//切割字符串  开始的下标    截取的长度    
	var str4 = str.substr(3, 5);
	console.log("str4=" + str4);
	//切割字符串  开始的下标（包含）  结束的下标（不包含）        
	var str5 = str.substring(5, 7);
	console.log("str5=" + str5);
</script>

2、Math工具类

<script type="text/javascript">
	//Math工具类        
	var num01 = -90;
	//去绝对值        
	var num02 = Math.abs(num01);
	console.log("num02=" + num02);
	var num03 = 4.3;
	//向上舍入      
	var num04 = Math.ceil(num03);
	console.log("num04=" + num04);
	var num05 = 7.9;
	//向下舍入      
	var num06 = Math.floor(num05);
	console.log("num06=" + num06);
	//四舍五入      
	var num07 = 8.2;
	var num08 = Math.round(num07);
	console.log("num08=" + num08);
	//最大值    
	var max = Math.max(4, 67);
	console.log("max=" + max)
	//最小值        
	var min = Math.min(4, 67);
	console.log("min=" + min)
	//几次幂     
	var p = Math.pow(2, 10);
	console.log("p=" + p);
	var rom = Math.random();
	console.log("rom=" + rom);
</script>

3、Date对象

4、Array对象

1、定义数组 var ages=new Array();//创建了一个数组对象，但是没有指定长度0
2、定义数组 var ages=new Array(5);//创建了一个数组对象，但是指定长度5
3、定义数组 var ages=new Array(12,34,25,37);//创建了一个数组对象，并给了多个数组元素，数组的长度即所给予的元素个数，示例中数组的长度就是4
4、定义数组 var ages=[12,34,25,37]; //创建了一个数组对象，并给了多个数组元素，数组的长度即所给予的元素个数，示例中数组的长度就是4

二、函数

1、函数定义的3种方式

1.普通函数
2.匿名函数
3.动态函数(不建议使用)

<script type="text/javascript">
    //1.普通函数
    function sum (i,j) {
    	return i+j;
	}
    //2.匿名函数
    var add = function  (m,n) {
        return m+n;
    }
    //3.动态函数(不建议使用)
    var shang = new Function("i,j","return i/j");
    //特殊函数(函数调用时传入实际参数与定义的形式参数个数可以不一样)       
    function sum1(j,i,m,n){            
        console.log(j);            
        console.log(i);            
        console.log(m);            
        console.log(n);        
    }        
    sum1(12,45); 

</script>

2、全局变量和局部变量

跟java中的概念和使用方式基本一致
全局变量：在之间定义的变量，可以在js的任何位置使用；

可以在函数外部、函数内部、同一个html页面的其他script脚本块使用。
局部变量：在函数中定义的变量，只能在函数中使用。

<script type="text/javascript">
    var num = 110;
	console.log(num); //110
</script>
<script type="text/javascript">
    console.log(num); //110
</script>

3、常用的测试语句

Document.write()

直接向页面写入内容，可以向页面输出常量、变量和html代码。
console.log()

向控制台Console输出语句，（类似sysout），页面的控制台中（按F12）也可以查看。
alert()

属于bom的知识点。使用弹框的方式显示语句的执行结果。

//3种弹框
alert();
prompt("hello"); //带输入框的弹框
//返回值 var str = prompt("hello"); 
confirm("hi"); //显示信息的弹框

4、JavaScript的全局函数

isNaN：判断变量是否为数字。不是数字：true ; 是数字：false

<script type="text/javascript">
    var i = "22";
    var j = "22a";
    console.log(isNaN(i)); //false
    console.log(isNaN(j)); //true
</script>

三、事件和监听器

事件：用户对html标签做的一些动作：点击鼠标移动输入失去焦点。

触发某一段js代码的执行，从而得到代码运行的结果。
基于对象（为任意的html的标签）
提供好了很多对象，可以直接拿过来使用
使用对象：document window location history screen navigator
事件驱动
Html做网站静态效果，JavaScript负责网站功能的动态效果
与客户进行交互，与服务器进行数据交互

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function bun_click(){
				console.log("按钮点击");
			}
			
			function sel_change(sel){
				console.log(sel.value);
			}
			
			function input_f(){
				console.log("得到焦点");
			}
			function intput_n(){
				console.log("失去焦点");
			}
			
			function tr_over(tr){
				tr.style.backgroundColor = "red";
			}
			function tr_out(tr){
				tr.style.backgroundColor = "blue";
			}
			
			function showImg(img){
				img.src = "imgs/shoes_07.gif";
				// alert("双击事件");
			}
			
		</script>
	</head>
	<body>
		<!-- 单击事件 -->
		<button onclick="bun_click()">点击01</button>
		
		<!-- 值改变事件  省市区 三级联动-->
		<select name="test" onchange="sel_change(this)">
			<option value="湖北">jack<option>
			<option value="湖南">bob<option>
		</select>
		
		<!-- 焦点事件 onfocus 得到焦点  onblur失去焦点-->
		<input type="text" onfocus="input_f()" onblur="intput_n()"/>
		
		<table border="1" width="600" height="100" align="center">
			<!-- onmouseover 鼠标滑入onmouseout 鼠标滑出	 -->
			<tr onmouseover="tr_over(this)" onmouseout="tr_out(this)">
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
			</tr>
		</table>
		
		<img src="imgs/shoes_06.gif" ondblclick="showImg(this)">
		
	</body>
</html>

四、DOM

1、概述

DOM：document object model
- 文档：超文本文档（超文本标记文档HTML）
- 对象：提供属性和方法,不需要程序员自己new
- 模型：使用对象提供的属性和方法，操作超文本标记型文档
原理：要使用dom操作文档，则需要把文档中的所有内容封装成对象，包括文档中的标签、属性和文本内容。
作用：js通过DOM可以去操作HTML，使HTML有动态效果，可以将HTML中的数据与后台进行交互
注意：DOM存在一些浏览器兼容的问题：浏览器对dom模型的实现完整度不一样

2、document对象常用方法

write(): 往页面写入常量、变量或html内容
getElementById：通过指定的标签的id属性获取element对象，返回值唯一的Element对象（常用）
getElementsByName：通过指定的标签的name属性获取element对象的数组，针对表单元素（常用）
getElementsByTagName：通过指定的标签名称获取element对象的数组（常用）
getElementsByClassName：通过指定的标签的class属性获取element对象的数组。 HTML5开始提供的新方法。IE9+支持该方法（了解）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		 //在页面加载完后再执行函数
		window.onload = function(){ 
			//获取input标签
			var ipt01 = document.getElementById("userName");
			//获取标签的value值
			var value = ipt01.value;
			//获取自定义属性
			var uid = ipt01.getAttribute("uid");
			//获取p标签
			//var p1 = document.getElementsByTagName("p")[0];
			var p1 = document.getElementsByTagName("p");
			//获取p的数组
			var ptext = p1[0].textContent;
			console.log(ptext); //12
			var inpName = document.getElementsByName("pwd");
			var pwd = inpName[1].value;
			console.log(pwd); //12dd123
		}
		</script>
	</head>
	<body>
			<p>12</p>
			<input type="text" uid="101" value="张三" id="userName"/>             
			<input type="password" name="pwd" value="123123"/>     
			<input type="password" name="pwd" value="12dd123"/>     
	</body>
</html>

3、DOM节点的相关操作

增加、修改（替换）、删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>java</li>
			<li>c++</li>
			<li>python</li>
			<li>c</li>
		</ul>	
		<button id="del_btn">删除</button>
		<button id="replace">替换</button>
	</body>
	<script type="text/javascript">
		var lis = document.getElementsByTagName("li");
		var ul = document.getElementsByTagName("ul")[0];
		var del_btn = document.getElementById("del_btn");
		var replace = document.getElementById("replace");
		
		del_btn.onclick = function(){
			//移除
			ul.removeChild(lis[1]);
		}
		
		var newLi = document.createElement("li");
		newLi.innerText = "c#";
		replace.onclick = function(){
             //添加节点：newLi.appendChild(newLiText);
             //替换
			ul.replaceChild(newLi,lis[1]);
		}
	</script>
</html>

4、InnerHTML和InnerText

innerHTML节点属性：不是dom的组成部分，但是浏览器都支持。
InnerHTML：获取文本内容，也可以向标签里面设置内容，如果设置的内容中包含html脚本，该属性也能解析后显示。
innerText：获取文本内容，也可以向标签里面设置内容，如果设置的内容中包含html脚本，该属性不能解析，直接显示文本。

5、DHTML

DHTML：动态的HTML，是以下技术的统称，不是一门新语言。

Css：提供样式，使用属性和属性值设置样式对数据进行样式定义。
Html：提供标签，封装数据
Dom：操作html文档的，负责将标签及其内容解析，封装成对象，对象中具有属性和方法
JavaScript：对页面中的对象进行逻辑操作

6、ChildNodes

获取父节点标签元素的里面的所有子节点的标签元素（标签和文本）
nodeName获取标签的名字
textContent获取标签的文本内容
nodeValue获取value属性的值
nextSibling获取当前节点下一个兄弟节点
previousSibling获取当前节点上一个兄弟节点

五、常见案例

案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			p{
				width: 400px;
				height: 300px;
				border: solid 1px gray;
			}
		</style>
		
		<script type="text/javascript">
			
			// 入口函数
			window.onload = function(){
				// 获取提交按钮
				var sub_btn = document.getElementById("sub_btn");
				// 获取文本输入框
				var inp = document.getElementById("inp");
				// // 获取重置按钮
				var reset_btn = document.getElementById("reset_btn");
				// // 获取显示区域标签
				var p = document.getElementsByTagName("p")[0];
				// 按钮添加点击事件
				sub_btn.onclick = function(){
					p.innerHTML = p.innerHTML+ inp.value+"<br/>";
					inp.value = "";
				}
			
			}		
		</script>	
	</head>
	<body>	
		<p>	</p>
		<input id="inp" value=""/>
		<button id="sub_btn">提交</button>
		<button id="reset_btn">清空</button>
	</body>
</html>

案例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			tr td{
				width: 150px;
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			// 父容器移除子元素
			function del_tr(del_btn){
				del_btn.parentElement.parentElement.parentElement.removeChild(del_btn.parentElement.parentElement);	
			}
		
		
			window.onload = function(){
				// 定义下标
				var index = 1;
				// 获取元素
				var name = document.getElementById("name");
				var age = document.getElementById("age");
				var tel = document.getElementById("tel");
				var add_btn = document.getElementById("add_btn");
				var tab = document.getElementById("tab");
				// 添加点击事件
				add_btn.onclick = function(){
					// 创建元素
					var tr = document.createElement("tr");
					// tr的属性与函数都可以使用
					
					// 获取元素值
					var name_value = name.value;
					var age_value = age.value;
					var tel_value = tel.value;
					
					tr.innerHTML = "<td>"+index+"</td>"+
								   "<td>"+name_value+"</td>"+
								   "<td>"+age_value+"</td>"+
								   "<td>"+tel_value+"</td>"+
								   "<td><button onclick='del_tr(this)'>删除</button></td>"
					// 向父容器添加子元素 
					tab.appendChild(tr);
					index++;
					
					//清空输入栏
					name.value = "";
					age.value = "";
					tel.value = "";
					
				}
			}
		</script>
	</head>
	<body>
		
		<p align="center">
			<input id="name" placeholder="姓名"/>
			<input id="age" placeholder="年龄"/>
			<input id="tel" placeholder="手机"/>
			<button id="add_btn">添加</button>
		</p>

		<table id="tab" width="600" align="center" border="1" cellpadding="0" cellspacing="0">
			<tr>
				<td>员工编号</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>手机</td>
				<td>操作</td>
			</tr>
		</table>
	</body>
</html>

六、js中的BOM的概述和使用

JavaScript的三部分组成：

ECMAScript：侧重JavaScript的基础语法（数据类型、变量定义、流程控制和对象）
DOM：Document Object model 文档对象模型 HTML基于dom模型解析
BOM：Browser object model 浏览器对象模型。
JavaScript兼容性问题较

1、Location：地址栏的信息记住href属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var reload = document.getElementById("reload");
				var replace = document.getElementById("replace");
				var href1 = document.getElementById("href1");
				
				reload.onclick = function(){
					location.reload();
				}
				replace.onclick = function(){
					location.replace("https://www.baidu.com"); //切换后不可回退到原页面
				}
				href1.onclick = function(){
					location.href="https://www.baidu.com"; //切换后可以回退到原页面
				}
			}
		</script>
	</head>
	<body>
		<button type="button" id="reload">刷新</button>
		<button type="button" id="replace">切换</button>
		<button type="button" id="href1">下一页</button>
	</body>
</html>

2、History：历史记录的信

a) Forward：返回下一个访问的页面
b) Back：返回上一个访问的页面
c) Go：go(正数)------forward功能 go(负数)--------back功能

<body>
    <a href="demo01.html">demo01</a>        
    <a href="demo02.html">demo02</a>     
    <br />
    <button onclick="forword()">forword</button>        
    <button onclick="back()">back</button>        
    <button onclick="go()">go</button> 
</body>
<script type="text/javascript">
    //退回下一个页面
    function forword(){
        history.forward();
    }
    //返回上一个页面
    function back(){
        history.back();
    }
    //整数表示forword();负数表示back()
    function go(){
        //history.go(1);
        history.go(-1);
    }
</script>

3、window

Window：javascript层级中的顶层对象。表示窗口对象。所有的BOM对象都可以使用window来访问。

案例1

<!-- 计时器 -->
<body>
    <input type="text" id="nowDate" value=""/>
    <button onclick="stopTime()">停止时间</button>
</body>

<script type="text/javascript">
    var inp = document.getElementById("nowDate");
    var timer = setInterval(function(){
        var date = new Date();
        var now = date.getFullYear()+"年"+
            (date.getMonth()+1)+"月"+
            date.getDate()+"日"+
            date.getHours()+":"+
            date.getMinutes()+":"+
            date.getSeconds();
        inp.value = now;
    },500);
    function stopTime(){
        clearInterval(timer);
    }
</script>

案例2

<!-- 选择框 -->
<body>
    语言：
    <input type="checkbox" />c++
    <input type="checkbox" />c
    <input type="checkbox" />java
    <input type="checkbox" />python
    <br />
    <button type="button" onclick="allCheck()">全选</button>
    <button type="button" onclick="noCheck()">取消全选</button>
    <button type="button" onclick="oppCheck()">返选</button>
</body>
<script type="text/javascript">
    var checks = document.getElementsByTagName("input");
    function allCheck(){
        for (var i=0;i<checks.length;i++) {
            checks[i].checked= true;
        }
    }
    function noCheck(){
        for (var i=0;i<checks.length;i++) {
            checks[i].checked= false;
        }
    }
    function oppCheck(){
        for (var i=0;i<checks.length;i++) {
            checks[i].checked = (!checks[i].checked);
        }
    }
</script>

案例3：省市区三级联动

<!DOCTYPE html>
<!-- 省市区三级联动 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				
				//var checkCity;
				//1.定义省份
				var provinces = ["湖北省", "湖南省", "河南省", "北京", "上海"]
				//2.定义省与市之间的关系                
				provinces["湖北省"] = ["武汉", "黄石", "黄冈", "宜昌", "襄阳"]
				provinces["河南省"] = ["郑州", "洛阳", "驻马店","开封"] 
				//3.定义市与区县之间的关系                
				provinces["武汉"] = ["洪山区","硚区口","东湖高新区","江夏区","江汉区"]                
				provinces["黄石"] = ["黄石港区","下陆区","铁山区","大冶市"]                
				provinces["襄阳"] = ["襄城区", "樊城区", "南漳县", "枣阳市"]
				
				provinces["郑州"] = ["上蔡县"]

				var province = document.getElementById("province");
				// 获取市
				var city = document.getElementById("city");
				// 获取区
				var area = document.getElementById("area");
				
				// 添加省份
				for(var i=0; i<provinces.length;i++){
					province.innerHTML += "<option value='"+provinces[i]+"'>"+provinces[i]+"</option>";
				}
				
				// 省份添加事件
				province.onchange = function(){
					var cities =  provinces[this.value];
					
					city.innerHTML = "";
					city.innerHTML = '<option value="">--选择市--</option>';
					
					area.innerHTML = "";
					area.innerHTML = '<option value="">--选择区--</option>';
					
					for (var i = 0; i < cities.length; i++) {
						city.innerHTML += "<option value='"+cities[i]+"'>"+cities[i]+"</option>"
					}
				}
				
				// 城市添加事件
				city.onchange = function(){
					var areas = provinces[this.value];		
					
					for (var i = 0; i < areas.length; i++) {
						area.innerHTML += "<option value='"+areas[i]+"'>"+areas[i]+"</option>"
					}
				}


			}
		</script>
	</head>
	<body>
		<select id="province">
			<option value="">--选择省--</option>
		</select>&nbsp;&nbsp;&nbsp;
		<select id="city">
			<option value="">--选择市--</option>
		</select>&nbsp;&nbsp;&nbsp;
		<select id="area">
			<option value="">--选择区--</option>
		</select>
	</body>
</html>

七、JSON对象

对象都用{}
数组都用[]
所有的键值对都是用key:value

json字符串和js对象的转换

var user = {
    name :
    "qinjiang",
    age: 3,
    sex: '男'
    }

//对象转化为json字符串(json字符串每个键都用""或'包围)
var jsonuser = JSON. stringify(user); 
//输出为{"name" : "qinjiang"，"age":3,"sex" :"男"}

//json字符串转化为对象参数为json 字符串
var obj = JSON. parse(' {"name":"qinjiang" , "age" :3,"sex":"男"}');
//输出为{name:"qingjiang",age:3,sex:"男"}

JSON序列化/反序列化

JSON.stringify({"key":"val"}) ; //序列化成字符串
JSON.parse(string);//json字符串反序列化成对象

json和js对象的区别

var obj = {a: 'he11o' ,b: 'he11ob'};
var json = '{"a": "he11o" , "b":"he1lob"}'

posted @ 2021-06-24 22:45 yu10001 阅读(89) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

yu10001

Talk is cheap. Show me the code. Go big or go home.

JavaScript复习

一、javaScript常用工具对象

1、string字符串工具类

2、Math工具类

3、Date对象

4、Array对象

二、函数

1、函数定义的3种方式

2、全局变量和局部变量

3、常用的测试语句

4、JavaScript的全局函数

isNaN：判断变量是否为数字。不是数字：true ; 是数字：false

三、事件和监听器

四、DOM

1、概述

2、document对象常用方法

3、DOM节点的相关操作

4、InnerHTML和InnerText

5、DHTML

6、ChildNodes

五、常见案例

案例1

案例2

六、js中的BOM的概述和使用

1、Location：地址栏的信息记住href属性

2、History：历史记录的信

3、window

案例1

案例2

案例3：省市区三级联动

七、JSON对象

公告

yu10001

Talk is cheap. Show me the code. Go big or go home.

JavaScript复习

一、javaScript常用工具对象

1、string字符串工具类

2、Math工具类

3、Date对象

4、Array对象

二、函数

1、函数定义的3种方式

2、全局变量和局部变量

3、常用的测试语句

4、JavaScript的全局函数

isNaN：判断变量是否为数字。不是数字：true ; 是数字：false

三、事件和监听器

四、DOM

1、概述

2、document对象常用方法

3、DOM节点的相关操作

4、InnerHTML和InnerText

5、DHTML

6、ChildNodes

五、常见案例

案例1

案例2

六、js中的BOM的概述和使用

1、Location：地址栏的信息 记住href属性

2、History：历史记录的信

3、window

案例1

案例2

案例3：省市区三级联动

七、JSON对象

公告

1、Location：地址栏的信息记住href属性