python自动化（二）前端基础：3.JavaScript基础
一.JavaScript简介
- JavaScript是一种脚本语言，可以在浏览器中直接运行。在传统的网站前端中我们一般使用HTML来搭建我们的页面骨架，使用CSS来渲染页面样式。这样页面的静态模式就基本定型了，而对于页面的动态行为则可以使用JavaScript来实现。
- HTML页面中引用JavaScript的两种方式：
- 外部引用：html文件中时使用script标签，这时script需要添加一个属性src，src中写js文件的路径。
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script src="ss.js"></script><!--引入js文件--> </head> <body> <div class="box">汉字 </div> </body> </html> - 内部引用：在html中需要使用
<script></script>标签中写js代码。在html内部写js时，script标签可以放在head中，可以放在body中，还可以放在body后.<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script>js代码</script> </head> <body> <div class="box">汉字 </div> </body> </html>
- 外部引用：html文件中时使用script标签，这时script需要添加一个属性src，src中写js文件的路径。
二.JavaScript基本使用
1.js基本语法
- js执行顺序，默认是顺序结构，是从上到下，从左到右执行
- js一般一行放一条语句，语句后结束标识是 “;” ,但是结束标识不强制写
- js中换行要求：没有换行要求，最标准的缩进是一个tab。
- js中 if选择/for循环/函数function 后面的语句块都是由 {} 包裹的
2.变量和常量
- 定义变量：
var 变量名（全局变量）let 变量名（局部变量）
- 定义常量：
const 常量名
- 变量名的命名规范：
- 组成：字母、数字、下划线、$
- 首字符不能是数字
- 不能使用关键字
- 建议使用驼峰命名法
- 使用变量或常量：
- 直接访问：变量名或常量名
- 重新赋值：常量不能被重新赋值。变量可以重新赋值，变量中只会保存最后一次赋值。
举例：
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>var aaa = 'aaa';//定义变量const bbb = 'bbb'; //定义常量alert(aaa);aaa = 'aaa2'; //重新赋值变量 </script>
</head>
<body>
<div class="box">
</div>
</body>
</html>
3.注释
- 第一种：单行注释： // 注释内容
- 第二种：多行注释： /* 中间注释内容 */
- 第三种：多行文本注释： /** 注释内容 */
4.基本数据类型
数字类型(int float) : 1,2,3 3.14
字符串类型(string) : 单引号或双引号引起来的字符，单引号双引号作用一样，没区别
布尔类型(bealoon): true(1) 表示真 false(0) 表示假
undefined类型(undefined)： 变量或对象的属性没有赋值时，默认值就是undefined
null类型(null):表示空
对象类型：
- 数组(array): 类似python中的List，定义方式 [1,‘a’,true]，通过下标访问元素
- 对象(object):类似python中的dict ，定义{“username”:“小明”,“age”:18}，通过键名访问
检查数据类型方法：typeof
- 注意：typeof 检测对象类型时，不管是数组还是对象，返回的都是Object
举例：
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>var a = 12; //定义数字类型var b = 'hehe'; //定义字符串类型var c = true; //定义布尔类型var d = [1,2,3]; //定义数组类型var e = {'name':'zhangsan','age':18} //定义对象类型alert(typeof (d)) //查询数据类型</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
5.输出方式：
- alert()：小括号中写变量或语句，窗口弹出
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>var a = 12; //定义数字类型alert(a) //实现窗口弹出</script>
</head>
<body>
<div class="box">
</div>
</body>
</html>
运行效果如下：
- console.log():在控制台输出 F12->console
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>var a = 12; //定义数字类型console.log(a) //实现控制台输出</script>
</head>
<body>
<div class="box">
</div>
</body>
</html>
运行结果如下：
6.运算符：
1.算数运算： +（加法）， -（减法）， *（乘法）， /（除法）， %（求余）。
2.关系运算： >（大于），>=（大于等于），<（小于），<=（小于等于）==（等于），===（等等于），!=（不等于），!==（不等等于）
===和==区别:
(1). ==是不判断数据类型： 1 == ‘1’ 返回值 true
(2). ===判断数据类型： 1 === ‘1’ 返回值 false
3.逻辑运算： &&(逻辑与) ||(逻辑或) !(逻辑非)。
注意：
- 没有and / or
- 逻辑与、逻辑或都会存在短路运算：
- 逻辑与 左边为false，右边不判断直接返回false，左边为true，返回值是右边
- 逻辑或 左边为true，右边不判断直接返回 true，左边为false，返回值是右边
4.赋值运算： =（等于），+=（加等于），-=（减等于）*=（乘等于），/=（除等于），%=（求余等于）++(自增)， --(自减)
++ 、 --用法：
用法1： 变量名++ ： 本次不改变，下次使用时改变
用法2： ++变量名 ： 先改变后使用，当次生效
5.parseInt() parseFloat()
- parseInt() ： 取小括号中整数部分
- parseFloat() : 取小括号中整数+小数部分
三.流程控制语句及操作元素
1.选择结构
- if
单分支：if(表达式){}
双分支：if(表达式){语句} else{语句}
多分支：if(表达式1){} else if(表达式2){} else{}
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>var a = 12;if(a==12){console.log('这是12哟')}else{console.log('这不是12哟')}</script>
</head>
<body>
<div class="box">
</div>
</body>
</html>
运行结果如下：
- switch
switch(表达式){
case 值: 语句块 ;break;
case 值2: 语句块； break；
default:语句（到前面的都匹配不到时，执行这条分支）
}
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>var a = 11;switch (a){case 10:console.log('这是12哟');break;case 12:console.log('这是10哟');break;default :console.log('都不是哟')}</script>
</head>
<body>
<div class="box">
</div>
</body>
</html>
运行结果如下：
2.循环结构
- 普通for循环：
for(表达式1;表达式2;表达式3){循环体}
表达式1：循环条件的初始值
表达式2：循环条件的终止值
表达式3：循环条件的步长
for(let i=0; i<3 ; i+=1){
}
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>for(let i=0;i<5;i++){console.log(i)}</script>
</head>
<body>
<div class="box">
</div>
</body>
</html>
运行结果如下：
- for-in循环：
for(let i in [1,2,3]){循环体}
# i对应数组的下标
- for-of循环
for(let i of [1,2,3]){循环体}
# i对应数组的子元素
- while循环
表达式1（确定初始值）
while(表达式2确定终值){
循环体;
表达式3（确定步长）
}
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>var i = 1;while (i<=5){console.log(i);i++;}</script>
</head>
<body>
<div class="box">
</div>
</body>
</html>
运行结果如下：
3.js选择器
- 选择器作用：找页面中的标签
选择器类型：
id选择器document.getElementById('id名')返回值：1个具体的标签元素
class选择器document.getElementsByClassName('class名');返回值：所有具有指定class名称的元素，是多个，以类数组形式存在，使用某一个元素时通过下标来获取
标签选择器document.getElmentsByTagName('标签名');返回值：所有指定标签的集合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="box">具有id的元素</div><div class="container">具有class类名的元素</div><p>p标签元素</p>
</body>
<script>//通过id获取元素var box = document.getElementById('box')console.log(box)//通过class类名获取元素var containers = document.getElementsByClassName('container')console.log(containers)// 通过标签获取元素var ps = document.getElementsByTagName('p')console.log(ps[0])
</script>
</html>
4.操作基本dom
- 1.获取标签中值
第一类：获取双标签中的值(div,span,p) .innerHTML 来获取第二类：获取input标签中的值()
.value 来获取
特殊的一个标签：
textarea 文本域：是双标签，但是获取他的值时使用.value属性
- 2.添加点击事件
事件：是一个具有某些功能的函数
点击事件：鼠标点击某个元素的时候触发的功能
添加点击事件方法：1.找到元素2.元素.onclick = function(){}
- 3.设置值
第一类：设置双标签的值元素.innerHTML = '新值'
第二类：设置input标签的值元素.value = '新值'
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="box">id为box的div</div>用户名：<input type="text" id="username" ><textarea name="" id="info" cols="30" rows="10"></textarea><button id="btn">点我</button>
</body>
<script>//找到标签var box = document.getElementById('box')// 获取标签中的值var box_content = box.innerHTMLconsole.log(box_content)// 获取Input标签var username = document.getElementById('username')var info = document.getElementById('info')var username_content = username.valueconsole.log(username_content)var btn = document.getElementById('btn')btn.onclick = function(){username_content = username.valueinfo_content = info.valueconsole.log(username_content,info_content)}// 设置值box.innerHTML = 'div标签中新的值'username.value = 'input标签中新的值'info.innerHTML = 'textarea文本域标签中新的值'
</script>
</html>
5.获取属性和修改属性值
属性有：id , class , name , src ,href , style1.获取属性元素.getAttribute('属性名')2.设置属性值元素.setAttribute('属性名','值')
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#box{font-size:20px;}</style>
</head>
<body><div id='box' class="content box2 box3" style='color:red'>div标签</div><a href="www.baidu.com">跳转到xx</a><img src="../day03/images/banner1.jpg" alt="">
</body>
<script>//获取属性值var box = document.getElementById('box')console.log(box.getAttribute('class'),box.getAttribute('id'))var Alla = document.getElementsByTagName('a')console.log(Alla[0].getAttribute('href'))var Allimg = document.getElementsByTagName('img')console.log(Allimg[0].getAttribute('src'))// 设置属性值Allimg[0].setAttribute('src','../day03/images/banner2.jpg')
</script>
</html>
6.获取和修改css样式
1.获取css样式第一类 行内样式： 元素.style.样式名称第二类 内部、外部样式： window.getComputedStyle(元素)['样式名称'] 2.设置css样式
元素.style.样式名 = 新值 注意：获取或设置 font-size 类型的样式时，需要变成驼峰命名法(fontSize)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#box{font-size:30px;}</style>
</head>
<body><div id="box" style="color:red">div容器</div>
</body>
<script>//找元素var box = document.getElementById('box')// 获取行内样式console.log(box.style.color)console.log(box.style.fontSize)// 获取内部样式表，外部样式中的样式console.log(window.getComputedStyle(box)['fontSize'])console.log(window.getComputedStyle(box)['color'])// 设置样式box.style.color = 'green'box.style.fontSize = '60px'
</script>
</html>
四.js对象的属性及方法
1.字符串对象
1.1 字符串长度
<script>var str = "Hello everyone"console.log(str.length)
</script>
结果：14
1.2 返回指定字符在字符串中的位置
indexOf(‘字符’,start) : 检测指定字符在字符串中是否存在，如果存在返回下标，如果不存在返回-1(不是python中的反向找下标，这的意思就是没有找到)，第二个参数：指定从哪个下标开始向后查询
<script>var str = "Hello everyone;Hello world"console.log(str.indexOf("e"))
</script>
结果：1
1.3 截取部分字符串
slice(start,end) 、substr(start,length) 、substring(start,end):字符串截取，返回新字符串，不改变原字符串
<script>var str = "Hello everyone;Hello world"console.log(str.slice(15,26))
</script>
结果：Hello world
1.4 分割字符串
split(‘分割规则’) : 字符串分割,分割后返回数组(列表)
<script>var str = "Hello everyone;Hello world"console.log(str.split(";"))
</script>
结果：["Hello everyone", "Hello world"]1.5 字符串替换
replace(old,new) : 字符串替换
<script>var str = "Hello everyone;Hello world"console.log(str.replace("Hello","你好"))
</script>
结果：你好 everyone;Hello world-------注意，只会替换第一个
<script>var str = "Hello everyone;Hello world"console.log(str.replace(/Hello/g,"你好"))
</script>
结果：你好 everyone;你好 world------全局替换
1.6 字符串匹配
match(‘字符’) : 字符串匹配,返回数组
<script>var str = "Hello everyone;Hello world"console.log(str.match("Hello"))
</script>
结果：["Hello", index: 0, input: "Hello everyone;Hello world", groups: undefined]---返回一个列表
1.7 trim() : 去除字符串左右空白
<script>var str = " Hello everyone;Hello world "console.log(str.trim())
</script>
结果：Hello everyone;Hello world
1.8 字符串转成大/小写
<script>var str = " Hello everyone;Hello world "console.log(str.toLowerCase())console.log(str.toUpperCase())
</script>
结果： hello everyone;hello world HELLO EVERYONE;HELLO WORLD
1.9 字符串练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="text" id="username"><br><input type="password" id="userpwd"><br><button id="btn">登录</button>
</body>
<script>/*** 1.点击登录按钮，获取用户输入信息，组成这样的字符串 * key=value&key=value** 2.找指定的cookie值 ： 查找ORIGIN对应的值* cookie字符串："BAIDUID=6848B473EF50AE27A9B71CABEFCA49B2:FG=1; BIDUPSID=6848B473EF50AE27A9B71CABEFCA49B2; PSTM=1520569296; BD_UPN=12314353; MCITY=-%3A; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; FP_UID=d725dde8a25ece7393c40192702ca6ef; BD_HOME=0; ORIGIN=2; BDRCVFR[uZj3G_6bTl0]=mk3SLVN4HKm; BD_CK_SAM=1; PSINO=1; pgv_pvi=2502878208; pgv_si=s6538584064; H_PS_PSSID=26748_1436_26432_21080_26350_22158"* * 3.把手机号中间4位换成*号* 如：13900264678 -> 139****4678*/// 第一个：组成字符串 + 字符串拼接var btn = document.getElementById('btn')var username = document.getElementById('username')var userpwd = document.getElementById('userpwd')btn.onclick = function(){var username_val = username.valuevar userpwd_val = userpwd.valuevar str = ''str = 'username='+username_val+'&'+'upwd='+userpwd_valconsole.log(str)}// 第二题var cookie = "BAIDUID=6848B473EF50AE27A9B71CABEFCA49B2:FG=1; BIDUPSID=6848B473EF50AE27A9B71CABEFCA49B2; PSTM=1520569296; BD_UPN=12314353; MCITY=-%3A; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; FP_UID=d725dde8a25ece7393c40192702ca6ef; BD_HOME=0; ORIGIN=fwfji0uwtgtsh; BDRCVFR[uZj3G_6bTl0]=mk3SLVN4HKm; BD_CK_SAM=1; PSINO=1; pgv_pvi=2502878208; pgv_si=s6538584064; H_PS_PSSID=26748_1436_26432_21080_26350_22158"// 第一种做法：字符串截取 ，需要下标：1个下标是ORIGIN后=的下标，还有1个是ORIGIN后的分号下标// var Oindex = cookie.indexOf('ORIGIN')// var firstindex = Oindex+'ORIGIN'.length+1// var secondindex = cookie.indexOf(';',firstindex)// var val = cookie.slice(firstindex,secondindex)// console.log(val)//第二种方式：字符串分割var arr = cookie.split(';')for(var i=0; i<arr.length; i++){var arr2 = arr[i].split('=')if(arr2[0].trim()=='ORIGIN'){console.log(arr2[1])}}//3.手机号var phonenumber = '13900264678'//第一种方法：字符串截取var newphonenum = phonenumber.slice(0,3)+'****'+phonenumber.slice(7)console.log(newphonenum)//第二种方法：字符串替换var newphonenum2 = phonenumber.replace(/^(\d{3})\d{4}(\d+)/,'$1****$2')console.log(newphonenum2)
</script>
</html>
2.数组对象（列表）
2.1 获取数组长度
数组.length
2.2 添加元素到数组
头部添加：unshift() 返回值是数组的新长度，改变原数组
<script>var list0 = [1,2,3,"s","sw"]var list1 = list0.unshift("naoko")console.log(list1)console.log(list0)
</script>
结果:6(6) ["naoko", 1, 2, 3, "s", "sw"]
尾部添加：push() 返回值是数组的新长度，改变原数组
<script>var list0 = [1,2,3,"s","sw"]var list1 = list0.push("naoko")console.log(list1)console.log(list0)
</script>
结果：6(6) [1, 2, 3, "s", "sw", "naoko"]
2.3删除数组中的元素
头部删除：shift() 返回值是被删除的元素,改变原数组
<script>var list0 = ["one",2,3,"s","sw"]var list1 = list0.shift()console.log(list1)console.log(list0)
</script>
结果：
one
(4) [2, 3, "s", "sw"]
尾部删除：pop() 返回值是被删除的元素,改变原数组
<script>var list0 = ["one",2,3,"s","sw"]var list1 = list0.pop()console.log(list1)console.log(list0)
</script>
结果：
sw
(4) ["one", 2, 3, "s"]
2.4 修改数组中的元素
修改： splice(start,len,el,el…) 执行时分两步，第一步删除(会删除从指定位置开始的指定长度)，第二步添加功能(len后的el是添加的元素，每个元素之间用逗号隔开)。返回被修改的元素组成的新数组，改变原数组
<script>var list0 = ["one",2,3,"s","sw"]var list1 = list0.splice(1,3,"two","three","four")console.log(list1)console.log(list0)
</script>
结果：
(3) [2, 3, "s"]
(5) ["one", "two", "three", "four", "sw"]
2.5 截取数组
截取： slice(start,end) 返回新数组，不会改变原数组，end是取不到的
<script>var list0 = ["one",2,3,"s","sw"]var list1 = list0.slice(1,3)console.log(list1)console.log(list0)
</script>
结果：
(2) [2, 3]
(5) ["one", 2, 3, "s", "sw"]
2.6 拼接数组元素为字符串
把数组按某种规则转成字符串：join(‘规则’)
<script>var list0 = ["one",2,3,"s","sw"]var list1 = list0.join("@")console.log(list1)console.log(list0)
</script>
结果：
one@2@3@s@sw
(5) ["one", 2, 3, "s", "sw"]
2.7 检测指定字符串在数组中的
检测指定字符在数组中是否存在：indexOf()
<script>var list0 = ["one",2,3,"s","sw"]var list1 = list0.indexOf("sw")console.log(list1)console.log(list0)
</script>
结果：
4
(5) ["one", 2, 3, "s", "sw"]
2.8 数组遍历：
1.普通for循环
for(var i=0; i<arr.length; i++){i 对应下标arr[i] 对应数组中的元素
}
2.for-in
for(var i in arr){i 对应元素
}
3. 字典对象
3.1 字典简介
定义对象： var obj = {}
对象中的数据形式：
{
key:value,
key:value
}
对象中的key具有唯一性，如果给已经存在的key赋值，这时是更新功能;如果对象中没有这个key，这时对象中新添加一个key:value键值对
key一定要是不可变元素
value可以是任意数据类型
3.2 字典长度
长度：Object.keys(对象).length
<script>var book = {bookname:"python入门",author:"xbd",cbs:"人民出版社",price:"39.9"}var iss = Object.keys(book).lengthconsole.log(iss)
</script>
结果：4
3.3 获取字典元素
访问数据：
1.访问某一个：对象.key 或者 对象[‘key’]
如果存在key，返回对应的值
如果不存在key，返回undefined
<script>var book = {bookname:"python入门",author:"xbd",cbs:"人民出版社",price:"39.9"}var iss =book["bookname"]console.log(iss)
</script>
结果：
python入门
3.3 遍历字典元素
遍历:for-in-----i对应键名
<script>var book = {bookname:"python入门",author:"xbd",cbs:"人民出版社",price:"39.9"}for(i in book){console.log(i)console.log(book[i])}
</script>
结果：
bookname
python入门
author
xbd
cbs
人民出版社
price
39.9
4.函数
4.函数
定义函数：
1. function 函数名(形参列表){功能体return 可以有，也可以没有}2. var 变量名 = function(){功能体}调用函数：函数名(实参列表)
和python中不一样的：
形参和实参个数要求：在python中少传参数报错，在js中少传参数没问题(没有参数的地方自动接收undefined)
js中只有简单的传参，python中的高级传参方式都没有；
js中可以给形参默认值
js函数中有一个特殊的关键字，作用是获取函数调用时传入的所有实参 arguments
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>//定义函数function aaa(ss,bb){console.log(ss);console.log(bb)}//调用函数aaa(123,456)</script>
</head>
<body><div class="box">我是div</div><input id="asds" value="我是input">
</body>
</html>
运行结果如下：
5. 随机数
Math.random() 返回随机数 [0,1) ,没参数
function randomNumber(m,n){// 产生两个指定数之间的随机： Math.random()*(n-m+1) + m return Math.floor(m + Math.random()*(n-m+1))}
Math.floor() 向下取整 ，没有参数
Math.ceil() 向上取整 ，没有参数
Math.round() 四舍五入
Math.max() 最大值 ，可以接收多个参数，然后判断出最大值
Math.min() 最小值 ，可以接收多个参数，然后判断出最小值
Math.PI() π ，没参数
6.时间
2.时间
js时间是由 Date() 构造函数生成的，使用时需要通过 new 关键字创建
new Date() 当前时间—括号内可以加一个时间戳，如果不加就默认是现在的时间戳
<script>var time = new Date()console.log(time)
</script>
结果：
Sat Aug 08 2020 19:47:22 GMT+0800 (中国标准时间)
可以通过它的方法取到里面的每一个独立项
获取年份：new Date().getFullYear()
获取月份：getMonth() 0~11
获取日期：getDate() 1~31
获取星期：getDay() 0~6
获取小时：getHours() 0~23
获取分钟：getMunites() 0~59
获取秒数：getSeconds() 0~59
时间戳：getTime() 毫秒数
世界时：toGMTString() /toUTCString()
转换本地时间：toLocalString()
7. 定时器
定时器的时间是毫秒单位
1.间隔定时器
每隔一段时间就执行定时器的功能var time1 = setInterval(funciton,time)关闭间隔定时器：
clearInterval(time1)
var time1 = setInterval(function(){console.log(new Date())},1000)var btn1 = document.getElementById('btn1')bnt1.onclick = function(){clearInterval(time1)}
2.延时定时器
等待指定的时间，然后执行唯一一次功能var time2 = setTimeout(function,time)关闭延时定时器：
clearTimeout(time2)
var time2 = setTimeout(function(){console.log('炸弹爆炸')},10000)var bnt2 = document.getElementById('bnt2')bnt2.onclick = function(){clearTimeout(time2)}
案例：秒杀倒计时
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.box{margin: 100px auto;border: 3px solid red;width: 200px;clear: both;height: 50px;}.box2 p{display: inline-block;height: 50px;text-align: center;vertical-align: middle;}#hour{width: 50px;background-color: antiquewhite;border: 1px solid black;font-size: 30px;}.maohao{font-size: 30px;}#munite{width: 50px;background-color: antiquewhite;border: 1px solid black;font-size: 30px;}#second{width: 50px;background-color: antiquewhite;border: 1px solid black;font-size: 30px;}.box2{text-align: center;}</style>
</head>
<body><div class="box"><div class="box2"><p id="hour"></p><p class="maohao">:</p><p id="munite"></p><p class="maohao">:</p><p id="second"></p></div></div>
</body>
<script>function sjc(){var time1 = new Date("2020-8-9 12:00:00").getTime()var time2 = new Date().getTime()var cha = time1 - time2return cha}function hour0(){var cha = sjc()var hour0 = Math.floor(cha/(1000*60*60))return hour0}function munite0(){var cha = sjc()var munite0 = Math.floor((cha/(1000*60))%60)return munite0}function second0(){var cha = sjc()var second0 = Math.floor((cha/1000)%60)return second0}function sxian(){var hour = document.getElementById("hour")hour.innerHTML = hour0()var munite = document.getElementById("munite")munite.innerHTML = munite0()var second = document.getElementById("second")second.innerHTML = second0()}sxian()setInterval(sxian,1000)
</script>
</html><!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.box{margin: 100px auto;border: 3px solid red;width: 200px;clear: both;height: 50px;}.box2 p{display: inline-block;height: 50px;text-align: center;vertical-align: middle;}#hour{width: 50px;background-color: antiquewhite;border: 1px solid black;font-size: 30px;}.maohao{font-size: 30px;}#munite{width: 50px;background-color: antiquewhite;border: 1px solid black;font-size: 30px;}#second{width: 50px;background-color: antiquewhite;border: 1px solid black;font-size: 30px;}.box2{text-align: center;}</style>
</head>
<body><div class="box"><div class="box2"><p id="hour"></p><p class="maohao">:</p><p id="munite"></p><p class="maohao">:</p><p id="second"></p></div></div>
</body>
<script>function sjc(){var time1 = new Date("2020-8-9 12:00:00").getTime()var time2 = new Date().getTime()var cha = time1 - time2return cha}function hour0(){var cha = sjc()var hour0 = Math.floor(cha/(1000*60*60))return hour0}function munite0(){var cha = sjc()var munite0 = Math.floor((cha/(1000*60))%60)return munite0}function second0(){var cha = sjc()var second0 = Math.floor((cha/1000)%60)return second0}function sxian(){var hour = document.getElementById("hour")hour.innerHTML = hour0()var munite = document.getElementById("munite")munite.innerHTML = munite0()var second = document.getElementById("second")second.innerHTML = second0()}sxian()setInterval(sxian,1000)
</script>
</html>
8.DOM增删改查
8.1 DOM简介
DOM ： document object model ,主要操作的就是页面结构，DOM把页面当成一个结构树(tree)，结构树是由节点(标签)组成的
DOM树的根： document->document type + html |head + body| |title+meta+link+script div+div+div+div
操作DOM就是对DOM树中的节点(标签)进行操作已经学过：操作单个DOM的 内容的获取和设置 ， 属性的获取和设置 ，样式的获取和设置
内容的获取和设置 ：
获取：1.双标签(div) ： innerHTML2.input : value设置：1.双标签 :innerHTML = 新值2.input ：value = 新值
属性的获取和设置：获取：getAttribute('属性名称')设置：setAttribute('属性名称','新值');
样式的获取和设置：获取：行内：元素.style.属性名内部、外部样式： window.getComputedStyle('元素')['属性名']设置：元素.style.属性名 =新值
8.2 增加
增加：向DOM中添加新的标签
第一步：创建新标签
1.标签节点：document.createElement(‘标签名’)
2.内容节点：document.createTextNode(‘内容’)
第二步：添加到页面
1.添加到指定父级的最后： 父级.appendChild(‘新标签’)
2.添加到指定父级的指定位置: 父级.insertBefore(‘新标签’,‘要插入到这个标签前’)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="box"><span id="old">原来的标签</span></div>
</body>
<script>//创建新标签var objp = document.createElement('p')//创建文本节点var objp_con = document.createTextNode('新创建的p标签中的内容')//把文本节点放入标签objp.appendChild(objp_con)//添加到页面var box = document.getElementById('box')// box.appendChild(objp)//添加到指定位置var old = document.getElementById('old')box.insertBefore(objp,old)//创建一个标签var oDiv = document.createElement('div')//设置id属性和class属性oDiv.id = 'container'oDiv.className = 'slide'//设置样式oDiv.style.height='400px'oDiv.style.width ='300px'oDiv.style.border = '1px solid red'//设置内容oDiv.innerHTML = '创建的div内容'box.appendChild(oDiv)
</script>
</html>
运行结果如下：
新创建的标签是一个完整的DOM，所以可以给新创建的标签进行属性和样式、内容操作
新创建标签操作：
内容操作：双标签的.innerHTML
input.value
属性操作：标签.属性名=属性值
样式操作：标签.style.样式名称 = 值
增加的另外一种方案：
字符串方法：具体某个元素中要添加的内容，使用innerHTML形式，添加指定字符串。
字符串方法和创建标签法的区别：
1.创建标签法创建的是DOM元素 ;字符串方式创建的是普通字符串,不具备DOM操作功能
2.创建标签可以决定标签添加到那个位置，不删除原来的元素; 字符串方式把父级标签中所有元素删除，然后再添加字符串
8.3 删除
从DOM中删除某一个节点
元素.removeChild('要删除的节点')
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><div id="box"><span>01</span><span>02</span><span id="three">03</span></div>
</body>
<script>var box = document.getElementById("box")var three = document.getElementById("three")box.removeChild(three)
</script>
</html>
8.4 修改(替换)
把原来的节点换成新节点
父元素.replaceChild('新节点','旧节点')
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><div id="box"><span>01</span><span>02</span><span id="three">03</span></div>
</body>
<script>var box = document.getElementById("box")var three = document.getElementById("three")//创建一个p标签var op = document.createElement("p")op.innerHTML = "新标签"box.replaceChild(op,three)
</script>
</html>
8.5 查询
前面学过id选择器、class选择器、标签选择器：他们的作用是查找到某一个或某一类标签元素
今天学习几个快速查询节点的方式：查询第一个子节点：父元素.firstChild查询最后一个子节点：父元素.lastChild查询当前元素的下一个节点：元素.nextSibling查询当前元素的上一个节点：元素.previousSibling查询当前元素的父节点：元素.parentNode查询所有子级节点：父元素.children查询当前元素是否有子节点：元素.hasChildNodes()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div>哥哥</div><div id="box"><ul id="list"><li>第一个Li</li><li>第二个Li</li><li>第三个Li</li></ul><p>普通文本</p></div><div id="borther">弟弟</div>
</body>
<script>var box = document.getElementById('box')var borther = document.getElementById('borther')//查询第一个子节点console.log(box.firstChild)//查询最后一个子节点console.log(box.lastChild)//查询上一个兄弟节点console.log(box.previousSibling)//查询下一个兄弟节点console.log(box.nextSibling)//查询所有子节点console.log(box.children)//查询父节点console.log(box.parentNode)//判断是否有子节点console.log(box.hasChildNodes())console.log(borther.hasChildNodes())
</script>
</html>
9. js事件响应
9.1 事件类型
9.1.1 鼠标事件
单击事件：click
<script>var btn = document.getElementById("btn")btn.onclick = function(){console.log("这是点击事件")}
</script>
双击事件：dblclick
<script>var btn = document.getElementById("btn")btn.ondblclick = function(){console.log("这是双击事件")}
</script>
鼠标经过事件： mouseover 会事件冒泡
<script>var btn = document.getElementById("btn")btn.onmouseover = function(){console.log("这是xx事件")}
</script>
鼠标离开事件： mouseout (会事件冒泡) / mouseleave (不会事件冒泡)
<script>var btn = document.getElementById("btn")btn.onmouseout = function(){console.log("这是xx事件")}
</script>
鼠标进入事件： mouseenter 不会事件冒泡
<script>var btn = document.getElementById("btn")btn.onmouseenter = function(){console.log("这是xx事件")}
</script>
hover事件：有两个过程，鼠标进入时执行鼠标进入事件，鼠标离开时执行鼠标离开事件
鼠标移动事件： mousemove
鼠标按下事件： mousedown
鼠标抬起事件： mouseup
鼠标事件练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#list{border: 1px solid red;}.more{display: none;}.cha_more{border: 1px solid #000;}</style>
</head>
<body><div><ul id="list"><li><span>Java开发工程师（中、高）</span><div class="cha_more">更多<div class="more"><p>技能要求：javaee、javase</p><p>工作经验：5年</p><p>工作地址：北京</p><p>薪资：30K</p></div></div></li><li><span>Java开发工程师（中、高）</span><div class="cha_more">更多<div class="more"><p>技能要求：javaee、javase</p><p>工作经验：5年</p><p>工作地址：北京</p><p>薪资：30K</p></div></div></li><li><span>Java开发工程师（中、高）</span><div class="cha_more">更多<div class="more"><p>技能要求：javaee、javase</p><p>工作经验：5年</p><p>工作地址：北京</p><p>薪资：30K</p></div></div></li></ul></div>
</body>
<script>var cha_more = document.getElementsByClassName('cha_more')var more = document.getElementsByClassName('more')var list = document.getElementById('list')for(let i=0; i<cha_more.length ; i++){cha_more[i].onmouseenter = function(){more[i].style.display = 'block'}cha_more[i].onmouseleave = function(){more[i].style.display = 'none'}}
</script>
</html>
9.1.2 键盘事件
键盘按下事件： keydown
键盘抬起事件： keyup
键盘长按事件： keypress
<script>document.onkeydown = function(){console.log("鼠标按下")}document.onkeyup = function(){console.log("鼠标抬起")}document.onkeypress = function(){console.log("鼠标长按")}
</script>
9.1.3 表单事件
获取焦点事件： focus元素.onfocus = function(){} 元素获取到焦点后执行的功能元素.focus() 让元素获取焦点
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><input type="text" id="search_con"><button id="btn">点我</button>
</body>
<script>//当页面加载完毕后执行window.onload = function(){ var search_con = document.getElementById("search_con")search_con.focus()}
</script>
</html>
运行结果如下：
失去焦点事件： blur
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="text" id="search_con"><span class="err"></span><button>点我</button>
</body>
<script>var search_con = document.getElementById('search_con')var err = document.getElementsByClassName('err')[0]window.onload = function(){}var arr = [{uname:'小明'},{uname:'小红'},{uname:'小白'}]// 鼠标失去焦点事件search_con.onblur = function(){var search_con_val = search_con.valuevar srt = ''for(var i=0; i<arr.length ; i++){if(arr[i]['uname'] == search_con_val){str = '用户名已重复，不能使用'err.innerHTML = strbreak;}}}
</script>
</html>
运行结果如下：
提交事件： submit
4.事件冒泡
事件冒泡：从当前触发元素开始，向上级触发具有相同事件类型的事件，直到document，的过程
9.2 绑定事件的方法
绑定事件的方法
1.DOM0级绑定事件：元素.on+事件类型 = function(){}取消事件：元素.on+事件类型 = null DOM0级给同一个元素绑定相同的事件，只会执行后面定义事件的功能函数
2.DOM2级
绑定事件： 元素.addEventListener('事件类型',fn)
取消事件： 元素.removeEventListener('事件类型',fn) DOM2级绑定事件：同一个元素可以绑定多个相同的事件，多个事件的功能函数都会执行
取消绑定时需要指定取消的功能函数，要求函数是具名函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="box">点击我</div>
</body>
<script>// DOM0级var box = document.getElementById('box')box.onclick = function(){console.log('点击事件')}// 取消绑定的DOM0级点击事件box.onclick = null// DOM2级绑定事件box.addEventListener('click',function(){console.log('点击事件，DOM2级的')})box.addEventListener('click',otherclick)function otherclick(){console.log('DOM2级，另一个点击事件')}//取消DOM2级事件box.removeEventListener('click',otherclick)
</script>
</html>
9.3事件对象
事件对象：
事件在被触发时，都会生成一个事件对象，这个事件对象中保存所有和当前事件有关的信息
event 事件对象
事件对象经常在事件触发函数中当形参传递到函数内部
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><div id="hhh">点我</div>
</body>
<script>var haha = document.getElementById("hhh")haha.addEventListener("click",function(event){console.log(event)})
</script>
</html>
运行结果如下：
比较常用的几个信息：
target:触发元素
type: 什么类型的触发
keyCode: 键盘事件下的按键keyCode值
x,y坐标信息：
offsetX , offsetY : 相对于当前容器左上角的x,y坐标
clientX , clientY : 相对于可视窗口左上角的x,y坐标
拖拽案例练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#box{position: absolute;top:100px;left: 50px;width: 300px;height: 260px;background-color: skyblue;border: 1px solid #000;}</style>
</head>
<body><div id="box"></div>
</body>
<script>var box = document.getElementById('box')box.onmousedown = function(e){var cliX = e.clientX - box.offsetLeftvar cliY = e.clientY - box.offsetTopdocument.onmousemove = function(e){var newcliX = e.clientXvar newcliY = e.clientY//计算鼠标移动差值var chaX = newcliX - cliXvar chaY = newcliY - cliYbox.style.top = chaY + 'px'box.style.left = chaX + 'px'}}document.onmouseup = function(){document.onmousemove = null}
</script>
</html>
9.4 事件委托
事件委托
事件委托是把事件定义在它父级或祖先级元素上，真正触发这个事件执行是我们原来想定义事件的元素。
使用事件委托的场景：页面中通过js新创建的元素，可以使用事件委托绑定事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id='box'>box</div>
</body>
<script>var box = document.getElementById('box')var str = '<p class="more">查看更多</p><span class="con">span内容</span>'//给class为 more 的 p标签添加事件-> 可以使用事件委托，先把事件添加到box上box.onclick = function(e){if(e.target.className == 'more'){console.log('查看更多')}}box.innerHTML = str
</script>
</html>
9.5 滚动事件
滚动事件 scroll
1.作用整个页面
当页面发生上下滚动时，浏览器会触发一个滚动事件,发生滚动事件时可以获取到滚动高度和距离左边的滚动距离
滚动高度： scrollTop
滚动距左边距离： scrollLeft
这两个属性是可以读取可以设置
window.onscroll = function(){
//获取页面滚动高度（两种方式）
document.documentElement.scrollTop
document.body.scrollTop
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>body{height: 2000px;width: 4000px;}#box{width:200px;height: 200px;border: 1px solid #000;overflow:scroll;}#toTop{position: fixed;bottom: 30px;right: 50px;}</style>
</head>
<body>body<div id='box' >滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素滚动元素</div><button id="toTop">返回顶部</button>
</body>
<script>// 获取页面的滚动距离window.onscroll = function(){//读取高度和距左边距离// var sTop = document.documentElement.scrollTop || document.body.scrollTop// var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft// console.log('滚动高度：'+ sTop)// console.log('滚动距左边距离：'+ sLeft)// 设置高度和距左边距离// document.documentElement.scrollTop = 300// document.body.scrollTop = 300}var box = document.getElementById('box')box.onscroll = function(){console.log(box.scrollTop)}var toTop = document.getElementById('toTop')toTop.onclick = function(){var nowsTop = document.documentElement.scrollTopvar timer = setInterval(function(){nowsTop -= 20if(nowsTop<=0){nowsTop = 0clearInterval(timer)}document.documentElement.scrollTop = nowsTop},10)}
</script>
</html>
2.作用于某一个具体的元素
这个元素必须设置属性 overflow:scroll，才能出现滚动条
获取滚动距离:
元素.scrollTop
元素.scrollLeft
10.jquery库
jQuery的选择器
jquery
jQuery是js的一个类库，主要封装的是js中DOM操作部分，使用和原生js一样。
1.需要先引入页面才能使用
<script src='jquery.js'></script>
2.基本用法：
起点是从获取DOM元素开始
获取方法：$()
小括号中写：
id选择器 $("#id名")class 选择器 $(".class名")元素选择 $("标签名")子级选择器 $("父级>子级")后代选择器 $("父级 子级")
jquery封装的选择器：
基本：
:even 偶数下标，奇数行
:odd 奇数下标，偶数行
:lt(index) 小于多少
:gt(index) 大于多少
:eq(index) 选择兄弟排名中的第几个
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="box"><ul class="list"><li><a href=""><span>1</span></a></li><li><a href=""><span>2</span></a></li><li><a href=""><span>3</span></a></li><li><a href=""><span>4</span></a></li></ul><ul class="list"><li><a href=""><span>1</span></a></li><li><a href=""><span>2</span></a></li><li><a href=""><span>3</span></a></li><li><a href=""><span>4</span></a></li></ul></div>
</body>
<script src="libs/jquery-1.12.3.min.js"></script>
<script>// id选择器var box = $("#box")// console.log(box)// class选择器var lists = $(".list")// console.log(lists) //标签选取var allLi = $("li:gt(2)")// console.log(allLi)// 子级选择器var firstListLi = $(".list:eq(0)>li:eq(3)")console.log(firstListLi)// 后代选择器var allSpan = $(".list:eq(1) span")// console.log(allSpan)
</script>
</html>
表单：
:text 找所有type=‘text’ 的input标签
:radio type=‘radio’ 的单选按钮
:checkbox type=‘chechbox’ 的多选按钮
:checked 被选中的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="radio" name="sex" value="1"> 男<input type="radio" name="sex" value="2"> 女<button id='btn'>提交</button>
</body>
<script src="libs/jquery-1.12.3.min.js"></script>
<script>$("#btn").click(function(){console.log($(":radio:checked").val())})
</script>
</html>
jquery操作元素
3.操作元素的内容、属性、样式
操作内容：
获取：
1.双标签(div)内容 : html()
2.input ： val()
设置：
1.双标签 : html(‘新内容’)
2.input ： val(‘新内容’)
操作属性：
获取： attr(‘属性名’)
设置： attr(‘属性名’,‘新的值’)
样式操作：
获取：css(‘样式名’)
设置：css(‘样式名’,‘新的值’)
css({
“样式名1”：“新的值”,
“样式名2”：“新的值”
})
额外封装的:
css类操作：
addClass() :添加类名
removeClass() : 删除类名
toggleClass() : 切换类名
尺寸操作：
height() ：高度
width() :宽度
scrollTop() :滚动高度
scrollLeft() :滚动距左边距离
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div>div的内容</div><input type="text" value="input标签的值"><button>点我</button>
</body>
<script src="libs/jquery-1.12.3.min.js"></script>
<script>//获取内容console.log($("div:eq(0)").html())console.log($("input:eq(0)").val())//设置内容$('div:eq(0)').html('新的值')$("input:eq(0)").val('input新的值')//设置属性$("div:eq(0)").attr('id','box').attr('class','content')//获取属性console.log($("div:eq(0)").attr('id'))// 获取样式console.log($("div:eq(0)").css('fontSize'))// 设置样式$("div:eq(0)").css('color','red').css('fontSize','30px')$("div:eq(0)").css({'border':'1px solid #000',"background-color":'skyblue',"margin":"10px auto","height":"400px","width":300,"padding":"20px"})// 添加类名$("div:eq(0)").addClass('box2')//移除类名$("div:eq(0)").removeClass('content')//切换类名$("button").click(function(){$("div:eq(0)").toggleClass('box4')})
</script>
</html>
绑定事件
4.绑定事件0
$().事件名(function(){ 功能 })
事件名：鼠标事件、键盘事件、表单事件
事件委托： $().on(‘事件名’,‘target’,function(){ 功能 })
额外：
one() ：绑定的事件只会执行一次
5.DOM的增删改查
增：
创建元素：(′标签′)如：('标签') 如：(′标签′)如：("
"+news.title+"
- ")
添加到页面:
尾部添加：父级.append(子级)子级.appendTo(父级)指定位置添加：父级.prepend(子级)子级.prependTo(父级)删除：empty() : 元素.empty() 删除指定元素中所有子级元素remove() ： 元素.remove() 指定的元素被删除 改：
replaceWith()
replaceAll() 查：
父级关系： parent()
祖先级关系： parents(val)
子级关系： children()
后代关系： find(val) 这个里面必须有参数
兄弟关系：
上一个兄弟： prev()
上面所有的兄弟：prevall()
下一个兄弟：next()
下面所有的兄弟：nextall() 所有兄弟：siblings()
筛选：
eq() 兄弟中的第几个
first() 第一个
last() 最后一个
is() 验证作用this 和 $(this)
this是原生js中的关键字
$(this)是jQuery的关键字
他们的作用是一样的，作用时指向事件触发者11.jQuery动画特效
动画
1.显示隐藏
show([speed,easing,fn]) speed:毫秒单位的时间值
hide([speed,easing,fn])
用法：元素.show() /元素.hide()2.滑动
slideDown([speed,easing,fn]) 向下滑动，显示
slideUp() 向上滑动，隐藏
slideToggle() 滑动切换3.stop()方法
停止所有在指定元素上正在运行的动画
stop(clearQueue,gotoEnd)
这个两个参数可选值是布尔值
stop(false,false) : 不清空动画队列，不立即跳到动画最后
stop(true,true) : 清空动画队列 , 立即跳到动画最后
stop(false,true) : 不清空动画队列,立即跳到动画最后
stop(true,false) : 清空动画队列 ,不立即跳到动画最后4.淡入淡出
fadeIn() : 淡入
fadeOut() : 淡出
fadeToggle(): 切换
fadeTo(opacity) : 淡出到指定透明度 opacity [0,1] 影响全局透明度淡入淡出轮播图(使用绝对定位法)5.index()方法
6.animate()
高级动画，animate(options,[speed,easing,fn])
options:可以动画的属性有哪些
不能动画：背景
几乎带px单位的都可以动画
接收参数时是字典形式的
animate({
width:40,
height:100
})7.delay(speed)
动画延时多长时间后执行12._Ajax异步网络请求
请求数据(前后台数据交互)
1.form表单
点击提交(type=‘submit’)时，form表单会自动把name属性值作为键名，value属性值作为键值，组成键值对形式，然后form表单会按指定的method方式吧数据发送到指定的url路径去
method提交方式：get:数据会显示在地址栏，显示的形式是url?数据数据是键值对形式存在，多个键值对之间使用&符号连接? 号最多出现一次，& 可以出现多次post:数据不在地址栏中显示，可以在network监听工具中监听,在请求头中数据中不会出现? 和 & 符号正常情况下是看不到这个数据的2.ajax
jquery中的ajax
$.ajax({
url:‘地址’,
type:‘get/post’,
data:{},
dataType:‘json/jsonp’,
success:function(res){
//请求成功，接收返回值
}
})注意：ajax不能跨域请求 两个网址： 协议 、 主域名 、 端口号 完全相同时，这是两个网址是同源的如果 协议、主域名、端口号 有任意区别，这两个网址就是跨域的解决跨域：1.jsonp : 在$.ajax({dataType:'jsonp'})，需要后台支持jsonp形式2.cors : 需要后台配合3.后台设置允许所有或指定网址能直接访问简写形式：$.get(url,data,function(res){})$.post(url,data,function(res){})2.把请求的数据添加到页面
创建标签，把数据填充到标签中，把标签添加到页面
python自动化（二）前端基础：3.JavaScript基础相关推荐
- web前端知识集合——javascript基础篇之常量和变量（二）
3. 变量和常量: 1.1 变量的声明: js三种方式声明变量,声明不赋值时,默认值为underfined. (1)var声明:var name='Ace',同时声明多个变量var a=1,b=2,c ...
- web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
- 前端网页三剑客------JavaScript基础
前端网页三剑客------JavaScript基础 一.基础语法 1.引入方式行内JS:在标签内部编写JS代码,配合事件使用.<input type="button" val ...
- 前端基础：html基础(css基础和JavaScript基础)/01/B/S网络结构，html文件结构，html标签格式，lt;bodygt;中的一些常用标记
前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...
- javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程（上）
阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到. 本篇文章成哥继续带大家来学习前端教程之JavaScript,网页的动态事件基本上都是靠它来实现的.下面我们就一起来学习内容吧! 01 Ja ...
- 前端学习 之 JavaScript基础
一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
- [最完整的前端学习手册]——JavaScript基础一：
一.JS初识 1.JavaScript一种直译式脚本语言: 2.组成部分: (1)ECMAScript语法和基本对象 (2)文档对象模型(DOM)处理网页内容的方法和接口 (3)浏览器对象模型(BOM ...
- 前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
- 3.前端笔记之JavaScript基础
作者:刘耀 部分内容参考一下链接 参考: http://www.cnblogs.com/wupeiqi/articles/5369773.htmlhttp://javascript.ruanyifen ...
- 前端开发之JavaScript基础篇四
主要内容: 1.定时器 2.正则表达式入门 3.元字符 4.正则表达式实战运用 一.定时器 javaScript里主要使用两种定时器,分别是:setInterval()和setTimeout(). 1 ...
最新文章
- 精确哈克，以贪婪为基础的欺诈式引流法
- 4.Spring Security 添加图形验证码
- Failed to load JavaHL Library（windows和mac）
- PHP之preg_replace()与ereg_replace()正则匹配比较讲解
- java2实用教程第5版第九章_java2实用教程(例子代码)第4版第九章.doc
- android 序列化 json,android 读取json 为什么不直接反序列化
- PyCharm 中为 Python 项目添加.gitignore文件
- Golang——Json的序列化和反序列化
- java基础第九天_多线程、自动拆装箱
- Julia: 关于... （三个圆点）
- 【Unity3D】计算二维向量夹角（-180到180）
- 教你用Appium搭建Android自动化测试框架（详细教程）
- 计算机无法连接远程桌面怎么回事,笔者教你远程桌面无法连接怎么办
- 历年美赛赛题和特等奖论文集合，文中直接获取！！！
- 一年级口算题20以内加减法有哪些技巧
- D. Binary Spiders（思维+字典树）
- java 保龄球游戏开发_保龄球游戏 编程
- python匿名函数Lambda的两种用法
- 软件测试-制定测试策略
- windows解密bitlocker【2】密码读取