-
javaScript又叫做js它是一门轻量级的编程语言,虽然名字中有java但是实际上它跟java没有任何的关系！
-
js也是一门独立的编程语言,主要是用来向HTML页面进行动态效果的设置,是一门脚本语言,浏览器中有自己带的js的解释器！
-
它可以支持面向对象,支持面向过程等
-
javascropt中的东西很乱,有一些东西是没有太多的合理性的,经不起推敲,如下图,所以有一些原理层的问题就记住用法就可以了！
js的引入方式
-
js引入的关键词是script,它的样式跟引入用的都是这一个来控制
-
js的引入也是有三种方式
-
外部引入方式
-
<head> <meta charset="UTF-8"> <title>Title</title> <script src="te.js"></script> </head> <!--在引入js的方式跟引入css的用的关键词跟是不一样的！ 应该是src --> -
写到head标签中
-
<head> <meta charset="UTF-8"> <title>Title</title> <script>alert('你满18岁了吗？？？');</script> </head>
-
写到body中
-
<body> <script>alert('你满18岁了吗？？？');</script> </body> <!--效果都是一样的！--> -
总结:
- 在js中每一句话写完都要加一个分号, 表示这是一个整体,跟mysql一样
- 如果引入方式不是文件引入,那么写到那里都是一样的,不过建议写到body的底部,因为js的特效不需要先加载,如果都写在head中也会拖慢加载的速度
-
js语言基础
-
编程语言大体上都是相通的,在学会了python之后再来了解js就显得很简单了,js中的很多东西跟Python大体上是一样的,但是细节上又有区分！
-
变量
-
在js中要声明一个变里要用var(只用于声明变量)
-
下面的代码可以用浏览器的开发者工具进行实验
-
打开谷歌, F12 选定 Console
-
var a=100; /var的意思是声一个变量,它的值是100,/ a = 100; /这样也是声明了变量,但是它们是不一样的！/ /* 区别: 在全局中两种定义方式是没有区别的,但是在函数内的时候用var来声明的就只是局部变量,直接赋值的只能是全局变量 变量声明,但没有赋值的时候,变量的值为undefined */
-
-
注释
- js中的注释用
//来表示,当中写的就是内容 - 多行注释用
/**/表示
- js中的注释用
基础数据类型
-
number(整形和浮点型)
-
包含整形和浮点型
-
typeof(查看数据类型)
-
var a=1.1; typeof a; "number"
-
-
string(字符串)
-
var a = "adfaf" a "adfaf" /* 可以看到a之前被定义过number类型了现在又可以定义为string类型,说明js也是支持多态的！*/ -
字符串的操作
-
索引取值
var a = "adfaf"; undefined a; "adfaf" a[1]; "d"索引取值直接用[]当中写要取的位置！
也可以切片,但是要用另一种方法,在后面写
-
获取长度
length
/length 可以测字符串的长度/ var haimian="我就是我颜色不一样的烟火"; undefined haimian.length; 12 /*用字符串的名字点出length*/ -
移除两端空格
trimLeft()
var a=" a " a.trim(); "a" /*注意trim是一个函数要执行得加括号 可选:s.trimLeft();移除字符串左边的空白 s.trimRight();移除字符串右边的空白 */ -
根据索引获取字符
charAt()
var haimian="我就是我颜色不一样的烟火"; var b=haimian.charAt(3); b "我" /*定义一个字符串叫做haimian,拿到索引为3的值存到b中,然后打印b*/ -
根据索引获取子序列(切片)
substring()
var haimian="我就是我颜色不一样的烟火"; haimian.substring(1,4) "就是我"
-
-
-
布尔类型
-
true 跟 fales 跟python中的一样,不过是首字母不大写！
-
1>10 false 1<10 true
-
-
undefined和null类型
-
undefined是声明了变量但是没有赋值就是一个undefined,不只是声明了但是没有赋值会出现,如索引超出范围也会是一个undefined,js很难让它报错！
-
var a undefined a undefined /*声明但没有赋值*/ -
null类型只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。一个变量不用了就可以赋值为null
-
a = null null a null
-
-
数组(列表)
-
数组类型于python中的列表,叫法不一样而已
/*定义一个数组*/ haimian=["放不下的是什么","我也不知道",1,2]; (4) ["放不下的是什么", "我也不知道", 1, 2] -
数组常用的方法
-
数组[索引] 索引取值
haimian[0] "放不下的是什么" -
数组.push() 尾部添加元素
haimian.push("如果这就是爱情") 5 haimian (5) ["放不下的是什么", "我也不知道", 1, 2, "如果这就是爱情"] /*括号中的5表示的是数组中有5个元素*/ -
数组.pop() 尾部移除一个元素
haimian (5) ["放不下的是什么", "我也不知道", 1, 2, "如果这就是爱情"] haimian.pop() "如果这就是爱情" haimian (4) ["放不下的是什么", "我也不知道", 1, 2] -
数组.unshift() 头部插入元素
haimian.unshift("先生可否买我几斤仁义道德") 5 haimian (5) ["先生可否买我几斤仁义道德", "放不下的是什么", "我也不知道", 1, 2] -
数组.shift() 头部移除一个元素
haimian.shift() "先生可否买我几斤仁义道德" haimian (4) ["放不下的是什么", "我也不知道", 1, 2] -
数组.splice(a,0,c) 在指定位置插入元素
haimian.splice(1,0,"11111") /*上面这句话的意思是在索引为1的位置删除0个值,替换为"11111"*/ [] haimian (5) ["放不下的是什么", "11111", "我也不知道", 1, 2] -
数组.splice(a,1,c) 在指定位置替换元素
haimian.splice(1,1,"我是替换过的值") /*在索引为1的位置,删除一个值,替换为"我是替换过的值"*/ ["11111"] haimian (5) ["放不下的是什么", "我是替换过的值", "我也不知道", 1, 2] -
数组.splice(a,b) 在指定位置删除元素
haimian.splice(1,1) /*在索引为1的位置删除一个值*/ ["我是替换过的值"] haimian (4) ["放不下的是什么", "我也不知道", 1, 2] -
数组.slice() 切片
(4) ["放不下的是什么", "我也不知道", 1, 2] haimian.slice(1,3) (2) ["我也不知道", 1] /*从第索引1个值取到第三个值,不包含第三个值*/ -
数组.reverse() 反转数组
haimian.reverse() (4) [2, 1, "我也不知道", "放不下的是什么"] -
数组.join() 吧数组中的内容拼接成一个字符串
var c=["我","就","是","我"] undefined c.join("****") "我****就****是****我" /*如果join的括号只写一个字符串就是吧它们拼成了一整个字符串,如果join的括号中写内容就是以括号中的内容拼接*/ -
数组.concat() 连接数组
var a=["不听不听"] undefined var b=["王八念经"] undefined a.concat(b) (2) ["不听不听", "王八念经"] -
数组.sort() 对数组进行排序
haimian=[1,541,56,1563,186,416,,135,4186,1,5641,861,56,16,156] haimian.sort() (15) [1, 1, 135, 156, 1563, 16, 186, 416, 4186, 541, 56, 56, 5641, 861,] /*事实证明这个玩意一点也不好使,因为它是按的第一位数进行排序的！*/
-
-
解决数组中的排序问题
- 冒泡排序
- 百度官方:它重复地走访过要排序的元素列，依次比较两个相邻的元素，如果顺序（如从大到小、首字母从从Z到A）错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换，也就是说该元素列已经排序完成。
- 个人理解:冒泡排序的意思是每次比较两个值的大小,然后吧大的值排到后面,小的值放到前面,这样经过完整的一轮之后就是一个我们想要的结果了！
- 实现方法:需要用到函数,算是固定写法,背下来就好了！
/*定义一个函数,传入两个值每次进行减数运算,如果第一个可以减第二个就返回一个正的值*/ function com(a,b){return a-b}; haimian.sort(com) (15) [1, 1, 16, 56, 56, 135, 156, 186, 416, 541, 861, 1563, 4186, 5641, empty] /*具体的内部过程不详*/
-
-
字典(js中没有字典,是用object强行自定义出来的)
-
info = {a:"1",b:"2"} {a: "1", b: "2"} info["a"] "1" -
注意:字典在定义的时候键加不加引号都可以,但是在值的时候,如果是字符 串类型一定要加引号,在用字典名中的键找值的时候也要加上引号
-
流程控制
-
If判断
-
if("1"==="1"){ console.log("您就是个臭弟弟") } 输入结果:您就是个臭弟弟 /*if的用法的在if后面加一个(里面写的是要判断的条件,后面跟一个 大括号,就是如果满足条件怎么做)*/ -
console.log() 的意思就是打印括号中的内容
-
-
多条件判断
-
var a=100 if(a==100){ console.log("我是100"); }else if(a ==1){ console.log("我是1") }else{ console.log("没有这个值") }
-
运算符
-
比较运算符
> < == != >= <= === !==其中比较恶心的就是这个===,它的意思是类型相等,这个判断才成立
1=="1" true /*这是两个等号,就是不看它们的类型,只要看起来相等就是相等*/ 1==="1" false /*三个等号的意思是必须要类型一样才是等于*/ -
算术运算
+ - * / ++ -- %这个当中值得注意的是自增跟减,也就是++ --
a = 1 /定义一个变量/ console.log(++a) 先执行自增1再打印 2a=1 /定义一个变量/ console.log(a++) 先执行打印再自增 1注意++的位置
switch
-
用于判断等于某些值(只能放数字)
-
关键字:
switch
case
/正常版本/ n = 1 switch(n){ case 1: console.log("慢慢的来") } 慢慢的来 /*给n赋一个值,如果我的n的值等于1它就执行下面的内容*//穿透问题/ switch(n){ case 1: console.log("慢慢的来1") case 2: console.log("慢慢的来2") case 3: console.log("慢慢的来3") } 慢慢的来1 慢慢的来2 慢慢的来3 /*第一个执行成功以后下面的内容全都打印了,因为它认为这整个是一个整体,所以全都打印了！ 解决办法: 加break; 执行成功后就跳出！ */
异常捕获
-
js这门语言的兼容性还是比较强的,一般情况下是不会报错的,但是也有时候会出现这样的问题,那出现以后,就应该用异常来捕获一下！
-
结构:
-
try catch(等于python中的except) finally -
try{console.log(aaaaaaa);} catch(e){console.log(e);} finally{console.log('sssss')} ReferenceError: aaaaaaa is not defined at <anonymous>:1:17 /*保存了出错信息,并打印,在结束之前进行打印ssssss,语句最后一行不要写;号不然会报错*/ -
其它语句组合,后续补充
-
for循环
-
js中的循环跟python中的没有太大的差别
-
循环三要素
- 起始值
- 循环条件
- 循环变量的增量
-
for(var i=0;i<10;++i ){ console.log(i); }; /*伪代码 for(初始值;执行条件;循环变量的增量){ 每次循环要执行的内容 } 注意分号 */ -
/例二,if 跟 for 一起使用/ if(a===10){ for(a;a<20;a++){ console.log(a); }} 10 11 12 13 14 15 16 17 18 19
-
循环数组
s=[1,2,5,41563,156,3156,156,1,616] for(var i in s){console.log(i);} /意思就是for循环s中的每一个值给用var声明的变量i/ 0 1 2 3 4 5 6 7 8 /* 但是有一个问题,下面打印出的来i都是数组的索引,那么怎么打印每一个的值? 解决: 吧打印i改为s[i] */
while循环
-
var a = 0; while(a<5){ a++; if (a===2){ continue; } console.log(a); }
函数
-
定义一个函数
-
关键字:function
function a1(a,b){return a+b} a1(3,4) 7/*不能返回两个值 */ function a2(a,b){return a,b} a2(1,2) 2
匿名函数
-
var c = {a:function(a,b){ return a + b }} c["a"](3,5) /*吧匿名函数做为字典的值,在通过键调用的时候给它传值*/
自执行函数
-
自动执行的函数
-
(function auto() { console.log("我是自执行") })()
序列化
- 序列化
- JSON.stringify(object)
var b=["我","就","是","我"]
var infostr=JSON.stringify(b);
infostr
"["我","就","是","我"]"
- 反序列化
- JSON.parse(str)
var s = JSON.parse(infostr)
s
(4) ["我", "就", "是", "我"]
DOM对象
-
DOM对象是文档对象模型,通过DOM可以动态的调整文档(html)的内容
-
在后面的应用中DOM的应用还是很多的！
-
直接查找选择器:
- 现有如下代码
<div class="c1" id="d1"></div> <div class="c1" id="d2"></div> 我想找到当前页面的所有的div标签 document.getElementsByTagName("div") 结果: HTMLCollection(2) [div#d1.c1, div#d2.c1, d1: div#d1.c1, d2: div#d2.c1]-
document：代表HTML文档对象
-
document.getElementsBy可以记成固定写法
-
直接查找选择器的几个参数
document.getElementBy Id(arg) 根据ID获取一个标签对象 document.getElementsBy ClassName(arg) 根据class属性获取标签对象集合 document.getElementsBy Name(arg) 根据name属性值获取标签对象集合 document.getElementsBy TagName(arg) 根据标签名获取标签对象集合 -
根据ID获取一个标签对象
-
<div class="c1" id="d1"></div> <div class="c1" id="d2"></div> /*找到id为d1的标签*/ document.getElementById("d1") # 记得要加""括号中的是一个字符串 <div class="c1" id="d1"></div> # 因为id属性是不可以重复的所以得到的就是一个准确的值！ -
根据class属性获取标签对象集合
-
<div class="c1" id="d1"></div> <div class="c1" id="d2"></div> # 找到类属性为c1的标签 document.getElementsByClassName("c1") # ClassName 表示的的类的意思！ HTMLCollection(2) [div#d1.c1, div#d2.c1, d1: div#d1.c1, d2: div#d2.c1] # 因为类属性可以有多个不是唯一的,所以想拿到那个值就用数组的取值方式 -
根据name属性值获取标签对象集合
-
/html代码/ <div id="d1" name="aa"></div> <div id="d2" name="aa"></div> /*css代码*/ [name]{ width: 100px; height: 100px; background-color: #ff109f; border: 2px solid ; margin-top: 10px; } #通过js拿到属性为name的标签 document.getElementsByName("aa") NodeList(2) [div#d1, div#d2] -
根据标签名获取标签对象集合
-
# html代码 <div id="d1" name="aa"></div> <div id="d2" name="aa"></div> #css代码 document.getElementsByTagName("div") HTMLCollection(3) [div#d1, div#d2, div#d3, d1: div#d1, aa: div#d1, d2: div#d2, d3: div#d3]
-
通过DOM改变颜色
a[0].style.backgroundColor="red" -
例题:
#例题一！ 要求: 创建几个div标签，统一设置为黄色 然后通过JavaScript代码将所有div标签改为红色 问题分析:用for循环可以吧所有的div变色 实现: #html代码 <div id="d1" name="aa"></div> <div id="d2" name="aa"></div> <div id="d3" name="aa"></div> #css代码 div{ width: 100px; height: 100px; background-color: #fff544; border: 2px solid ; margin-top: 10px; } # 得到下图1 # 用for循环改变所有标签的颜色 var a = document.getElementsByTagName("div") a HTMLCollection(3) [div#d1, div#d2, div#d3, d1: div#d1, aa: div#d1, d2: div#d2, d3: div#d3] for(var i=0;i<a.length;i++){ a[i].style.backgroundColor="red" } #结果如下图二
-
间接查找选择器
- 通过一个标签间接找的找到其它的标签
- 查找方式如下
.nextElementSibling 找下一个兄弟 .previousElementSibling 找上一个兄弟 .firstElementChild; 找第一个儿子 .lastElementChild 找最后一个儿子 .children 找所有儿子 是一个数组 .parentElement 找到自己的父级标签 -
找下一个兄弟
# html代码 <div> <div id="a"></div> <div id="b"></div> </div> # js代码 var a=document.getElementById("a") # 找到id为a的代码,然后赋值给a a.nextElementSibling # 找a的下一个兄弟 <div id="b"></div> -
找上一个兄弟
# html代码 <div> <div id="a"></div> <div id="b"></div> </div> # js代码 var b=document.getElementById("b") b.previousElementSibling <div id="a"></div> -
找第一个儿子
#html代码 <div id="666"> <div id="a"></div> <div id="b"></div> </div> #js代码 var a = document.getElementById("666") a.firstElementChild <div id="a"></div> -
找最后一个儿子
#html代码 <div id="666"> <div id="a"></div> <div id="b"></div> </div> #js代码 var a = document.getElementById("666") a.lastElementChild <div id="b"></div> -
找所有儿子
#html代码 <div id="666"> <div id="a"></div> <div id="b"></div> </div> #js代码 var a = document.getElementById("666") a.children HTMLCollection(2) [div#a, div#b, a: div#a, b: div#b] -
#html代码 <div id="666"> <div id="a"></div> <div id="b"></div> </div> #js代码 var c= document.getElementById("a") c.parentElement <div id="666">…</div> -
文本操作
-
innerText获取文本内容
-
#html代码 <div id="666"> <div id="a">如果这就是爱情</div> <div id="b">放不下的是什么我也不知道</div> </div> #js代码 var a=document.getElementById("a") a.innerText "如果这就是爱情" -
设置文本
-
#js代码 a.innerText = "aaa" "aaa" # 不能识别标签,单纯的文本内容 -
-
innerHTML获取文本内容
-
#html代码 <div id="666"> <div id="a">如果这就是爱情</div> <div id="b">放不下的是什么我也不知道</div> </div> #js代码 var a = document.getElementById("a") a.innerHTML "如果这就是爱情" a.innerHTML='<a href="">校花</a>' -
-
-
两者区别:
- inner Text 得到的只是文本文档只能改为字符串
- inner Html 得到的也是文本文档,但是可以当html代码进去！
-
值操作
-
针对与用户交互相关的标签(input)操作其中的值
-
#html代码 #得到用户输入框中的内容 <input type="text" name="username" id="username" > #js代码 var inp =document.getElementById("username") <input type="text" name="username" id="username"> inp.value "fdgsdfgsdf" -
更改用户输入框中的内容
-
inp.value="adf" "adf"
-
BOM对象
-
弹框
-
(alert('未满18不要进') /在浏览器弹出一个弹窗,只有确定 confirm('你满18了吗?') / 在浏览器弹出一个弹窗,两个选项,返回true 或者 false /
-
-
location对象
-
location.href 获取当前页面的地址（url路径) location.href ="" 跳转到当前网址上 location.reload() 刷新当前页面
-
-
计时器
-
第一种一段时间之后执行某个代码
-
setTimeout("console.log('xxx')",5000); # 这句话放在浏览器中5秒以后就打印了"xxx" xxx -
第二种,每隔一段时间执行某个任务
-
setInterval(function(){confirm('弹个框!!')},3000);
-
评论区