🥝前端~JS
目录
1、数据类型和变量
2、函数
3、内置对象和对象
4、事件
5、⭐JS的DOM对象⭐
6、查找
7、JS正则表达式
8、DOM操作表单
- 什么是js?
js(JavaScript)一种直译式脚本语言。JavaScript脚本可直接放在HTML语言中,在支持js的浏览器上运行。
js分为：ECMAScript(基础语法）、DOM(文档对象模型）、BOM(浏览器对象模型）。
JS:行内JS，内部JS，外部JS,（一个Script标签引入只能引入一个，写在内部时，可以写在任意位置）
注意》》》
- JS中var定义变量
- Java时强类型语言
- JS弱类型语言，动态语言
- 变量先声明后赋值，可以同时定义赋值
- JS默认值为undefined（未定义）
- JS中的变量村咋变量域的提升（提高变量的声明）
一、数据类型和变量
1、数据类型的转换
- JS的基本数据类型：
String，Number，Boolean - 引用类型：
对象，数组 - typeof:获取数据的数据类型（与java的instanceof相似）
- js中如果出现||则两边会转为Boolean计算
①、String 类型
- ‘’ 或者"",都代表字符串
其他数据类型转String类型：》》
console.log('-------------------------------');
console.log(String(123));
console.log(String(-123));
console.log(String(1.23));
console.log(String(null));
console.log(String(NaN));
console.log(String(undefined));
②、Number 类型
数据类型的转换》》》
console.log(Number('ads'));//NaN
console.log(Number('123'));
console.log(Number('ab12'))//NaN
console.log(Number(NaN));//NaN
console.log(Number(undefined));//NaN
console.log(Number(null));//0
console.log(Number(""));//0
console.log(Number(" "));//0
③、Boolean 类型
数据类型的转换》》
console.log(Boolean(123));
console.log(Boolean(1.23));
console.log(Boolean(-123));
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(""));//false
console.log(Boolean(" "));//true
console.log(Boolean(undefined));//false
2、对象和数组
①、对象
注意：>>>
- 对象数据以键值对为单位
- 每个键值对用逗号隔开
- 键默认是字符串
- 键与值：隔开
- {}:标识对象
<body>
<script>
//方式一
var people={
name:'小王',
age:30,
address:"家庭地址"
}
console.log(people);
//方式二
var p1=Object.create(null);
console.log(p1);
//方式三
var p2=new Object();
console.log(p2)
</script>
</body>
②、数组
- 任意数据类型，长度任意改变
- new Array()：空数组
- new Array(值列表）：创建并赋值
- var arr=[值列表]：推荐使用
- 三种遍历方式；for/for……in/forEach
- splice(1,3):截取个数是3个，直接修改源数据（有替换效果，后面继续加参数即可）
- slice(1,3):截取下标1，2,不会修改源数据
三种创建方式》》
//方法一
var arr1=new Array(4);
console.log(arr1);
//方法二
var arr2=[1,2,3,4,5,'123','ddd'];
console.log(arr2);
//方法三
var arr3=new Array(1,2,34,'34dsw');
console.log(arr3);
三种遍历方式》》
var arr4=new Array(6);
arr4[1]=10;
arr4[5]='abc';
console.log(arr4);
console.log("----------------循环遍历数组-----------------------");
for(var i=1 ;i<arr4.length;i++){
console.log(arr4[i]);
};
console.log("--------------------------------------------------")
for(var i in arr4){
console.log(arr4[i]);
};
console.log("--------------------------------------------------")
arr4.forEach(function(e,index,arr4){
console.log(e);
})
数组自定义：
var arr1=new Array(1,2,3,4,5);
console.log(arr1);
arr1['家']='源';
console.log(arr1);
注意：自定的元素三种遍历中只有for……in可以遍历出来，其余会自动省略
二、函数
- function 函数名（参数列表）{方法体}
- JS中定义形参可以省略var（根据参数名占位）
- JS中形参与实参不是一 一对应（因为js中变量只声明不赋值存在默认值）
- JS中函数默认存在返回值undefined
- 函数可以任意嵌套
- JS中作用域只看函数、
var fun1=function【方法名】(参数){
方法体
}
① 、方法名一般不使用，除非递归情况下使用
var i=1;
var fun1=function f1(a){
if(a==10){
return a;
}
return f1(++a);
}
console.log(fun1(i));
1、函数声明转函数表达式
+、-、！、~加在函数前面后面加（）自动调用函数
方式一》》
function fun1(){
console.log('fun1~~~');
!function fun2(){
console.log("fun2!!!!");
}()
}
fun1();
方式二》》
function fun1(){
console.log('fun1~~~');
return function fun2(){
console.log("fun2!!!!");
}
}
fun1()();
- JS作用域只看函数
- var声明会自动提高变量
- 如果在函数内部没有通过var声明变量是全局变量（在使用前必须先调用函数，初始变量）
- 函数的作用域提升，只有函数声明方式定义的函数存在作用提升
fun1();
function(){
console.log(a);//undefined
var a=2;
}
//等同于=====
function fun1(){
var a;
console.log(a);//undefined
a=2;
}
fun1();
2、匿名函数
- js中的函数不存在重载
(function(){
console.log('我是匿名函数！！');
})()
3、this关键字
-
指代上下文对象，运行期间绑定对象
-
注意：全局作用域中定义的函数与变量，相当于全局对象widow对象属性与功能。 -
this的决策树
- ① this所在函数是否是通过new 调用的，是则指代new对象
- ②this所在的函数是否通过对象点调用–>obj
- ③都不是则是指代window对象
-
call():（新对象，实参……）方法修改指代对象，并执行
-
apply():（对象[实参]）
三、内置对象和对象
1、内置对象
①、Arguments:只在函数内部定义，保存了函数实参（只能在函数内部使用，但数组使用，获取多实参的传递）
②、String：常用方法toLowerCase()、toUpperCase()、CharAt()、length……
③、Math:常用方法Random()、max()、pow()、round()
④、Date:常用方法：toDateString()、toLocaleDateString()、getMonth()、getFullYear()、getDate(）……
console.log("----------------------")
var date=new Date();
console.log(date);
console.log(date.toDateString());
console.log(date.toLocaleDateString());
console.log(date.getMonth());
console.log(date.getFullYear());
console.log(date.getDate());
2、对象
- 操作对象的方式：
- 对象名.key|属性名（常用）
- 对象名[“key的名字”|“属性名”]
<body>
<script>
var demo=function(a,b,c){
console.log(arguments);
}
demo(1,2,3,4,5,6);
console.log("------------------------------------")
var a=10;
function fun1(a){
var a=100;
console.log(window.a);
}
var a=1000;
fun1(a);
fun1(this.a);
var a=30;
var people={
name:"小屋",
age:100,
num:[
a=10,b=20
],
't i t l e':true
}
</script>
</body>
3、序列化（JS与JSON)
- JSON:轻量级数据交换格式（以前使用xml实现前后端的数据传输）
- 优点：JSON是js的字符串表现形式
- JS对象就是符合JSON语法格式的对象
- JS~JSON:进行序列化操作
- JSON~JS:进行反序列化
<body>
<script>
//创建对象方法一
var people={
name:'uuuu',
age:123,
fun1:function(){
console.log("敲代码！！！");
}
}
var p1=people;
//创建对象方法二
var p2=new Object();
//创建对象方法三
var p3=Object.create(null);
//序列化js-->json
var json=JSON.stringify(p1);
console.log(typeof json);//String
//反序列化json-->js
var js=JSON.parse(json);
console.log(typeof js);//object
</script>
</body>
四、事件
- 事件是通过某个行为触发一段代码的执行动作
- 分类：鼠标、键盘、焦点、表单、文档
- 常用绑定方式：
- ①、onclick、ondbclick标签属性行内定义
- ②、通过on在js代码中为元素绑定事件
1、鼠标事件
- onclick、ondbclick事件
<body>
<!-- 事件绑定方式一 -->
<div onclick="console.log('别点我')" id="div" style="width: 100px;height: 100px;border: 3px pink solid;">
好家伙
</div>
<script>
// 事件绑定二
var something=document.getElementById("div");
something.ondblclick=function(){
console.log("不允许双击！");
}
</script>
</body>
运行结果
2、键盘按下事件
- keydown(按下）,keyup(键盘弹起），event.keycode(获取按键值）,window.load(加载事件），display=‘block’（显示）
<body>
<p>请输入：<input id="input" type="textarea"></p>
<script>
var input= document.getElementById("input");
input.onkeydown=function(){
console.log("开始输入");
}
input.onkeyup=function(){
console.log(event.keyCode)
console.log("键盘弹起~")
}
</script>
</body>
3、定时器
- ①、重复执行，setInterval(function,ms)
- 停止定时器：clearInerval(定时任务编号）
- ②、延迟执行，setTimeout(function,ms)
- 停止定时器：clearTimeout(定时任务编号）
3.1、通过定时器实现倒计时
<body>
<div id="box">
</div>
<script>
var d1=document.getElementById('box');
var i=1;
var x=setInterval(() => {
d1.innerHTML=i++;
if(i==11){
clearInterval(x);
}
}, 1000);
d1.onclick=function(){
alert('2334');
};
</script>
</body>
3.2、通过定时器实现心动
<style>
.div1{
text-align: center;
height: 500px;
line-height: 500px;
}
#div1{
font-size: 100px;
color: pink;
}
#div2{
font-size: 200px;
color: salmon;
}
#div3{
font-size: 300px;
color: gold;
}
#div4{
font-size: 400px;
color: darkturquoise;
}
#div5{
font-size: 500px;
color: darkmagenta;
}
#div6{
font-size: 600px;
color: blue;
}
#div7{
font-size: 700px;
color: red;
}
</style>
</head>
<body>
<div class="div1" id="div1">
♥
</div>
<script>
var demo=document.getElementById("div1");
var i=1;
setInterval(() => {
demo.id='div'+i++;
if(i==8){
i=0;
}
}, 250);
</script>
</body>
结果演示：》》
五、JS的DOM对象
document object model的英文缩写翻译成中文的意思是文档对象模型。- html加载时被解析成DOM树，节点组成：元素节点，注释节点，属性节点，文本节点。
- 操作页面的元素能力，操作节点，创建节点等（增删查改）
1、获取元素节点
①根据id获取元素节点
②根据class获取元素节点
③根据元素名字获取节点
④根据元素属性名获取节点
<body>
<div id="div1">好机会</div>
<div class="div2">你好世界</div>
<input name="input1" type="text">
<script>
//①根据id获取元素节点
var div1= document.getElementById("div1");
div1.style.background="pink";
//②根据class获取元素节点
var div2=document.getElementsByClassName("div2");
console.log(div2);
div2[0].style.background="hotpink";
//③根据元素名字获取节点
var div3=document.getElementsByTagName("div");
console.log(div3);
div3[0].onclick=function(){
console.log("感谢你的点击~")
}
//④根据元素属性名获取节点(通过name属性值获取)
var div4=document.getElementsByName('input1');
console.log(div4);
</script>
</body>
2、创建节点、插入节点
- document.createElement(“id”):根据标签名创建新节点
- 插入节点：父节点.appendChild（子节点）
<body>
<ul id="myul">
<li>tea</li>
</ul>
<script>
//创建div标签方法一
var div=document.createElement("div");
//创建文本
var t1=document.createTextNode("好家伙！");
console.log(t1);
//加入到div标签中
div.appendChild(t1);
//加入到body标签中
document.body.appendChild(div);
//方法二
var p=document.createElement("p");
p.innerHTML="奥里给！";
// p.innerHTML+="<p>彩虹海</p>"方式覆盖;
document.body.appendChild(p);
//insertBefore();
var li=document.createElement("li");
var text=document.createTextNode("好喝的~");
li.appendChild(text);
//插入
var myul=document.getElementById("myul");
myul.insertBefore(li,myul.childNodes[0]);
</script>
</body>
3、创建图片节点
<body>
<script>
//方式一
var img=document.createElement("img");
img.src="https://webstatic.mihoyo.com/ys/event/e20210901-fab/images/poster1.bccfc913.jpg";
document.body.appendChild(img);
//方式二
var div=document.createElement("div");
div.innerHTML="<img src='https://webstatic.mihoyo.com/ys/event/e20210901-fab/images/1_poster.4aa4c624.png' />"
document.body.appendChild(div);
</script>
</body>
六、查找
1、简介查找
- ParantNode:父节点
- ChildNodes:子节点（包括换行空格）
- ChildElementCount:子节点个数
- firstChild、lastChid:第一个节点/最后一个节点
- firstElementChild、lastElementChild：第一个或最后一个元素
- firstElementChild.nextElementSibling:第一个元素的下一个元素节点
<body>
<ul id="ul">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</u>
<script>
var ul=document.getElementById("ul");
console.log(ul.parentNode);//父节点
console.log(ul.childNodes);//子节点
console.log(ul.childElementCount)//子节点个数
console.log(ul.firstChild)//获取第一个子节点
console.log(ul.lastChild)
console.log(ul.firstElementChild)//第一个元素节点
console.log(ul.lastElementChild)
</script>
</body>
2、其它节点操作
- 替换（可以实现节点的移动）
- 父节点.replaceChild(newNode,oldNode)
- 克隆
- 父节点.cloneNode(false:浅拷贝，true:深拷贝）
- id:属性也会被克隆需要修改
- css,js不会被克隆（行内的被纳为属性会被克隆）
- 删除
- 父节点.removeChild(子节点）：返回删除的节点
演示：》》
<body>
<ul id="ul">
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<script>
//替换
var ul=document.getElementById("ul");
document.body.appendChild(ul);
//克隆
var cul=ul.cloneNode(true);
console.log(cul);
document.body.appendChild(cul);
//删除
ul.removeChild(ul.firstElementChild);
</script>
</body>
七、JS正则表达式
- 如何在JS中表示正则表达式
- new RegExp(“正则”):显示定义—"\d{3}"
- /正则表达式/g(全局匹配）：隐式定义—/\d{3}/(`推荐！）
- 如何与字符串做匹配
- test(String)方法测试（满足条件返回true)
- 字符串.match(正则):找到满足条件的子串返回
测试：》》》
<body>
<script>
var str='ssdg123dde';
//方式一
var exp1=new RegExp("\\d{3}");
console.log(exp1);
//方式二
var exp2=/\d{3}/;
console.log(exp2);
console.log(exp1.test(str));
console.log(exp2.test(str));
console.log(str.match(exp2));
</script>
</body>
八、DOM操作表单
1. 获取表单节点
①直接获取方式
②document.表单的name属性值
<body>
<form method="GET" name="form1">
<p>
姓名：<input type="text" name="text">
<input type="button" name="button1" value="提交" onclick="fun1()">
</p>
<p>
密码：<input type="password" name="psd">
<input type="button" name="button2" value="提交">
</p>
</form>
<script>
//获取表单节点
var form1=document.form1;
console.log(form1);
</script>
</body>
2. 获取表单元素节点
①直接获取方式通过id，className
②表单节点元素name属性值
//获取表单元素节点通过name属性值
console.log(form1.psd);
3. 获取值
①普通html元素div,p……innerHTML、innerText
②表单元素值：元素节点.value
③一组单选框，显示被选中的值，多选框需要遍历，使用checked检查遍历，下拉列表使用selected遍历检查
<body>
<script>
//获取表单节点
var form1=document.form1;
//普通方式获取值
var input=document.getElementById("in1");
console.log(input.value)
//表单通过id获取值
console.log(form1.in1.value);
</script>
</body>
4. 提交信息
①button+点击事件+submit方法
②submit+标签配合一个点击事件+return
③任意提交标签+表单节点的提交事件+submit="return xx()”
<body>
<form method="GET" name="form1">
<p>
姓名：<input type="text" name="text">
<input type="button" name="button1" value="提交" onclick="fun1()">
</p>
<p>
密码：<input type="password" name="psd">
<input type="button" name="button2" value="提交">
</p>
<p>
<p>爱好：</p>
<p>
JAVA语言<input id="in1" type="checkbox" name="hobby" value="java" checked>
C++语言<input type="checkbox" name="hobby" value="c++">
Python语言<input type="checkbox" name="hobby" value="python">
</p>
</p>
</form>
<script>
//获取表单节点
//var form1=document.form1;
//console.log(form1);
//获取表单元素节点
// console.log(form1.psd);
//普通方式获取值
//var input=document.getElementById("in1");
//console.log(input.value)
//表单通过id获取值
//console.log(form1.in1.value)
var form=document.form1;
console.log(form);
console.log(form.text);
console.log(form.psd);
function fun1(){
if(form.text.value!=''){
form.submit();
}else{
alert("请输入用户名！")
}
}
</script>
</body>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
