js
使用js弹出窗口显示消息
<!DOCTYPE html> <head> <meta http-equiv="content-type" content="txt/html; charset=utf-8" /> <script>alert("大家好")</script> </head> <body> </body> </html>
引入外部的js方法
<script src="test.js"></script>
声明变量
var name=10;
var name="alex";
let age=102
2.声明常量,常量是不能改的
const PI= 3.1415926
3.null表示空值
声明变量没有赋值时是undefined
查看变量类型
typeof 变量;
数字类型
1.js不区分整形和浮点型，统一使用数字类型
2.用e来写10的五次方，10的－5次方
var c =2e5
var d=2e-5
字符串类型
var name="alex"
字符串拼接
name="alex" age="123" var ct=name+age console.log(ct)
将字符串转换成数字类型
var a="123" var b=parseInt(a) console.log(b) console.log(typeof(b))
声明多行字符串
var c=` 大大撒旦 啊大苏打 `; console.log(c);
字符串的格式化
var a ="mensda"; var b =`${a} shi sb`; console.log(b);
但是字符串转数字时js有点问题，如果字母转数字型的话会获得NaN,如果又有字母又有数字
然后转数字，会只转换数字部分然后把字母部分扔掉
字符串方法
1.用.length不加括号可以获得返回长度
2.用.trim()可以移除空白部分，然后返回值
3.用.trimLeft()移除左边空白
4.用.trimRight()移除左边空白
5.用.charAt(n) 类似索引，按n下标来找，如果索引里没有就返回空
6.用.slice(start,end)来进行切片
7.用.indexOf(substring,start) substring代表要查找的东西，start表示从哪一位开始找，没找到就返回-1
8.用.toLowerCase() 全部变成小写
9.用.toUpperCase()全部变成大写
10.用.split(按什么进行切割,切割返回几个元素)
var a='malous'; var b=a.split('l',2); console.log(b);
布尔值类型：
var a = true
var b = false
数组(type 是object)：
var a =[1,"Z"];
取可以直接a[1]
数组方法
1.用.length获得数组的大小
2.用.push(元素) 尾部添加元素
3.用.pop()获取尾部的元素
4.用.unshift(元素) 头部添加元素
5.用.shift() 头部移除元素
6.用.slice(start,end)来进行切片
7.用.reverse()反转
8.用.join(连接字符) 将数组元素连接成字符串
9.用 数组1.concat(数组2) 将两个数组合起来
10.用.splice(从第几位开始,删几个,后面的是替换的值) 删除元素，并向数组里添加新元素
自定义对象（字典）：
var d ={'sad':'sdadsa','age':12314}; console.log(d['age']);
获取键值列表 ：Object.keys(对象字典)
获取键值属性： 对象[键值]
运算符：
%取余 i++是i自加1 i--是i自减一
强等于 ===，都用强等于就行了
与&&
或||
! 非（取反）
!null返回true
条件
var a=10; if (a>5){ console.log('da'); } else{ console.log('xiao'); }
switch切换
var a=1; switch(a){ case 0: console.log('shi 0'); case 1: console.log('shi 1'); break; default: console.log('bu shi 1 he 0') }
for循环
for(var i=0;i<10;i++){ console.log(i) }
while循环
var i=0; while(i<10){ console.log(i); i++; }
三元运算符
var a = 1; var b = 2; var c = a > b ? a : b //如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c //python中的：a = x if x>y else y
函数写法
function sum(a,b){ return a+b; } console.log(sum(1,2))
注意，如果函数体内有了某个形参，他就不会往外面的全局变量上找了，就算函数体靠后处才定义某形参，和python不同
var age=18 function foo(){ console.log(age); var age=22; console.log(age); } foo();
遍历对象的内容：
var a={"name":"alex","age":123}; for(var i in a){ console.log(i,a[i]); }
另一种定义对象的方法
var person=new Object(); person.name="pp"; person.age="18" console.log(person.name,person.age)
面向对象,用this
function person(name){ this.name=name } /*以下为加入方法*/ person.prototype.sum=function(a,b){ return a+b;} /*以下为实例化*/ var p = new person("shit"); console.log(p.name) console.log(p.sum(3,2))
时间对象的创建Date
var d=new Date(); console.log(d) console.log(d.toLocaleString())
自定义时间
var d=new Date("2004/3/20 11:12"); console.log(d) console.log(d.toLocaleString())
获取日getDate();
获取星期几getDay();
获取月getMonth();
获取年getFullYear();
获取时间戳getTime();
math对象
json的使用
var str1='{"name":"asd","age":15}'; //json恢复出字符串内的数据 var obj=JSON.parse(str1); console.log(obj); //json将数据变成字符串 var str =JSON.stringify(obj); console.log(str);
regexp正则
var reg1= new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}$"); //^是以什么开头，[a-zA-Z]是可以是a到z和A到Z的数，匹配5到11次 var t1="123asda"; var t2="asa2131"; console.log(reg1.test(t1)) console.log(reg1.test(t2))
简写的写法
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
js正则有点问题。如果你直接写一个reg2.test()，test里面啥也不传，直接执行，会返回一个true，用其他的正则规则，可能会返回false，是因为，test里面什么也不传，
默认传的是一个undefined，并且给你变成字符串undefined，所以能够匹配undefined的规则，就能返回true，不然返回false
正则的匹配模式
var s2 = "hello world"; s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正则 的内容 ，/o/g后面这个g的意思是匹配所有的o, s2.search(/h/g); // 0 查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置，加不加g效果相同 s2.split(/o/g); // ["hell", " w", "rld"] 按照正则表达式对字符串进行切割，得到一个新值，原数据不变 s2.replace(/o/g, "s"); // "hells wsrld" 对字符串按照正则进行替换
JS的分类
分为ECMAS，DOM,BOM
BOM指的是浏览器对象模型，它可以和浏览器直接对话
DOM值得是文档对象模型，通过它可以访问HTML文档的所有元素
BOM对象
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面，了解一下就行了)
navigator子对象
判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端绝大部分信息 navigator.platform // 浏览器运行所在的操作系统
location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面,就是刷新一下页面
警告框
alert("阿萨大大");
确认框
confirm("确定吗？")
计时效果,setTimeout(执行的函数,时间间隔ms)一段时间后做什么事情
function foo(){ confirm('dasdsadsad'); } var timer = setTimeout(foo, 3000)
取消settimeout设置用
clearTimeout(timer);
设置每隔一段时间做一些事情
取消用clearInterval(timer);
function foo(){ confirm('dsadasda'); } var timer = setInterval(foo, 3000);
DOM
dom可以查找和修改html树，修改标签还有里面的样式等
直接查找
document.getElementById('a') 根据ID获取一个标签
document.getElementsByClassName('a') 根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName('a') 根据标签名获取标签合集
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
1.创建标签
createElement(标签名)
var divEle = document.createElement("div"); divEle.innerText('sad')
2.添加节点
somenode是父级标签
追加一个子节点（作为最后的子节点）。somenode.appendChild(newnode)；
把增加的节点放到某个节点的前边。somenode.insertBefore(newnode,某个节点);
3.删除节点 。 somenode.removeChild(要删除的节点)
事件
1.点击事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
2.输入框事件
onfocus 元素获得焦点。 // 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
3.其他常用事件
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
改变按钮字体颜色
onclick="f1(this); 首先声明事件，还有运用的函数
然后具体的写函数的内容
也可以先通过id获取标签，然后再绑定
var sub=document.getElementById('sub');
sub.onclick=function(){ this.style.color='blue';}
<!DOCTYPE html> <head> <meta http-equiv="content-type" content="txt/html; charset=utf-8" /> <script>function f1(ths){ ths.style.color='red'; } </script> </head> <body> <form action="" method="GET"> <!action是提交的地址url,post是隐藏提交的表单数据,get不隐藏> <p> 用户名：<input type="text" name="name"> <!文本的输入框，必须设置name,提交时候的格式name=value> </p> <p> 密码：<input type="password" name="password"> </p> <p> <input type="submit" value="百度一下"> <!提交按钮,value改按钮里面的字> <input type="button" id="changecolor" onclick="f1(this);" value="不提交的按钮"> <input type="button" id="sub" value="提交的按钮"> <script> var sub=document.getElementById('sub'); sub.onclick=function(){ this.style.color='blue';} </script> </p> </form> </body> </html>
按键添加文本内容
<!DOCTYPE html> <head> <meta http-equiv="content-type" content="txt/html; charset=utf-8" /> <style> .c1{ background-color: yellow; } </style> </head> <body> <button id="btn">添加</button> <div id="div1"> <script> var btn=document.getElementById('btn'); btn.onclick= function(){ var divposition=document.getElementById('div1'); var p1=document.createElement('p'); p1.classList.add('c1') p1.innerText='dasdadasdsad'; divposition.appendChild(p1); } </script> </div> </body> </html>
onblur和onfoucs事件
文本框默认里面有内容，如果鼠标点进来删掉默认内容，鼠标离开就加上默认内容
onblur控制鼠标离开框 onfoucs控制鼠标点击框
<!DOCTYPE html> <head> <meta http-equiv="content-type" content="txt/html; charset=utf-8" /> <style> .c1{ background-color: yellow; } </style> </head> <body> <input type="text" id="username" value="请输入内容"> <div id="div1"> <script> var getinput=document.getElementById('username') getinput.onfocus=function () { if(this.value.trim()==='请输入内容'){ this.value=''} } var notinput=document.getElementById('username') getinput.onblur=function () { console.log(this.value.trim()) if (this.value.trim() === ''){this.value='请输入内容';} } </script> </div> </body> </html>
select联动，两个框之间文本的联系
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <label for="s1">名字:</label> <select id="s1"></select> <label for="s1">年龄:</label> <select id="s2" style="width: 100px"></select> <script> var data={'name':['ads','jk','abil'],'age':['18','22','44']}; var s1=document.getElementById('s1'); for(var i in data) { var op = document.createElement('option'); op.innerText = i; s1.appendChild(op) } /*以上为将data的键值放进去名字里*/ /*以上为根据键值放属性值*/ var s2=document.getElementById('s2'); s1.onchange=function () { s2.innerText='' console.log(this.options) console.log(this.options[this.selectedIndex].innerText) var name=this.options[this.selectedIndex].innerText var age=data[name]; console.log(age); for (var i in age){ console.log(age[i]) var op2=document.createElement('option'); op2.innerText=age[i]; s2.appendChild(op2) } } </script> </body> </html>
js代码位置
js代码一般全都放在最下面，因为放上面会造成下面body的内容还没加载先加载js，js找不到body
里面的内容。实在想放在上面可以用windows.onload里面加js代码， 等页面全部加载完再加载js代码
但是这也不好用，因为如果页面里也有其他的windows.onload就会冲掉上一个
jquery重点，封装后的js
引用方式
<script src="jquery-3.5.0.min.js"></script>
id获取方式，使用jquery对象和原生dom对象
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="d1">makabaka</div>
<script src="jquery-3.5.0.min.js">
var a=jQuery('#d1'); /*获取id的标签*/
console.log(a);
var b=$('#d1'); /*获取id的标签*/
console.log(b);
var c =$(d1); /*将原生dom转换成jquery的样式*/
var d = $('#d1')[0]; /*使用原生dom对象*/
console.log(c)
console.log(d)
</script>
</body>
</html>
基础写法
$('选择器').动作()
1.id选择 $('#id')
2.标签选择器 $('标签名字')
3.class选择器 $('.类名')
4.所有元素选择器 $('*')
5.组合选择器('#id, .类名, 标签名字')
层级选择器
1.$('x y') 找到x的所有后代子子孙孙y
2.$('x > y') 找到x的所有儿子y
3.$(x + y) 找到所有紧挨在x后面的y
4.$(x ~ y) x之后所有的兄弟y
基础筛选器
:first第一个
:last最后一个
:eq(index) 通过索引来获取
:even 匹配索引值为偶数的元素（从0开始计）
:odd 匹配索引值为奇数的元素（从0开始计数）
:gt(index) 匹配所有索引值大于给定索引值的元素
:lt(index) 匹配所有索引值小于给定索引值的元素
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 获得所有（后代满足has条件）的标签
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> #d1{ background-color: green;width: 100px;height: 100px; } #d2{ background-color:red;width: 100px;height: 100px; } #d3{ background-color:blue;width: 200px;height: 100px; } </style> </head> <body> <div id="d1" class="c1">makabaka</div> <div id="d2" class="c2">makabaka</div> <div id="d3" class="c3">makabaka</div> <ul> <li>11</li> <li>22</li> </ul> <script src="jquery-3.5.0.min.js"></script> <script> console.log($('div')) console.log($('div:first')) console.log($('div:last')) console.log($('div:eq(0)')) </script> </body> </html>
属性选择器
// 示例,多用于input标签 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签
表单状态互动选择器
$(input:enabled) /*找所有可用的input标签，没被勾选的那种*/
$(input:disabled) /*找所有不可用的input标签，被勾选的那种*/
$(:checked) /*用于获取勾选框checkbox被选中的*/
$(:selected) /*用于下拉框被选中的*/
console.log($(':selected').text()) 打印出下拉框选中的里面的文本
下一个元素：
$("#id").next() /*假设id是c1，next后是c2*/
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
上一个元素：
$("#id").prev() /*假设id是c6，prev之后是c5*/
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用
儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
查找（好方法）
$("div").find("p") /*等价于$("div p")*/
筛选
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签
标签操作
1.addClass(类名); 来添加css样式
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> .c1{ background-color: green;width: 100px;height: 100px; } .c2{ background-color:red;width: 100px;height: 100px; } .c3{ background-color:blue;width: 200px;height: 100px; } .cc{background-color: #080808} </style> </head> <body> <div id="d1" class="c1">makabaka</div> <div id="d2" class="c2">makabaka</div> <div id="d3" class="c3">makabaka</div> <script src="jquery-3.5.0.min.js"></script> <script> $('#d1').addClass('cc'); </script> </body> </html>
2.removeClass(类名); 用于给指定标签删除指定的类
3.toggleClass(类名); 给指定标签 如果有这个类就把这个类删除掉，如果没有这个类就添加这个类
4.hasClass(类名); 判断指定标签有没有某样式存在
5.CSS（直接修改css的属性来修改样式）
$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作
.offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 .offset({top:200,left:200}); //修改位置 .position()// 获取匹配元素相对父元素的偏移，不能设置位置 $(window).scrollTop() //滚轮向下移动的距离 $(window).scrollLeft() //滚轮向左移动的距离
监测滚轮上下移动距离进行弹框
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> .c1{ background-color: green;width: 100px;height: 1500px; } </style> </head> <body> <div id="d1" class="c1">makabaka</div> <script src="jquery-3.5.0.min.js"></script> <script> $(window).scroll(function () { console.log($(window).scrollTop()); if ($(window).scrollTop()>200){alert('别他妈往下走了')} }); </script> </body> </html>
$(window).scrollTop(0)可以用来制作回到顶部按钮。
尺寸操作
$('选择器').height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
$('选择器').width()
$('选择器').innerHeight() //内容content高度 + 两个padding的高度
$('选择器').innerWidth()
$('选择器').outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
$('选择器').outerWidth()
文本操作
HTML代码：
html()// 取得第一个匹配元素的html内容，包含标签内容 html(替换成的标签)// 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
文本值：
text()// 取得所有匹配元素的内容，只有文本内容，没有标签 text(文本)// 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
值，用于input之类的有值的：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
如果checkbox没有设置value值会显示on
属性操作
获取标签里的某个属性
$('a').attr('href');
修改某个标签的某个属性
$('a').attr('href','http://www.baidu.com');
删除某个属性值
$('a').remove('href');
checkbox和radio的检查有没有被选中的方法特殊，用prop
$('input').prop('checked');
浙公网安备 33010602011771号