<span>JavaScript复习</span>
一、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 = prov***his.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 = prov***his.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>
<select id="city">
<option value="">--选择市--</option>
</select>
<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和js对象的区别
var obj = {a: 'he11o' ,b: 'he11ob'};
var json = '{"a": "he11o" , "b":"he1lob"}'
CVTE公司福利 270人发布
投递华为等公司10个岗位 >