web前端-js
1. js基础语法
声明变量
var a = 10;
查看变量类型
typeof a;
打印,测试语句
alert(a); #使用弹出框显示
console.log(a); #使用console日志打印
var isdelete = confirm(a); #弹框选择 ,isdelete会取到bool值 ,a提示信息
数据类型
基础数据类型,以及转换数据类型(不可变)
1)number(0可以做分子)
var a = String(a); #将a转换为字符串
2)string
var a = Number(a); #将a转换为数值类型
拼接:使用+号
内置方法:
返回指定索引的值charAt()
a = 'quguanwen';a.charAt(3);
拼接字符串concat
var a ='good';var b ='nice';var c =a.concat(b);c;
字符串元素替换replace
var a='good';var b =a.replace('od','ll');b;
字符串分割列表split返回数组
var b='goll';var arr1 = b.split('o');arr1;
3)underfined
var a; #仅声明的都是underfined类型
4)boolean
任何类型都可以转boolean #仅0 ,null,NaN,underfined为false
5)null空对象
引用数据类型(可变数据类型)
1)function函数
普通函数
function count(a,b,c){return a+b+c;}
console.log(count(1,2,3));
匿名函数(没有函数名,把函数给了一个变量)
var counts = function () {return 666;}
counts();
自执行函数(直接调用自己)
(function add(a,b){return a+b})(1,2);
2)Array数组(类似列表)
定义数组
var arr1 = [1,2,3,null,'polp'];
指定索引
console.log(arr1[2]);
打印长度
console.log(arr1.length);
方法
合并数组concat(类似extend)
var arr1=[1,2];var arr2=[3,4];arr1.concat(arr2);
拼接字符串join(类似join)
var arr1=['q','a'];var arr2 = arr1.join('+');arr2;
末尾追加元素push(类似append)
var b1=[1,2,3];b1.push(4);b1;
末尾删除元素pop
var b1=[1,2,3];b1.pop();b1;
起始写入元素unshift ,返回值是数组长度
var arr1=['a','10','1a0'];arr1.unshift('lp');
起始删除元素shift,返回被删除的值
var arr1=['a','10','1a0'];arr1.unshift('lp');arr1.shift('lp');
切片slice(起始索引,长度)
var arr1=[1,2,3,4,5,6];arr1.slice(0,2);
删除splice(起始索引,长度),返回值是被删除的值
var arr1=[1,2,3,4,5,6];arr1.splice(0,2);
添加元素splice(添加到的索引位置,0,内容1,内容2)
var arr1=[1,2,3,4,5,6];arr1.splice(3,0,'ll','oo');
替换元素splice(替换起始索引,替换个数,替换内容);
var ki = [1,2,3,4,5,6,7,8,9];arr1.splice(3,2,'oo','tt');arr1;
排序数组sort()(不区分类型顺序0-9,A-Z,a-z)
var ab=[1,2,65,3,43,1,2,'a','d','f','ba','ab','VB','A1','0'];ab.sort();
判断是否为数组
var arr1=[1,2,3];Array.isArray(arr1);
数组长度
var arr1=[1,2,3];arr1.length;
3)object对象(类似dict,就是个类,定义属性,定义方法)
var person = {"name":'quguanwen','age':10,func1:function(a,b){alert(a+b)}}
person.func1(0,19); #执行函数
4)date
创建当前时间对象
var newdate = new Date();
时间对象拿出年份
var year = newdate.getFullYear();year;
时间对象拿出月份(getMoth能取到是0-11)
var month = newdate.getMonth();month+1;
时间对象拿出日
var date = newdate.getDate();date;
时间对象拿出星期(0-6 ,其中0是周日)
var day1 = newdate.getDay();day1;
时间对象取出小时
var hour = newdate.getHours();hour;
时间对象取出份
var min = newdate.getMinutes();min;
时间对象取出秒
var s = newdate.getSeconds();s;
运算符
赋值运算符: =
算数运算符: + - * / % -- ++
比较运算符: ==(数值相等即可,不考虑数据类型) ===(数值相等,数据类型也要相等) !=(数值不等为真) !==(数值不等的同时类型不同才为真)
流程控制
// if-else
var isdelete = confirm('确定与取消');
arr1 = [1, 2, 3, 4];
if (isdelete) {
alert('确定')
} else {
alert('取消')
}
// while #三步走：1初始化条件变量 2.判断循环条件 3.改变变量
var a = 0;
while (a < 10 ) {
console.log(12);
a++;
}
// switch #类似shell的case语句，常用于对标键盘执行操作
switch（code）
case 12：
执行操作
break；
case 20；
执行操作1
break；
default：
都不满足走default；
// for #三步走：1初始化条件变量 2.判断循环条件 3.改变变量
for (var i = 0; i < 10; i++) {
console.log(i);
}
Math内置对象
向上取整 var a = 11.9; Math.ceil(a)
向下取整 var a = 11.9; Math.floor(a)
比较取大 Math.max(1,2,3,4,10);
比较取小 Math.min(1,2,3,4,10);
随机数 (仅有0-1之间数字)
随机数100-500 :Math.random()*400+100;
随机数0-300 :Math.random()*300;
2. 制作动态时间显示
1) 指定想要在哪个dom标签进行操作
2) 完成生成当前时间的函数 ,并对dom操作 ,显示内容
3) 使用定时器触发函数
<h2 id="time1"></h2>
<script>
//第一步绑定一个标签对象,通过id绑定
var mytime = document.getElementById('time1');
//第二步我们写一个函数,每次执行函数 ,函数对dom对象做一次操作!!
function timetemplate() {
var myDate = new Date();
var year = myDate.getFullYear();
var mouth = myDate.getMonth()+1;
var date = myDate.getDate();
var hour = myDate.getHours();
var min=myDate.getMinutes();
var sec = myDate.getSeconds();
var datetime = `${year}-${mouth}-${date} ${hour}:${min}:${sec}`;
console.log(datetime);
mytime.innerText = datetime;
}
//第三步我们写一个定时器,要求每个1000毫秒即1秒执行一次函数,那么页面就在不停变化
setInterval(function () {
timetemplate();
},1000)
</script>
3.定时器使用
setInterval #周期循环定时器
setTimeout #延时定时器 ,仅执行一次
clearInterval(obj) #清空周期定时器对象
clearTimeout(obj) #清空延时定时器
定时器没有垃圾回收机制 ,所以创建的定时器对象都回保留 ,所以每次需要清除定时器, 因为代码执行顺序 ,如果代码出现clear可能定时器还没到执行就被清空了
定时器中是一个函数
<script> settime2 = setInterval(function () { console.log(888) }, 1000); settime1 = setTimeout(function () { clearInterval(settime2) }, 3000); clearTimeout(settime1) </script>
4.js变量提升
使用var声明变量时会出现一个问题 ,js会先将变量声明在最前面 ,如var a ,类型也就是undefine .所以我们使用let声明变量
5.DOM操作-文档对象模型
HTML文档被解析成DOM树模型，可以用DOM提供的API去获取操纵HTML文档上的元素 ,如document.getElementById("id")，这个就是一个DOM里的API，用于获取HTML标签元素 ,再用js操作
获取文档对象模型
由于代码加载顺序 ,一般将script标签写在后面 ,当script写在代码前面的时候可以使用window.onload回调函数
<script> window.onload = function () { var test = document.getElementById('a2'); test.action = 'www.qq.com' }; </script> <form id="a2" action="www.baidu.com" type=""></form>
获取DOM三种方式
1).通过id找到标签, 唯一
var obj = document.getElementById('box1')
2).通过class找到标签, 不唯一 ,得到一个对象集合(就算仅一个对象也是一个集合) ,可以通过索引取到dom ,也可以遍历
var test = document.getElementsByClassName('a1');
test[0] #集合中的一个对象
3).通过标签找到标签 ,也不唯一
var test = document.getElementsByTagName('a');
对值的操作
1) 仅对标签中的文字进行替换操作
dom对象.innerText = '值'
2) 对标签实现替换操作
dom对象.innerHTML = '<input type="text">' # 这个dom对应的标签就变成了input了
对属性操作
dom对象.title = '' #改变悬浮提示
dom对象.className = '' #直接改变了class选择器
dom对象.name = '' #改变name属性,input标签中的name
dom对象.value= '' #改变value属性,input标签中的value
dom对象.id= '' #改变标签id选择器
dom对象.src= '' #更改image的src
dom对象.href= '' #对a标签的跳转修改
dom对象.自定义属性= '' #对自定义属性
dom对象.action= '' #form标签的动作 ,修改提交表单地址
dom对象.type= '' #对input标签类型操作修改
dom对象.method= '' #对表单的请求类型操作
dom对象.style.margin = '' #对标签css样式操作
6.dom操作事件驱动
事件封装函数 ,函数中定义操作dom对象 ,当事件触发后执行函数
onclick (单击事件)
ondblclick (双击事件)
onmouseenter (鼠标悬浮事件)
oninput (实时监听输入事件)
语法: dom对象.事件 = 函数 #重点 函数中可以调用this ,这个this就像self ,是dom对象本身
####点击事件触发函数
<div style="width: 20px;height: 20px;background-color: burlywood" class="d1">n</div> <script> let test = document.getElementsByClassName('d1'); test[0].onclick = function () { alert(this.innerText); } </script>
####鼠标悬浮事件触发函数实现盒子移动
<div style="width: 200px;height: 200px;background-color: burlywood" class="d1">n</div>
<script>
let test = document.getElementsByClassName('d1')[0];
let num = 0;
let timer1= null;
test.onmouseenter = function () {
clearInterval(timer1);
timer1 = setInterval(function () {
num += 10;
test.style.marginLeft = num + 'px';
}, 50);
};
</script>
####实时输入监听
<div style="width: 200px;height: 200px;background-color: burlywood" class="d1"></div>
<input type="text" id="i1">
<script>
let test = document.getElementsByClassName('d1')[0];
let test1 = document.getElementById('i1');
test1.oninput = function () {
test.innerText = this.value;
}
</script>
####实现多选条件按钮 ,按钮点击会出现选中状态 ,可以多选 ,当点击全部按钮 ,仅全部按钮变色 ,最好是通过添加class来渲染按钮
<div>
<input type="button" value="全部" id="s1">
<input type="button" value="篮球" class="like" id="s2">
<input type="button" value="rap" class="like" id="s3">
<input type="button" value="唱跳" class="like" id="s4">
</div>
<script>
let s1 = document.getElementById('s1');
let like = document.getElementsByClassName('like');
for (let i = 0; i < like.length; i++) {
like[i].numi = i;
like[i].onclick = function () {
this.style.backgroundColor = 'burlywood';
s1.style.backgroundColor = 'cornflowerblue';
}
}
s1.onclick = function () {
for (let x = 0; x < like.length; x++) {
like[x].style.backgroundColor = 'cornflowerblue';
}
this.style.backgroundColor = 'burlywood';
}
</script>
7.dom的创建添加删除
前后端交互思想 ,数据驱动试图 ,根据后端给的数据 ,决定前端展示的标签和内容
document.getElementById #选中html中的标签dom对象
document.createElement(' html标签 ') #创建dom对象
父dom对象.appendChild(dom对象) #为dom对象创建子标签 ,子标签也要是dom对象
父dom对象.removeChild(dom对象) #移除指定的子对象
<body> <ol id="ol1"></ol> <script> //获取dom let testol = document.getElementById('ol1'); //后端数据,驱动页面 dataarry = [900, 700, 300, 400]; //forEach 每个对象 ,和对应索引传给函数 dataarry.forEach(function (item, index) { //创建dom let testli = document.createElement('li'); testli.num = index; testli.innerHTML = `<h1>${item}</h1> <button class="del">删除</button>`; //dom中追加子元素 testol.appendChild(testli); }); let odel = document.getElementsByClassName('del'); for(let i=0;i<odel.length;i++){ odel[i].onclick = function () { //移除dom ,ol标签的dom对象移除自己的子对象那就是li标签, 通过odel这个dom对象的父标签就是li标签 ,使用this.parentNode可直接获取li标签 testol.removeChild(this.parentNode); } } </script> </body>
8.BOM浏览器对象模型
hostname #获得服务器主机名
port #获得服务器的端口
pathname #获得请求的页面的路径名
protocol #获得协议
search #获得请求参数
reload() #重新载入页面
<script> console.log(window.location.hostname); console.log(window.location.port); console.log(window.location.pathname); console.log(window.location.protocol); console.log(window.location.search); window.location.reload(); </script>
