JS的注释代码
//注释的内容
/*
多行注释的额内容
*/
一、JS数据类型之布尔值
# 要注意在JS中的布尔值都是小写的
# Python中的print约等于JS中的console.log
python
bool
True
False:0 None '' [] {} ...
JS
boolean
true
false:(空字符串)、0、null、undefined、NaN
null与undefined的区别
null可以理解为曾经拥有过 现在暂时空了
var name = 'jason'
var name = null
undefined可以理解为从来没拥有过
var s1
s1 # undefined
二、JS数据类型之对象(object)
var a = [123, 456, 789, 'abc']
对象之数组(相当于python中的列表)
typeof a # 'object'
length len()
push(ele) append() insert() extend()
pop() pop() # 获取尾部元素
unshift insert() # 头部插入元素
shift() #头部元素移除
concat() extend() # 连接数组
sort() sort() # 排序
map() map() # 映射
forEach
var name_list = ['jason','kevin','jerry','oscar','tony']
name_list.forEach(function(a){console.log(a)})
forEach的作用在这里相当于for循环的作用
name_list.forEach(function(value,index,arr){console.log(value,index,arr)})
这下面这种用法比较少第二位的是索引值，第三位的是所属的数组对象
splice()
name_list.splice(2,1,'哈哈哈')
name_list # name_list.splice(2,1,'哈哈哈')
这里的作用有两个
第一删除了第二位开始的一个内容
第二是在这个位置上添加了'哈哈哈'这个内容
map()
var arr1 = [11, 22, 33, 44]
arr1.map(function(value){return value+1})
# (4) [12, 23, 34, 45]
三、JS数据类型之自定义对象(object)
1.自定义对象(相当于python中的字典)
定义方式1:
let d1 = {'name':'jason','pwd':123}
定义方式2:
let d2 = new Object()
自定义对象操作数据值的方式更加简单 直接使用句点符
ps:思考python中如何让字典也可以通过句点符操作字典的数据值
四、运算符
# 首先要知道的是在JS中++是自增的意思
var x=10;
var res1=x++; 先赋值后自增
var res2=++x; 先自增后赋值
# 这里的res1出来的值是10
# 这的x首先被赋值给了res1之后进行自增变成了11，之后再自增为12最后赋值给了res2
# 所以res2最终的结果为12
== 弱等于(自动转换成相同数据类型)
5 == '5' # True
=== 强等于(不自动转换)
5 === '5' 3 false
&& 等价于python中的and
|| 等价于python中的or
! 等价于python中的not
五、流程控制
一.分支结构
1.单if分支
if(条件){条件成立之后执行的代码}
2.if...else分支
if(条件){
条件成立之后执行的代码
}else{
条件不成立之后执行的代码
}
3.if...elif...else分支
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}
else{
条件不成立之后执行的代码
}
实操过程中的问题
var s1 = 1
if(s1 = 2){
console.log('你啊猜对了')
}
# 这里实际上是写错了但是这里的s1的值就被修改了
if(s1 == 1){
console.log('你啊猜对了')
}else{
console.log('啊你猜错了')
}
# 上面的就是else其实就是在一行的
if(s1 == 1){
console.log('你啊猜对了')
}else if(s1 == 2){
console.log('啊你猜错了')
}else{
console.log('w我草被你发现了')
}
# 这里千万要注意else if不能被简写成elif！！！！！！！！！！！！！！！！！！！
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
# switch在其他的语言中是被使用的python中没有被引用
# 其意思是switch (day)中的day是否符合case 0中后面的条件，符合即打印
# 其中的break不能省略，不然会打印符合条件以后的所有的内容
二、循环结构
for(let i=1;i<101;i++){
console.log(i)
}
# 将i定义为1 限制为小于10 对i进行自增 打印下来
# 注意这里的10也被打印了下来
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
利用for循环进行取值
for(let i=0; i<l1.length; i++){
console.log(l1[i])
}
# 注意这里的列表取值方式和python中的是相同的
while(条件){
循环体代码
}
i = 1;
while(i<10){
i++;
console.log(i)
}
六、函数
python编写函数的方法
def 函数名(形式参数)：
函数体代码
return 实际参数
JS中编写函数的代码
function 函数名(形参){
函数体代码
return 返回值
}
function func(a,b){
console.log(a,b)
}
#参数的个数不需要一一对应 没有输入的参数默认为undefined 如果想限制参数个数需要使用内置关键字arguments
function f2(a, b) {
console.log(arguments); // 内置的arguments对象
console.log(arguments.length);
console.log(a, b);
}
# 这里面可以看看argument内置对象的内容
function func(a,b){
if(arguments.length===2){
console.log(a,b)}
else{console.log('味道不对呀，参数少了呀')}
}
# 可以通过检查长度的方式来限制，注意了arguments的s不能少呀
匿名函数
function(a,b){
return a+b}
# 直接这么写会报错的需要在特定的条件下进行使用
var f = function(a,b){
return a+b;
}
箭头函数
1.有且仅有一个参数的情况下
var f = function(v){
return v;
}
极其偷懒的写法
var f=v=>v
2.一个参数都不用的情况下
var f = function(){
retuen '请进'
}
极其偷懒的写法
var f=()=>'请进'
3.多个参数的情况下
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
var sum = (num1, num2) => num1 + num2;
七、名称空间与作用域
# JS的作用原理和python是一致的
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //输出结果是？
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印结果是？
# 这里f和bar的名称空间是相互独立的两个
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret(); // 打印结果是？
词法分析（尝试理解）
随便看一下就可以了，逻辑有点混乱
https://www.cnblogs.com/Dominic-Ji/p/9111021.html
八、JS内置对象
类似于python中的内置函数或者内置模块
固定语法
var 变量名 = new 内置对象名();
1.Date日期对象
//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
# const是定义常量的意思，不能随便修改
2.JSON序列化对象
回顾python序列化
import json
json.dumps()
json.loads()
JS中的序列化
JSON.stringify()
JSON.parse()
var dic1 = {'name':'jason', 'age':18, 'pwd':'123'}
let strDic = JSON.stringify(dic1) // 注意这边的JSON是全部大写的
JSON.parse(strDic) // 反序列化
3.RegExp正则对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
# JS能够自动识别正则表达式
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg2.test('jason666') // true
reg2.test('jason666') // false
reg2.test('jason666') // true
reg2.test('jason666') // false
# 这个小g的作用是，第一次匹配完成光标会停留在最后
# 因为光标去了最后所以第二次的结果为false，因为false所以光标又跑到最前面去了
reg2.test()
# 这里默认被识别为reg2.test(undefined)
九、BOM与DOM操作
BOM:浏览器对象模型
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM:文档对象模型
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
对浏览器进行操作
window.innerHeight
1286
BOM操作
打开新的窗口
第二个参数先不写，第三个参数用来控制浏览器的宽和高
window.open('http://www.jd.com/','','height=500px;width=500px')
还可以控制窗口出来的位置
window.open('http://www.jd.com/','','height=500px;width=500px,left=600px')
关闭当前窗口
window.close()
标识浏览器的信息让别人觉得是一个人在进行访问
window.navigator.userAgent
window.history.forward() 前进一页
window.history.back() 后退一页
window.location.href 显示当前页面的地址,注意这里加了括号会报错的
window.location.href = 'http://www.sogo.com/' 让页面进行跳转，重新访问了一个网站
window.location.reload() 使用起来的作用就是刷新页面
alert(123) 作用就是弹出一个警告框
confirm('你想进来吗') 弹出一个需要进行确认的确认框
# 这上面的如果用户点了确认就会返回值true，如果点了否就是返回false
prompt('删库之后要记得跑路哦')
这个后面会显示一个可以输入东西的提示框
1.写了东西后点了确认就会返回写的东西
2.什么都不写，直接点了取消会返回null
3.什么都不写，点了确认就会返回''
prompt('删库之后要记得跑路哦','你的学长前两天就干了这种事')
后面的内容被自动写进了方框中
BOM之定时器的相关任务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var s1 = null
function showMsg() {
function func1(){
alert('终于要干饭了')
}
s1 = setInterval(func1, 3000)
let t = setTimeout(func1,3000) // 3秒中之后自动执行func1函数
clearTimeout(t) // 取消上面的定时任务
</script>
</body>
</html>
"""
1.这个script的代码最好写到最下面，因为是从上往下执行的
2.setTimeout(func1,3000)定时器任务
3.t的用处就是给下面的clear准备的
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function showMsg() {
function func1(){
alert('终于要干饭了')
}
s1 = setInterval(func1, 3000)
</script>
</body>
</html>
'''
这里主要作用是一直进行循环执行，如果上一个一直没去点掉，那就会出现连续好几个，以前的垃圾网站的专用套路
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var s1 = null
function showMsg() {
function func1(){
alert('终于要干饭了')
}
s1 = setInterval(func1, 3000)
}
function clearMission(){
clearInterval(s1)
}
setTimeout(clearMission, 9000)
showMsg()
</script>
</body>
</html>
"""
1.首先定义一个函数进行这个函数一旦执行就会创造一个循环并进行执行
2.注意var s1 = null的作用主要是弄一个全局函数，使得局部的那个能够跑出来
3.setTimeout(clearMission, 9000)代表的是9秒以后执行中止任务clearMission
4.执行showMsg()
"""
十、DOM操作
首先我们自己先搓一个网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- <div id="d1">div</div>-->
<!-- <div class="c1">div</div>-->
<!-- <div>div</div>-->
<!-- <p class="c1"></p>-->
<!-- <span id="d2">span</span>-->
<!-- <script>-->
<!-- console.log(document.getElementById('d1'))-->
<!-- </script>-->
<p>123</p>
<p>321</p>
<div id="d1">div
<p>div>p
<span>div>p>span</span>
</p>
<span>div>span</span>
<p>div>p</p>
</div>
<span>222</span>
<span>666</span>
</body>
</html>
1.通过id进行元素的获取 Element：元素
结果直接是标签对象本身
document.getElementById('d1')
2.通过类
结果是数组类型
document.getElementsByClassName('c1')
3.通过标签的名字进行查找 TagName：标签名称
结果是数组类型
document.getElementsBydocument.getElementsByTagName('div')('div')
#因为html是从上往下执行的所以html中的js代码需要写在body的最下方
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
document.getElementsByTagName('div').children
注意不加括号
"""
let divEle = document.getElementById('d1')
"""
注意写法
divEle.parentElement
divEle.parentElement.parentElement
divEle.children
divEle.firstElementChild
divEle.lastElementChild
#创建变量名的时候建议使用Ele的后缀！！！！！！！！！
十二、DOM之节点操作
#节点在这里的意思就是标签
一、逐步创建一个链接标签的过程
let aEle = document.createElement('a');
aEle
aEle.href = 'https://www.sogo.com/'
aEle
aEle.innerText = '点我去搜狗'
aEle
# 注意这个时候的文档中还是没有这个a标签的，需要自己指定位置将a标签添加进去
divEle.append(aEle)
# 还需要注意的是，这里面网页的源码会变化，但是原来的html文件是没有变动的
添加的位置可以自己定，详见老师的博客
二、节点操作
let XXXEle = document.createElement('标签名')
XXXEle.id = 'id值'
XXXEle.innerText = '内部文本'
divEle.append(XXXEle)
ps:动态创建 临时有效 非永久！！！！！！！！！！！！！！！！！！！！！
三、标签属性添加
let imgEle = document.createElement('img')
imgEle.src = '111.png'
注意这里面的图片是在pycharm创建的项目文件夹中查找的，会报错
imgEle.abc = 123
# 注意因为这里不是默认的属性，所以赋值是无效的
# 可以使用setAttribute来进行强制的属性设置
XXXEle.属性 只能是默认属性
XXXEle.setAttribute() 默认属性、自定义属性
四、文本操作
# html文件在前文当中已经描述过了
let divEle = document.getElementById('d1')
divEle.innerHTML 拿到标签中的所有内容
'div\n <p>div>p\n <span>div>p>span</span>\n </p>\n <span>div>span</span>\n <p>div>p</p>\n'
divEle.innerText 只拿标签中的文本内容
'div\n\ndiv>p div>p>span\n\ndiv>span\n\ndiv>p'
"""
这里特别要注意的是\n是换行符的意思！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
"""
divEle.innerHTML = '哈哈哈'
divEle.innerText = '嘿嘿嘿'
# 前面这是看不出区别的
divEle.innerHTML = '<h1>嘿嘿嘿</h1>'
'<h1>嘿嘿嘿</h1>'
divEle.innerText = '<h1>哈哈哈</h1>'
'<h1>哈哈哈</h1>'
# 这里可以看出区别来，HTML是会识别h1这个标签的，innerText会当做文本信息，并不会被识别
浙公网安备 33010602011771号