JavaScript是一种基于对象的事件驱动型、弱类型的脚本语言
基于对象:区别于Java中的面向对象,遵循对象.方法的规则,但是没有类的概念
事件驱动:脚本语言代码需要由网页中的事件来触发执行
脚本语言:JS作为寄生语言,写在HTML网页中
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。
JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果
包含三部分:
ECMAScript语法:基本的语法结构,包括变量、运算符、分支、循环、函数等。
DOM操作:对网页上的标签操作。包含HTML标签和css相关内容。
BOM操作:对浏览器的操作。包括历史操作(前进、后退)、地址栏操作等。
JS的使用方式,包含三种方式:
1、直接在html标签中写JS
2、在head标签中或者任意位置的标签中写代码。最好将script放在网页文件的body标签的最后面
3、在一个后缀名为js的文件中写代码,在页面上引用。
代码演示
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script type="text/javascript" src="js/common.js" >script>
<script type="text/javascript">
function fn1(){
alert('我是谁?我在哪里?我要干什么?');
}
script>
head>
<body>
<a href="" onclick="return confirm('确定要删除吗?');">删除a>
<input type="button" value="点击" onclick="fn1()"/>
<input type="button" value="First Blood" onclick="fn2()"/>
body>
html>
common.js
function fn2(){
alert('我又来了');
}
注意:
1、type要么不写,使用默认,要写就写正确。
2、标签在引入外部js时,不要直接使用自结束。
3、在引入外部js的标签中,不能写代码。
命名规则与Java相似。
变量定义:var num = 10;
没有变量类型的声明。
在标签中写的代码,如果没有被函数包含,则表示直接执行的代码。
注意:
1、由于JS脚本语言的特征,不需要编译,所以即使代码有错误,仍旧会执行到有错误的地方才停止。
2、代码可以不需要分号结束。(不推荐)
3、var可以不写,但是建议还是写上。
基本数据类型:
Number:js中数字类型只有一种,所以没有Java中的整数除以整数等于整数的问题。
String:通用的字符串类型,求长度是length属性。
布尔:true和false。
undefined:当获取某个变量的属性不存在,会返回一个undefined。即没有定义。
null:当获取的值为null时。
引用数据类型:数组和对象
代码演示
// 第一种定义方式:类似数组
var arr = [1,2,3];
// 第二种定义方式:类似集合,两种定义方式没有区别
var arr1 = new Array();
// 在控制台输出
console.log(arr[1]);
// 如果超出下标访问,不会出错,会显示undefined
console.log(arr[5]);
// 显示长度
console.log(arr.length);
// 给超出的下标赋值,成功
arr[10] = 10;
// 显示长度,显示11
console.log(arr.length);
// 中间的没有赋值的元素值为undefined
console.log(arr[8]);
// 把arr数组当集合操作
// 在最后添加一个新元素
arr.push(100);
// 遍历集合元素
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 操作数组,
/*
参数1:从哪个下标开始操作
参数2:操作几个元素
参数3...:将操作的元素替换为
例如:
arr.splice(1, 1);表示将数组中从1号下标开始的1个元素替换成没有,即删除一个元素
arr.splice(1, 5);表示将数组中从1号下标开始的5个元素替换成没有,即删除5个元素
arr.splice(1, 0, 5);表示将数组中从1号下标开始的0个元素替换成5,即在2号下标处插入一个元素5
arr.splice(1, 1, 5);表示将数组中从1号下标开始的1个元素替换成5,即将2号下标修改成元素5
*/
arr.splice(1, 1, 4,5,6,7)
// foreach循环(在js中叫for...in循环),在js中for..in循环也是循环的下标
for (var num in arr) {
console.log(arr[num]);
}
// 定义一个对象或map,key可以加引号,也可以不加
var map = {name:"mary", "age":20}
// 以map的形式取值,以key作为下标访问
console.log(map["name"]);
// 以对象的形式取值
console.log(map.age);
// 赋值
map.sex = "男";
map["id"] = 1;
map.type = {id:1, name:"法师"}
console.log(map);
console.log(map.type.name);
与Java一样。
var str1 = "hello";
var str2 = "hello";
console.log(str1 == str2); // 字符串比较使用==,没有equals
var n1 = "2";
var n2 = 2;
console.log(n1 == n2); // 只是比较值是否相等,此处返回true
console.log(n1 === n2); // 比较值的同时,还要比较数据类型,此处返回false
分支中,if条件不需要使用Boolean值。
如果条件为一个变量,值为0、null、undefined、NaN表示false,否则为true。(NaN:not a number不是数字)
如果出现未定义的变量,会报错。
注意: 变量未定义和undefined的区别。
函数是js中需要重点理解的内容。
// 定义一个函数,相当于Java中的方法
// 使用function关键字来声明
// fn1作为一个函数的名称
// 后面的()表示调用该函数
function fn1(){
console.log("hello, world");
return 5;
}
// 调用函数
fn1();
var n = fn1(); // 此处n等于5
var m = fn1; // 此处相当于把fn1这个函数名称赋值给m了,所以m就是fn1
m(); // 此处调用该方法
// 函数的参数, 可以给参数设置默认值,当没有传该参数时,会自动使用默认值
function fn2(n = 3, m = 5){
console.log("fn2方法被调用");
console.log(n);
console.log(m);
}
fn2(); // 调用方法时,如果不传参,也可以调用该方法,参数会为undefined,如果有默认值会使用默认值
fn2("参数1");
fn2("参数1", "参数2");
// 将函数作为方法的参数
function fn3(m){
m();
}
// 调用fn3
fn3(fn1);
// 自定义个变量,值为一个函数
var fn4 = function (){
console.log("hello, fn4");
};
// 调用fn3
fn3(fn4);
// 说明函数的定义有两种方式。
// 定义一个对象,包含属性和方法。
var stu = {"name": "Jack", age : 20, "say":function(){
console.log(this.name + ", " + this.age);
}};
// 输出属性和调用方法
console.log(stu.name);
stu.say();
// 奇葩的写法
function fn5(){
return function (){
return function (){
return function (){
console.log("hello, aaaa");
};
};
};
}
fn5()()()();
// 实例
// 计算两个数字的值
function fn6(m){
var n1 = 3;
var n2 = 5;
return m(n1, n2);
}
var re = fn6(function(n1, n2){
return n1 + n2;
});
console.log(re);
系统自带的函数,例如弹窗函数alert(),可以直接使用,不需要任何对象调用。那么这些不需要使用任何对象调用的函数或者变量(包括自定义的函数和变量),都是归属于window对象的。所以可以写作window.alert()。但是一般都会省掉。
var n = 5;
window.alert(window.n);
function fn1(){
alert('我很好');
}
window.fn1();
alert():弹出一个确定框。
confirm():弹出一个确定取消框,当点击确定时,返回true,点击取消,返回false。
prompt(‘提示信息’, ‘输入框默认值’):弹出一个输入框。点击确定,会返回输入的内容,点击取消,返回null。
示例代码
var r = confirm('是否确定');
if(r){
console.log('点击了确定');
}else{
console.log('点击了取消');
}
// 实际应用案例
// 删除
var r = prompt('请输入姓名', 'zhangsan');
console.log(r);
parseInt() :将内容转换成整数。如果是字符串,会从第一个字母开始转换,能转就转,不能转就返回NaN。也可以将小数转换成整数。
parseFloat():将内容转换成小数。
isNaN() :判断是否不是数字。
parseInt('100Hello'); // 返回100
parseInt('Hello100'); // 返回NaN
parseInt(100.5); // 返回100
页面上HTML元素一些行为过程中产生的操作。
例如:按钮点击。产生点击事件
事件中一般都是调用js函数。
常见的事件如下:
鼠标相关事件:(所有事件前面都有单词on)
键盘事件:
其他事件:
内置对象,JavaScript提供的预定义对象,不同的对象提供相应的方法,每个方法可以完成特定的功能
我们可以把JS中的内置对象类别为Java中的类
在线参考手册:https://www.w3school.com.cn/jsref/index.asp
代码演示
function testString(){
//创建String对象
var s = "www.baidu.com";
// 常用属性(求字符串长度)
var len = s.length;
//charAt() 获取字符串中指定索引出的字符
var r1 = s.charAt(5);
//charCodeAt() 获取字符串中指定索引出的字符的ascii
var r2 = s.charCodeAt(5);
//indexOf() 返回"."在s中第一次出现的位置 (如果s中不包含"."则返回-1)
var r3 = s.indexOf(".");
//lastIndexOf() 返回"."在s中第最后一次出现的位置
var r4 = s.lastIndexOf(".");
//replace() 将s中的第一个“.”替换成@
var r5 = s.replace(".","@");
//split() 将s字符串以"."进行分割成多个字符串存放在数组中
var arr = s.split(".");
//substring(i) 从s中索引为4的位置(包含)开始截取直到字符串末尾
var r6 = s.substring(4);
//substring(i,j) 从s中索引为4开始截取(包含),到索引为6结束(不包含)
var r7 = s.substring(4,6);
//substr(4,6) 从s中索引为4开始截取(包含),共截取6个字符
var r8 = s.substr(4,6);
//match(reg) 验证当前字符串是否满足特定的规则,如果不满足则返回null
var s1 = "14030303300";
var r9 = s1.match("1[3,5,6,7,9]\\d{9}");
}
常量
var pi = Math.PI;
var e = Math.E;
常用方法
function testMath(){
//常量
var pi = Math.PI;
var e = Math.E;
//方法
//产生[0,1)之间的随机小数
var r1 = Math.random();
//Math.floor(m); 获取小于m的最大整数
var r2 = Math.floor(-3.672);
//Math.ceil(m); 获取大于m的最小整数
var r3 = Math.ceil(-3.00001);
//四舍五入
var r4 = Math.round(3.499);
alert(r4);
}
数组,兼具Java中数组和集合的特性
属性和方法
function testArray(){
//定义Array对象
var arr1 = new Array();
var arr2 = new Array("aaa","bbb","ccc");
arr1[0] = "a";
arr1[1] = "c";
arr1[2] = "b";
//length属性,获取数组的长度
var len = arr1.length;
//arr2.concat(arr1) 将arr2和arr1合并成一个数组
var r1 = arr2.concat(arr1);
//join 取出当前数组中的元素拼接成字符串(默认使用,拼接;可以通过参数指定拼接符号)
var r2 = arr2.join("-");
//pop() 出栈,从数组中取出最后一个元素,并从原数组中移除
var r3 = arr2.pop();
//push(e) 入栈,在数组最后面添加一个元素
arr2.push("ddd");
//reverse() 将原数组中的元素进行反转
arr2.reverse();
//sort排序
arr1.sort();
}
常用方法
function testDate(){
//new一个Date对象表示当前系统时间
var date = new Date();
var y1 = date.getYear(); //获取年份相对于1900年的偏移值
var year = date.getFullYear();
var month = date.getMonth()+1; //0-11 表示1-12月
var d = date.getDate(); //获取到日期
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
sec = sec<10?"0"+sec:sec;
var day = date.getDay(); //获取星期
var time = year+"年"+month+"月"+d+"日 "+hour+":"+min+":"+sec+" 星期"+day;
document.getElementById("timeHeader").innerHTML = time;
setTimeout("testDate()",1000);
}
正则校验,验证用户输入的数据是否满足特定的规则
定义的规则——正则表达式
用特定的符号来定义某种数据格式(规则)
+
至少出现一次 {1,}*
0次或多次 {0,}var reg = "^\d{3}-\d{8}|\d{4}-\d{7}$";
创建RegExp对象
var regExp = new RegExp("^1[3,5,7,9]\d{9}$");
var regExp = /^1[3,5,7,9]\d{9}$/;
常用方法
<input type="text" id="tel"/><label id="tips">label>
<hr />
<button onclick="testRegExp()">测试RegExpbutton>
代码演示
// 修饰符i(忽略大小写), g(全局), m(多行匹配)
// 正则表达式的创建
// 使用new创建
var r1 = new RegExp('[abc]', 'i');
var r2 = /[abc]/i;
// 正则表达式的使用
console.log(r1.test("b")); // 返回一个布尔值
console.log("c".match(r2)); // 返回一个数组,表示匹配的内容
// 说明[abc]表示一个字符,该字符需要满足是abc中的一个
console.log(r2.test("d"));
// 匹配所有的字母
var r3 = /^[^a-zA-Z]$/; // 此处^表示匹配字符串的开始,$表示匹配字符串的结束
// 中括号表示一个字符,中括号中间的^表示取反
console.log(r3.test("1"));
var r4 = /^(abc|def|hij)$/; // 此处|表示或者,小括号就表示区分
console.log(r4.test("def"));
// \w \W \d \D \s \S .这些元字符来匹配相应的内容,分别对应数字字母下划线,非数字字母下划线,数字,非数字,空格,非空格,非换行的任意字符
var r5 = /^[\w]$/; // 匹配一个字母
console.log(r5.test("_"));
// + 1到多,* 0到多,? 0到1,{5} 5次,{5,} 5到多次,{6,12}6到12次
var r6 = /^[\w]+$/; // 匹配1到多个字母
console.log(r6.test("a"));
var r7 = /^[\w]*$/; // 匹配0到多个字母
console.log(r7.test(""));
var r8 = /^[A-z][A-z0-9]{5,11}$/; // 由字母数字组成,6到12位
console.log(r8.test("2sdjfsdf"));
Functions实际上是一个虚拟的内置对象,在JS中提供了一些全局的JS方法,我们认为这些全局方法都属于这个虚拟的全局内置对象 global
var s = "123";
var m = Functions.parseInt(s);
常用方法
function testFunctions(){
//escape
var s1 = "https://www.baidu.com/s?kw=姜子牙";
//escape对字符串中的符号和汉字进行编码
var s2 = escape(s1);
//unescape 反编码、解码
var s3 = unescape(s2);
//对url的参数部分进行编码
var s4 = encodeURI(s1);
//对url编码后的字符串进行解码
var s5 = decodeURI(s4);
var s6 = "345";
//将字符串转换成浮点数
var s7 = parseFloat(s6);
//将字符串转换成整数
var s8 = parseInt(s6);
var s9 = '{"stuNum":"10001","stuName":"王二狗","stuAge":21}';
//对满足特定格式(JSON)的字符串进行格式化
var s10 = eval("("+s9+")");
alert(s10.stuName);
}
BOM (Browser Object Model)浏览器对象模型,JS作为一种脚本语言寄生在HTML文档中,用于实现对HTML文档的动态操作,因为HTML文档是通过浏览器窗口进行显示的,JS为了更好的实现对HTML文档的控制,提供了一些列对象用于获取或设置当前HTML文档的显示环境。
常用属性
//login.html
<script type="text/javascript">
if(window.top != window.self){
window.top.location = window.self.location;
}
</script>
status 状态栏
//设置当前浏览器窗口的状态栏文本
window.status = "☆★☆★☆★☆★☆★☆★☆★☆★☆★";
//获取到当前浏览器窗口的状态栏文本
var v4 = window.status;
常用方法
setTimeout/clearTimeout
<button onclick="testSetTimeout()">测试setTimeoutbutton>
<button onclick="testClearTimeout()">测试clearTimeoutbutton>
var task1;
function testSetTimeout(){
//延时调用:延迟指定时间调用指定方法(只调用一次)
task1 = setTimeout("test()",3000);
}
function testClearTimeout(){
clearTimeout(task1);
}
function test(){
alert(1);
}
setInterval/clearInterval
<button onclick="testSetInterval()">测试setIntervalbutton>
<button onclick="testClearInterval()">测试clearIntervalbutton>
var task2;
function testSetInterval(){
//循环调用:每隔指定的时间就调用一次指定的方法(不停的调用)
task2 = setInterval("test()",2000);
}
function testClearInterval(){
clearInterval(task2);
}
function test(){
alert(1);
}
<button onclick="testNavigator()">测试navigatorbutton>
<script type="text/javascript">
function testNavigator(){
//navigator 我们可以理解为只读对象,用于获取浏览器的属性
var v1 = navigator.appCodeName;
var v2 = navigator.appName;
var v3 = navigator.appVersion;
//检查浏览器是否启用cookie
var b = navigator.cookieEnabled;
//使用JS操作cookie
//写cookie
document.cookie = "key1=value1";
document.cookie = "key2=value2";
document.cookie= "key2=value3";
//读cookie
var kv = document.cookie;
alert(kv);
}
script>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="testScreen()">测试screenbutton>
<script type="text/javascript">
function testScreen(){
//返回设备的一英寸的物理像素点
var xdpi = screen.deviceXDPI;
var ydpi = screen.deviceYDPI;
//返回屏幕的可用宽度和高度(除windows的任务栏)
var aw = screen.availWidth;
var ah = screen.availHeight;
//返回屏幕的宽度和高度
var w = screen.width;
var h = screen.height;
alert(w+"*"+h);
}
script>
body>
html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
This is Page C.
<hr/>
<a href="d.html">D</a>
<br/>
<button onclick="syy2()">后退2</button>
<button onclick="syy()">后退</button>
<button onclick="xyy()">前进</button>
<button onclick="xyy2()">前进2</button>
<script type="text/javascript">
function syy2(){
history.go(-2);
}
function syy(){
history.back(); //go(-1)
}
function xyy(){
history.forward();//go(1)
}
//前进2页,自行完成
</script>
</body>
</html>
属性
//location.herf 表示地址栏中的地址0
//获取地址信息
var url = location.herf;
//设置当前窗口的地址信息(实现跳转)
location.href = "https://www.baidu.com";
**方法
//用指定的url替换当前地址栏url(实现跳转)
location.replace("https://www.baidu.com");
//刷新当前地址栏(刷新网页)
location.reload();
DOM:document object model,文档对象模型。DOM操作就是指使用js操作页面上的标签和css样式。
集合属性
//all 获取当前文档中的所有元素
var arr1 = document.all;
//forms 获取当前文档中所有的表单元素
var arr2 = document.forms;
//表单元素可以执行: e.submit() 提交表单
//images 获取当前文档中所有的图片
var arr3 = document.images;
//links 获取当前文档中所有的超链接(a、area)
var arr4 = document.links;
属性
//cookie
//设置/修改cookie键值对
document.cookie = "key=value";
document.cookie = "key1=value2";
//获取cookie(字符串)
var c = document.cookie;
//返回当前文档的域名
var domain = document.domain;
//返回当前文档的url
var url = document.URL;
//获取当前文档的标题
var title = document.title;
//设置当前文档的标题
document.title="从前有座山";
方法
//write 使用指向文档的输出流输出指定的内容(会覆盖原有的内容)
document.writeln("");
document.writeln("
");
document.write("");
//document.close();
//document.open();
document.write("");
//getElementsByTagName 根据标签名获取页面中的元素(数组)
var arr5 = document.getElementsByTagName("tr");
//getElementsByClassName 根据标签的class属性获取页面中的元素(数组)
var arr6 = document.getElementsByClassName("inputStyle");
//getElementsByName 根据标签的name属性获取页面中的元素(数组)
var arr7 = document.getElementsByName("hobby");
//getElementById 根据标签的id属性获取页面中的某一个元素
var e = document.getElementById("btn");
<div id="div1" style="width:600px; height: 300px; background: pink;">wahaha<h4>枫桥夜泊h4><p>-张继-p><p>月落乌啼霜满天,p><p>江枫渔火对愁眠;p><p>姑苏城外寒山寺,p><p>夜半钟声到客船。p>div>
<button onclick="testDocument()">DOM操作button>
<script type="text/javascript">
function testDocument(){
// nodeType nodeName nodeValue
//标签节点(元素) 1 标签名 null
//属性节点(属性) 2 属性名 属性值
//文本节点 3 #text 文本值
var tagNode = document.getElementById("div1");
//获取标签节点的属性(数组,属性节点)
var attrNodes = tagNode.attributes;
//获取标签节点的子节点(包括文本子节点、标签子节点)
var cns = tagNode.childNodes;
//获取当前节点的父节点(标签节点)
var bodyTag = tagNode.parentNode;
var node = tagNode;
var type = node.nodeType;
var name = node.nodeName;
var value = node.nodeValue;
console.log("nodeType:"+type);
console.log("nodeName:"+name);
console.log("nodeValue:"+value);
}
script>
// innerHTML 获取/设置当前标签中的内容
// 获取
var s1 = tagNode.innerHTML;
// 设置
//tagNode.innerHTML="wahaha";
// outerHTML 获取/设置当前签内容(当前标签和其中的内容)
// 获取
var s2 = tagNode.outerHTML;
// 设置
tagNode.outerHTML = "a
"
document.createElement(tagName)
创建标签节点parent.appendChild(newNode);
将新节点拼接到parent节点中parent.insertBefore(newChild,refChild);
将newChild作为parent的子节点插入到refChild之前parent.replaceChild(newChild,oldChild);
使用newChild替换oldChildcurrentNode.replaceNode(newNode);
使用newNode替换currentNode(IE支持)currentNode.remove();
删除当前节点parent.removeChild(childNode);
从当前父节点中删除指定的子节点currentNode.removeAttribute(String attrName);
删除当前节点的属性综合案例
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="div1" style="width:600px; height: 400px; background: pink;">
<h4>枫桥夜泊h4>
<p id="p0">-张继-p>
<p id="p1">月落乌啼霜满天,p>
<p>江枫渔火对愁眠;p>
<p>姑苏城外寒山寺,p>
<p>夜半钟声到客船。p>
div>
<button onclick="testNode()">节点操作button>
<script type="text/javascript">
function testNode(){
//1.创建新节点
//document.createElement(tagName) 创建标签节点
var imgTag = document.createElement("img"); //
//createAttribute 创建属性节点
//var attrNode = document.createAttribute("src");
//2.给元素添加属性
imgTag.src = "img/c.jpg";
imgTag.id = "myImg";
imgTag.height="100";
//3.拼接子节点
var divTag = document.getElementById("div1");
// parent.appendChild(newChild); 将新节点拼接到parent节点中
//divTag.appendChild(imgTag);
//4.插入子节点
var p1 = document.getElementById("p1");
//parent.insertBefore(newChild,refChild); 将newChild作为parent的子节点插入到refChild之前
//divTag.insertBefore(imgTag,p1);
//5.替换子节点
var p0 = document.getElementById("p0");
//parent.replaceChild(newChild,oldChild); 使用newChild替换oldChild
//divTag.replaceChild(imgTag,p0);
//6.替换节点(浏览器兼容)
// currentNode.replaceNode(newNode); 使用newNode替换currentNode
//divTag.replaceNode(imgTag);
//7.删除节点
// currentNode.remove(); 删除当前节点
//p0.remove();
//8.删除子节点
// parent.removeChild(childNode); 从当前父节点中删除指定的子节点
//divTag.removeChild(p0);
//9.删除节点的属性
//divTag.removeAttribute("id");
}
script>
body>
html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/a.jpg" width="100" id="img01"/><br />
<button onclick="changeImgSize()">改变图片大小</button>
<script type="text/javascript">
function changeImgSize(){
var img = document.getElementById("img01");
//1.获取标签属性值 var v = e.attrName;
var w = img.width;
//2.设置标签属性 e.attrName = v;
img.width = w+10;
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
#div1{
width: 200px;
height: 200px;
}
style>
head>
<body>
<div id="div1" style="border: 1px solid red;color: blue;">
床前明月光
div>
<input type="button" value="修改样式" onclick="fn1()"/>
body>
html>
<script>
function fn1(){
// 得到元素
var div1 = document.getElementById('div1');
// 以修改属性的方式修改样式, 会覆盖之前的内容
// div1.style = "background-color: #ccc;";
// 如果不希望覆盖,而是想添加新的样式,可以使用两种方式:
// 1. 将原来的样式再写一次
// div1.style = "border: 1px solid red;color: blue; background-color: #ccc;";
// 2. 只修改样式的一个值,此方式样式属性名称与原本的名称可能不一致,此处是标准的命名方式
div1.style.backgroundColor = "#ccc";
// 获取行内样式值
var color = div1.style.color;
console.log(color);
// 获取非行内样式的值
// var width = div1.style.width; // 无法获取
// console.log(width);
width = window.getComputedStyle(div1)["width"]; // chrome, firefox等主流的浏览器写法
console.log(width);
// IE的写法
// width = div1.currentStyle["width"];
// console.log(width);
// 调用下面的方法
width = getStyle(div1, "width");
console.log(width);
}
// 获取样式(兼容不同的浏览器)
function getStyle(elem, attr){
// 如果该属性存在, chrome, firefox等主流的浏览器以及IE9+的写法
if(window.getComputedStyle){
return window.getComputedStyle(elem)[attr];
// 低版本的IE写法
}else if(elem.currentStyle){
return elem.currentStyle[attr];
}else{
return null;
}
}
script>
综合案例:省市区联动
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
省份:<select id="province" onchange="showCity(this)">select>
城市:<select id="city" onchange="showRegion(this)"><option>请选择option>select>
区/县:<select id="region"><option>请选择option>select>
<script>
var info = '[{"provinceName":"湖北省","citys":[{"cityName":"武汉市","regions":[{rName:"洪山区"},{rName:"江夏区"},{rName:"硚口区"}]},{"cityName":"黄石市","regions":[{rName:"洪山区2"},{rName:"江夏区2"},{rName:"硚口区2"}]},{"cityName":"大冶市","regions":[{rName:"洪山区3"},{rName:"江夏区3"},{rName:"硚口区3"}]}]},{"provinceName":"湖南省","citys":[{"cityName":"长沙市"},{"cityName":"常德市"}]},{"provinceName":"安徽省","citys":[{"cityName":"六安市"},{"cityName":"淮北市"},{"cityName":"淮南市"}]}]';
var arr = eval("("+info+")");
showProvince();
function showProvince(){
var provinceTag = document.getElementById("province");
provinceTag.innerHTML = "";
for (var i = 0; i < arr.length; i++) {
var pname = arr[i].provinceName;
// 将每个省份生成一个选项option
var optionTag = document.createElement("option");
optionTag.innerHTML = pname;
optionTag.value = pname;
// 显示到省份的下拉菜单中
provinceTag.appendChild(optionTag);
}
}
function showCity(province){
// 1.获取已选择的省份
var pname = province.value;
var cityTag = document.getElementById("city");
cityTag.innerHTML = "";
//2.找到省份对应的城市数组
var cityArr;
for (var i = 0; i < arr.length; i++) {
var province = arr[i];
if(province.provinceName == pname){
cityArr = province.citys;
break;
}
}
for (var i = 0; i < cityArr.length; i++) {
var cname = cityArr[i].cityName;
// 将每个省份生成一个选项option
var optionTag = document.createElement("option");
optionTag.innerHTML = cname;
optionTag.value = cname;
// 显示到省份的下拉菜单中
cityTag.appendChild(optionTag);
}
}
function showRegion(city){
var cname = city.value;
var regionTag = document.getElementById("region");
regionTag.innerHTML = "";
var regionArr;
// 1.获取已选择的省份
var pname = document.getElementById("province").value;
var regionArr;
for (var i = 0; i < arr.length; i++) {
var province = arr[i];
if(province.provinceName == pname){
var cityArr = province.citys;
for (var i = 0; i < cityArr.length; i++) {
var city = cityArr[i];
if(city.cityName == cname){
regionArr = city.regions;
break;
}
}
break;
}
}
for (var i = 0; i < regionArr.length; i++) {
var rname = regionArr[i].rName;
// 将每个省份生成一个选项option
var optionTag = document.createElement("option");
optionTag.innerHTML = rname;
optionTag.value = rname;
// 显示到区的下拉菜单中
regionTag.appendChild(optionTag);
}
}
script>
body>
html>
异步请求是如何实现的?
案列判断用户名可用
创建请求对象
//1.创建ajax请求对象(不同类型的浏览器创建ajax请求对象的方式是不一样的)
if(window.XMLHttpRequest){
ajaxReq = new XMLHttpRequest();
}else{
ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
}
封装请求数据
//2.封装请求数据(请求方式、请求路径、参数) open
//open(method, url, async),
//method指get或post
//url:请求的url
//async:是否异步,true表示异步,false同步
//如果要发送post请求,需要先设置,setRequestHeader("content-type", "application/x-//www-from-urlencoded")
var name = document.getElementById("userName").value;
ajaxReq.open("get","check?username="+name,true);
指定回调函数(处理响应结果)
//3.监听ajax请求状态变化 (回调函数)
//处理响应结果时,需要使用readyState的4状态,以及status的200状态码。
//处理响应时,应该使用responseText或者responseXML属性。
ajaxReq.onreadystatechange = test;
发送请求
//当请求方式为post时,可以通过send函数的参数实现请求体传值(body)
ajaxReq.send(null);
处理响应结果
function test(){
//5.在回调函数中,当readyState==4 同时 http状态为200 时,获取响应结果
if(ajaxReq.readyState == 4 && ajaxReq.status==200){
//6.从ajaxReq中获取servlet响应的结果
var data = ajaxReq.responseText;
//7.处理结果
var label = document.getElementById("user-name-label");
if (data=="yes"){
label.innerHTML="√ 用户名可用";
label.style.color="green";
}else{
label.innerHTML="× 用户名不可用";
label.style.color="red";
}
}
}
Servlet响应AJAX请求
@WebServlet("/check")
public class CheckUserNameServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收用户名
String username = request.getParameter("username");
System.out.println("----------"+username);
//2.检查用户名是否可用
String r = username.indexOf("admin")>=0?"no":"yes";
//3.在servlet中通过输出流响应ajax请求
PrintWriter out = response.getWriter();
out.print(r);
out.flush();
out.close();
}
}
阿里 fastjson
谷歌 jackson
在项目中导入所需的jar包
实现转换
public class TestJSON {
public static void main(String[] args) throws Exception{
js();
}
// jackson
public static void js()throws Exception{
// java对象
Users users = new Users("1", "张三丰", "200", "男");
// 集合对象
List<Users> usersList = Arrays.asList(
new Users("1", "zhangsan", "20", "男"),
new Users("2", "lisi", "21", "男"),
new Users("3", "wangwu", "22", "男"));
// java对象转json
ObjectMapper mapper = new ObjectMapper();// 用来转换格式的对象
String s = mapper.writeValueAsString(users);
System.out.println(s);
String s1 = mapper.writeValueAsString(usersList);
System.out.println(s1);
// json转换成对象
Users u1 = mapper.readValue(s, Users.class);
System.out.println(u1);
// json转换成集合对象
List<Users> list = mapper.readValue(s1, new TypeReference<List<Users>>() {});
System.out.println(list);
}
// google出品gson(了解,差不多用法)
// ali出品fastjson
// public static void fj(){
// // java对象
// Users users = new Users("1", "张三丰", "200", "男");
// // 集合对象
// List usersList = Arrays.asList(
// new Users("1", "zhangsan", "20", "男"),
// new Users("2", "lisi", "21", "男"),
// new Users("3", "wangwu", "22", "男"));
// // java对象转json
// String jsonString = JSON.toJSONString(users);
// System.out.println(jsonString);
// String string = JSON.toJSONString(usersList);
// System.out.println(string);
//
// // json转成java对象
// Users u = JSON.parseObject(jsonString, Users.class);
// System.out.println(u);
// List list = JSON.parseObject(string, new TypeReference>() {}.getType());
// System.out.println(list);
// }
// 手动转json
public static void sd(){
// 1. 手(sha)动(gua)解析
// java对象
Users users = new Users("1", "张三丰", "200", "男");
// 自(bie)己(ren)拼接
String jsonString = "{id:\""+users.getId()+"\", username:\""+users.getUsername()
+"\", age:\""+users.getAge()+"\", sex:\""+users.getSex()+"\"}";
System.out.println(jsonString);
// 集合对象
List<Users> usersList = Arrays.asList(
new Users("1", "zhangsan", "20", "男"),
new Users("2", "lisi", "21", "男"),
new Users("3", "wangwu", "22", "男"));
StringBuilder arrJsonString = new StringBuilder("[");
for (int i = 0; i < usersList.size(); i++) {
Users user = usersList.get(i);
arrJsonString.append("{id:\""+user.getId()+"\", username:\""+user.getUsername()
+"\", age:\""+user.getAge()+"\", sex:\""+user.getSex()+"\"}");
if (i != usersList.size() - 1){
arrJsonString.append(",");
}
}
arrJsonString.append("]");
System.out.println(arrJsonString.toString());
}
}
var jsonStr = ajaxReq.responseText;
//将json转换成JS对象
var goodsList = eval("("+jsonStr+")");
console.log(goodsList);