前端三大件--JavaScript详解
Posted 乘凉者 栽树人
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端三大件--JavaScript详解相关的知识,希望对你有一定的参考价值。
javascript入门到实战
1、入门
1.1、引入JavaScript
-
内部标签
<script> //asasda </script>
-
外部引入
a.js
//asda
test.html
<script src="a.js"></script>
1.2、基本语法
<script>
const score = 71;
if (score>60&&score<=70)
alert("及格");//alert 在网页中弹窗
console.log("嘿嘿");//控制台输出
else if (score>70&&score<=80)
alert("优秀");
else
alert("其他");
</script>
跟java的语法及其类似,重点是f12操作调试器
2、数据类型
大体上还是跟Java差不多,就写几个不一样的
-
跟Java差不多,需要注意的是不分整数和小数
-
只有null和undefined
- null 空
- undefined 未定义
-
数组
- 特别注意,数组下标越界:undefined,而不会报下标越界错误
-
对象
- 对象使用大括号
- 数组使用中括号[]
2.1、字符串
-
转义字符
\\' \\n \\t \\u4e2d \\x41
-
多行字符串编写
let msg='hello asdad' + 'asd' + 'asd' + 'ad'
-
模板字符串
let name="kongkong"; let age=9; let msg='加油,$name'
-
字符串长度
str.length
-
字符串不可变性
-
大小写转换
student.toUpperCase()//变成大写 student.toLowerCase()//变成小写
-
正则表达式
[) student.substring(1); student.substring(1,2);//从第下标1截取到2
2.2、数组
-
定义一个数组
let array=[1,2,3,4,5,6]
-
长度
array.length
-
通过元素获取下标索引
array.indexOf(2)
-
slice()截取数组的一部分
array.slice(xx,xx)
-
push(),pop()尾部
push:插入到尾部 pop:弹出尾部元素
-
unshift(),shift()头部
unshift():插入到头部 shift():弹出头部元素
-
排序sort()
["A","c","B"] array.sort() ["A","B","C"]
-
元素反转reverse
["A","C","B"] array.reverse() ["B","C","A"]
-
concat返回一个新的数组
["A","c","B"] array.concat([1,2,3]) ["A","C","B",1,2,3]
-
join连接字符串
["C","B","A"] array.join('-') "C-B-A"
-
多维数组
array=[[1,2],[3,4],[2,3]] array[1][0] 2
2.3、对象
JavaScript中的所有键都是字符串,值是任意对象
-
对象赋值
person.name="kongkong"
-
使用不存在的对象属性,不会报错
person.name
-
删除属性
delete person.name
-
动态添加
person.oo="asdas"
-
判断属性是否在对象中
'age' in person
2.4、流程控制
-
if判断
-
while和do while循环
-
for循环
-
forEach循环(遍历每一个元素)
var age=[12,3,463,124,4,11,123] age.forEach(function(value) console.log(value) )
2.5、Map和Set
-
Map集
//对于过多的列表,每次取值的解决 //var names=["sa","asd","ads"] //var score=["12","41","123"] var map=new Map([['sa',12],['asd',41],['ads',123]]); var name=map.get('tom');//通过key获取value map.set('adin',123);//新增和修改 map.delect("tom");//删除
-
set:无需不重复的集合
set.add(2);//添加 set.delect(1);//删除 console.log(set.has(3));//是否包含
3、函数
-
函数定义
- function()函数
function num()
- 匿名函数
var a =funtion num() //a()调用
-
作用域
- 局部
function b() var x=1; ....
- 全局
var x=1; function c() .....
- 全局对象
var x='xxx'; alert(x); alert(window.x);
- let关键字
function a() for(var i=0;i<100;i++) console.log(i); console.log(i+1);//可以发现i即使出了整个作用域也可以继续运行
解决局部作用域冲突问题
function a() for(let i=0;i<100;i++) console.log(i); console.log(i+1);//Uncaught ReferenceError:i is not defined
- const常量
用const定义的常量是不能被改变的,只可以读取
const PI='3.14'; console.log(PI); PI='123';//TypeError
3.1、方法
-
定义方法
方法就是把函数放在对象里面,对象只有两个东西:属性和方法
var kong= name='kong', bithrday:2000, //方法 age:function() var now=new Date().getFullYear(); return now-this.bithrday; //属性 kong.name //方法 kong.age()
通过apply方式调用,控制this的指向
function getAge() var now=new Date().getFullYear(); return now-this.birth; var kong= name='kong', birth:2000, age:getAge var bai= name='kong', birth:2000, age:getAge getAge.apply(kong,[]);//apply控制了this的指向,指向kong
3.2、日期
常用时间调用
var now=new Date();
now.getFullyear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全国统一的时间
console.log(new Date(1578106175991))//当前时间
now.toLocaleString()//当地时间字符串
now.toLocaleString()//当前时间标准格式
3.3、JSON
-
什么是json
- 简洁和清晰的层次结构使得JSON称为理想对象
- 易于人阅读和编写,同时也易于机器解析
-
任何js支持的类型,格式:
- 对象用
- 数组用[]
- 键值对key:value
-
JSON字符串和JS 对象的转化
var user= name:"kong", age:3, sex:'男' //对象转化为json字符串 var jsonUser=JSON.stringify(user); //json字符串转为对象 var obj=JSON.parse('"name":"kong","age":"2"')
4、面向对象编程
- 类:模板
- 对象:具体的实例
var user=
name:"kong",
age:3,
sex:'男'
var zhiye=
name:"员工"
;
//原型对象
zhiye.__proto__=user;
- class继承
//Es6的新特性
//定义一个学生类
class student
constructor(name)
this.name=name;
hello()
alert('hello')
class littleStudent extends student
constructor(name,score)
this.name=name;
this.score=score;
speak()
alert('小学生')
var xiaoming=new student("xiaoming");
var xiaohong=new student("xiaohong");
5、操作BOM对象(重点)
BOM:浏览器对象模型
- window 浏览器窗口
window.alert
ƒ alert() [native code]
window.alert(1)
undefined
window.innerHeight
787
window.innerWidth
167
- Navigator 封装浏览器信息
Navigator.length
0
Navigator.name
"Navigator"
Navigator.caller
null
- screen 屏幕尺寸
screen.width
1536
screen.height
864
- location 当前页面的URL信息
hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/s?ie=UTF-8&wd=jkh&tn=88093251_22_hao_pg"
origin: "https://www.baidu.com"
pathname: "/s"
port: ""
protocol: "https:"
- cookie
document.cookie
- history 服务器的历史记录
history.back()//后退
history.forword()//前进
- document 获取文本
document.title()
6、操作DOM对象
-
核心
- 更新:更新Dom节点
- 遍历dom节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
-
获得dom节点
var h1=document.getElementsByTagName('h1'); var p2=document.getElementById('p1'); var kk=document.getElementsByClassName('kk'); var father = document.getElementById('father'); var child=father.children;//获取所有father下的子节点 father.firstChild father.lastChild
-
更新dom节点
<div id="id1"> </div> <script> var id1=document.getElementById('id') </script>
操作文本
- id1.innerText=‘456’ 修改文本的值
- id1.innerHTML=‘
asa
’ 解析HTML
操作JS
id1.style.color='yellow'; id1.style.fontSize='20px'; id1.style.padding='2em'
-
删除节点
删除多个节点的时候,children一直在变化,也就是说删除了一个节点,下一个节点会依次顶替上一个节点
<div id="father"> <h1>2</h1> <p id="p1">3</p> <p class="p2">4</p> </div> <script> var self=document.getElementById('p1'); var father=p1.parentElement; father.removeChild(self) //假设先删除了第一条语句执行第三条语句的时候它就会报错,因为在第一条语句执行完毕后,第三条语句的存放位置会相应发生改变 father.removeChild(father.children[0]) father.removeChild(father.children[1]) father.removeChild(father.children[2]) </script>
-
创建节点
<script> var newP=document.createElement('p');//创建一个P节点 newP.id='newP'; newP.innerText='hellword'; //创建一个标签节点 var myscript=document.createElement('script'); myscript.setAttribute('type','text/javascript'); var mystyle=document.createElement('style'); myscript.setAttribute('type','text/css'); mystyle.innerHTML='bodybackgroud-color:chartreuse;'//设置标签内容 document。getElementByTagName('head')[0].appendChild(mystyle) </script>
-
插入节点(insertBefore)
var ee=document.getElementById('ee'); var js=document.getElementById('js'); var list=document.getElementById('list'); //要包含的节点,insertBefore(newNode,targetNode) list.insertBefore(js,ee);
7、表单
- 文本框 text
- 下拉框
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- …
表单目的:提交信息
<form action="post">
<p>
<span>用户名:</span>
<input type="text" id="username">
</p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
var text=document.getElementById('username');
var boy=document.getElementById('boy');
var girl=document.getElementById('girl');
//得到输入框的值
text.value
//修改输入框的值
text.value='123'
boy.checked;
girl.checked=true;
</script>
- md5加密
<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
<p>
<span>用户名:</span>
<input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span>
<input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件onclick-->
<button type="submit">提交</button>
</form>
<script>
function a()
alert(1);
var name=document.getElementById('username');
var pwd=document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value=md5(pwd.value);
return true;
</script>
8、jQuery
- 语法:$(selector).action()
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是css
$('#test-jquery').click(function ()
alert('hello,world')
)
</script>
- 选择器
$('p').click();
$('#id').click();
$('.class').click();
9、总结
1、重点是要多参考jquery中文文档学习
2、学好了可以去参考一下做一些小游戏
以上是关于前端三大件--JavaScript详解的主要内容,如果未能解决你的问题,请参考以下文章