1、快速入门
1.1 引入JavaScript
内部标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert('hello,word');
</script>
</head>
<body>
</body>
</html>
外部引入
- 新建一个js文件
<script src="q.js">
</script>
1.2基本语法入门
- JavaScript中严格区分大小写
- 定义变量可以用java代码规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var num=1;
var score=81;
if(score>70 && score<80){
alert("成绩合格");
}else if(score>80 && score<90){
alert("成绩优秀");
}else{
alert("成绩不合格");
}
</script>
</body>
</html>
- console.log(score) 在浏览器中打印变量
1.3数据类型
number
- JS不区分小数和整数,统一用Number表示
123 //整数
123.1 //浮点数
1.125e3 //科学计数法
NaN //not a number
Infinity //表示无限大
字符串
‘abc’,“abc”
布尔值
true,false
逻辑运算
&&//两个都为真,结果为真
|| //一个为真,结果为真
! //真既假,假既真
比较运算符
= //赋值
1, "1"
== 等于(类型不一样,值一样,也会判断为true)
=== 绝对等于(类型一样,值一样,结果为true)
这是一个JS的缺陷,坚持不要使用 == 比较
- NaN===NaN,返回false,这个NaN与所有的数值不相等,包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数
尽量避免使用浮点数进行计算,存在精度问题
一般用丨a-b丨某个精确度,来表示a=b
Math.abs(1/3-(1-2/3))<0.0000001
null和undefined
- null 空
- undefined 未定义
数组
java的数组必须是相同类型,但JS不需要严格规范
//保证代码可读性,尽量使用[]
var arr=[1,2,3,4,5,'hello',null,true];
console.log(arr[5]);
//第二类定义方法
new Array(1,2,3,4,5,'hello');
对象
- 对象是大括号,数组是中括号
- 每个属性之间使用逗号隔开,最后一个不需要逗号
var person = {
name:'Tom',
age:3,
tags:['js','java','web','...']
}
1.4严格检查模式
<!--
前提:IEDA需要设置支持ES6语法
'use strict';严格检查模式
必须卸载JavaScript第一行
局部变量建议使用let定义
-->
<script>
'use strict';
let i=1;
</script>
2、数据类型
2.1字符串
正常字符串我们使用 单引号,或者双引号包裹
- 注意转移字符
\' //单引号
\n //回车
\t //table
\u //Unicode字符
\x //Ascall字符
多行字符串编写
- `是table上面的键
<script>
'use strict';
var msg=
` hello
word
你好
nihao`
</script>
模板字符串
<script>
'use strict';
let name ='Tom';
let age= 3;
var msg=`你好,${name}`;
</script>
字符串长度
- console.log(msg[1]) 去指定下标字符
字符串的可变性
不可变
大小写转换
这里是方法 不是属性
console.log(student.toUpperCase() )
- console.log(student.indexOf('t'))
- console.log(student.indexOf('u'))
substring
substring,从0开始截取字符串
-
console.log(student.substring('0'))
- student
-
console.log(student.substring('1'))
- tudent
2.2数组
<script>
'use strict';
var arr=[1,2,3,4,5,6,7,"1","2"];
</script>
长度
- alert(arr.length)
- 注意:假如给arr.length赋值,数组大小就会发生变化~
- 如果赋值过小,元素就会丢失
indexOf()方法
通过元素获得下标索引,字符串的 “2” 和数字2 是不同的
- console.log(arr.indexOf('2'))
- 8
- console.log(arr.indexOf(2))
- 1
slice()方法
截取 Array 的一部分,返回的一个新数组,类似于 String 中 substring
- console.log(arr.slice(1,7))
- Array(6) [ 2, 3, 4, 5, 6, 7 ]
push(),pop()尾部
pop尾部弹出
-
arr
- Array(9) [ 1, 2, 3, 4, 5, 6, 7, "1", "2" ]
-
arr.pop()
- "2"
-
arr.pop()
- "1"
push()尾部加入
-
arr.push(0) //加入数字0
- 7 //数组长度
-
arr
- Array(7) [ 1, 2, 3, 4, 5, 6, 0 ]
-
arr.push(10) //加入数字10
- 8 //数组长度
-
arr
- Array(8) [ 1, 2, 3, 4, 5, 6, 0, 10 ]
unshift(),shift() 头部
- unshift:压入到头部
- shift:弹出头部的一个元素
排序sort()
- 冒泡排序规则
- arr.sort()
元素反向排序
- arr.reverse()
concat()
添加元素后,不会更改现有的数组,只会返回一个新的数组
连接符 join()
- 打印拼接数组,使用特定的字符串连接
- arr.join('-')
多维数组
- arr=[[1,2],[3,4],['5','6']]
填充 fill()
- arr.fill(1)
2.4对象
若干个键值对
- javascript 中对象,{…}表示一个对象,键值对描述属性xxx:xxx,多个属性之间用逗号隔开,最后一个属性不加逗号!
- jJavaScript 中的所有的键都是字符串,值是任意对象!
//定义了一个person对象,它有四个属性
"use strict"
var person={
name:"海摆摆",
age:22,
email:"[email protected]",
score:66
}
赋值
- 控制台中
person.name='小海儿' ;
使用不存在的对象属性
- 不会报错 undefined
动态的删减属性,通过delete删除对象的属性
delete person.name;
true
动态的增加属性
person.over='韭摆儿'
判断属性值是否在对象中 xx in xx
'age' in person
true
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('tostring') >false
person.hasOwnProperty('age') >true
2.5 Map和Set
- ES6新特性
Map
"use strict"
var map= new Map([['tom',100],['jack',60],['toni',80]]);
var score= map.get('tom');//通过key获取value
console.log(score);//打印结果
map.set('admin',150);//新增或修改 key--value
map.delete("tom");//删除键值对
Set
- 无序不重复的集合
- set 可以去重
var set = new Set([3,1,1,1,1]);
console.log(set);
>Set [ 3, 1 ]
2.6 iterator
ES6新特性
遍历Map
- let 声明局部变量或者全局变量
var map=new Map([['tom',100],['jack',80],['toni',90]]);
for(let x of map){
console.log(x);
}
遍历set
var set= new Set([2,1,3,4,4,4,4])
for(let x of set){
console.log(x)
}
3、函数
3.1定义函数
- 定义一个绝对值函数
方式一:
一旦执行到 return 代表函数结束,返回结果!
如果没有执行 return,函数执行完也会返回结果,结果就是 undefined
function abs(x){
if (x>=0){
return x
}else {
return -x
}
方式二:
function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs,通过abs就可以调用函数!
方式一和方式二等价!
var abs = function(x){
if (x >= 0) {
return x;
} else {
return -x;
}
}
调用函数
abs(10)
> 10
abs(-10)
> 10
参数问题
javaScript可以传任意个参数,也可以不传递参数~
参数进来是否存在问题?
假设不存在参数,如何规避?
- 手动抛出异常
"use strict"
function abs(x){
if (typeof x!='number'){
throw 'not a number';
}
if (x>=0){
return x
}else {
return -x
}
}
abs()
> Uncaught not a number
arguments
arguments是一个JS免费赠送的关键字;代表传递进来的所有参数,是一个数组!
function abs(x){
console.log("x-->"+x);
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
if (x>=0){
return x
}else {
return -x
}
}
abs(5,6,7,8,9,10,11)
x-->5
5
6
7
8
9
10
11
rest
ES6引入的新特性,获取除了已经定义的参数之外的所有参数
function abs(x,y,...rest){
console.log("x-->"+x);
console.log("y-->"+y);
abs(5,6,7,8,9,10,11)
x-->5
y-->5
5
6
7
8
9
10
11
3.2变量的作用域
了解
在JavaScript中,var定义变量实际有作用域
假设在函数体中声明,则在函数体外不可以使用(可以用"闭包"实现)
function qj(){
var x = 1;
x = x + 1;
}
x = x + 2;//Uncaught ReferenceError: x is not defined
两个函数使用相同的变量名,在函数内部不会冲突
function qj(){
var x = 1;
x = x + 1;
}
function qj2(){
var x = "a";
x = x + 1;
}
内部函数可以访问外部函数成员,反之不行
function qj(){
var x = 1;
function qj2(){
var y = x + 1;
}
var z = y + 1;//Uncaught ReferenceError: y is not defined
}
内部函数和外部函数变量重名
"use strict"
function f1(){
var x=1;
function f2(){
var x="A";
console.log("inner"+x);
}
console.log("outer"+x);
f2();
}
f1();
==========================================================
>outer1
>innerA
规范变量命名
- 变量全部在前面声明完
function f(){
var x=1,
y=2,
z=3;
}
规范全局变量
由于我们的所有变量都会绑定到 window上,如果不同的 js 文件,使用了相同的全局变量,就会产生冲突—>如何减少这样的冲突?
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突问题~
jQuery中就是使用的该方法:jQuery.name,简便写法:$()
"use strict"
//唯一全局变量
var DuPeng={};
//定义全局变量
DuPeng.name='海摆';
DuPeng.add=function (x,y){
return x+y;
}
局部作用域
- console.log(i+1);出了作用域还可以使用
function aaa(){
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);
}
aaa();
- ES6 的 let 关键字,解决了局部作用域冲突的问题
"use strict"
function aaa(){
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);
}
aaa();
3.3方法
- 定义方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
"use strict"
var kuangshen= {
//属性
name:"秦疆",
birth:2000,
//方法
age:function (){
var now=new Date().getFullYear();
return now -this.birth;
}
}
//属性
console.log(kuangshen.name);
//方法要带上()
console.log(kuangshen.age());
在java中this无法指向的,是默认指向调用它的那个对象的;在js中可以使用apply控制this指向
"use strict"
function getAge() {
var now =new Date().getFullYear();
return now-this.birth;
}
var kuangshen ={
name:"狂神",
birth:2000,
//方法
age:getAge
};
var xioming = {
name:"小明",
birth:2000,
age:getAge
}
===================================
> getAge.apply(kuangshen,[]);
4、Date
4.1基本使用
var now =new Date();
console.log(now);//打印此刻的中国标准时间
console.log(now.getFullYear());//年
console.log(now.getMonth());//月
console.log(now.getDate());//日
console.log(now.getDay());//星期几
console.log(now.getHours());//时
console.log(now.getMinutes());//分
console.log(now.getSeconds());//秒
console.log(now.getTime());//时间戳 全世界统一 1970.1.1 0:00:00 到现在的毫秒数
console.log(new Date(1659834921787));//将时间戳转为时间
console.log(now.toLocaleDateString());//转换为当地时间
输出结果:
4.2JSON
"use strict"
var user={
name:"张三",
age:3,
se:"男"
}
console.log(user)//Object { name: "张三", age: 3, se: "男" }
//对象转换为JSON字符串
var jsonuser =JSON.stringify(user);
console.log(jsonuser);//{"name":"张三","age":3,"se":"男"}
//json字符串转换为对象
var obj=JSON.parse('{"name":"张三","age":3,"se":"男"}');
console.log(obj);
4.3 AJAX
- 原生的 js 写法 xhr 异步请求
- jQuery 封装好的方法 $(“#name”).ajax(“”)
- axios请求
5、面向对象
原型对象
javascript、java、c#------都是面向对象的语言;但是 javascript 有些区别!
举个例子,在Java中:类是模板,对象是具体实例,在 javascript 中,需要大家转换一下思维方式!
"use strict"
var student={
name:"张三",
age:3,
sex:"男",
run:function (){
console.log(this.name+"run...")
}
}
//小明也是学生
var xiaoming={
name:"小明"
}
//小明原型指向student
xiaoming.__proto__ = student;
//列2
var Bird = {
fly : function () {
console.log(this.name + " fly...")
}
}
xiaoming.__proto__ = Bird;
console.log(xiaoming.fly());
Class以及继承
class 关键字,是在 ES6 引入的
1、定义一个类、属性、方法
"use strict"
class student {
constructor(name) {
this.name= name;
}
hello(){
alert('hello,'+this.name);
}
}
var jerry=new student("jerry");
var jeck=new student("jeck");
console.log(jerry.hello());
console.log(jeck.hello());
- 继承
- 继承的本质还是原型,只是换了一种更加友好的写法而已
"use strict"
class student {
constructor(name) {
this.name= name;
}
hello(){
alert('hello,'+this.name);
}
}
//定义一个小学生类继承student
class xiaostudent extends student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
myGrade(){
alert(this.name+'一名小学生');
}
}
var jerry=new student("jerry");
var jeck=new student("jeck");
var tom=new xiaostudent("tom");
console.log(jerry.hello());
console.log(jeck.hello());
console.log(tom.myGrade());
6、操作BOM对象(重点)
浏览器介绍
-
javascript 和浏览器关系?
- JavaScript 诞生就是为了能够让他在浏览器中运行
-
BOM:浏览器对象模型
浏览器内核:
- Edge
- Chrome
- Safari
- FireFox
- Opera
第三方浏览器:
- QQ浏览器
- 360浏览器
window对象(重要)
Navigator(不建议使用)
Navigator封装了浏览器的信息
screen对象
- 屏幕尺寸
location(重要)
代表当前页面的URL信息
document
document 代表当前的页面,HTML是怎么展示的?—> HTML DOM文档树
document.title
"百度一下,你就知道"
document.title='海摆海摆'
"海摆海摆"
获取cookie
- document.cookie
劫持cookie原理
www.taobao.com
history(不建议使用)
- history.back() //后退
- history.forward() //前进
7、操作DOM对象(重点)
DOM:文档对象模型
浏览网页就是一个Dom树形结构
- 更新:更新Dom节点
- 遍历:得到DOM节点
- 删除:删除一个DOM节点
- 添加:添加一个新的节点
要操作一个Dom节点,就必须要先获得这个Dom节点、
<body>
<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
"use strict"
//对应css选择器
var father= document.getElementById('father');
var h1= document.getElementsByTagName('h1');
var p1= document.getElementById('p1');
var p2= document.getElementsByClassName('p2');
var childers=father.children;//获取父节点下所有的子节点
</script>
</body>
更新节点
<div id="id1">
<!-- 一个空标签 -->
</div>
<script>
var id1=document.getElementById('id1')
</script>
>id1.innerText='12345'
>"12345"
>id1.innerHTML='<strong>123</strong>'
> "<strong>123</strong>"
>id1.style.color='yellow'
>"yellow"
>id1.style.fontSize='50PX'
>"50PX"
>id1.style.padding='2em'
>"2em"
删除节点
步骤:先获取父节点,通过父节点删除自己
注意:删除多个节点的时候,children 是在时刻变化的,删除节点的时候一定要注意
father.removeChild(p1)
//删除是一个动态的过程
father.removeChild(father.childre[0])
father.removeChild(father.childre[1])
father.removeChild(father.childre[3])
插入节点
我们获得了某个 Dom 节点,假设这个 Dom 节点是空的,我们通过 innerHTML 就可以增加一个元素了,但是这个 Dom 节点已经存在元素了,我们就不能这么干了!会产生覆盖
<body>
<p id="js">JavaScript</p><!--现在我们想把这个标签添加到 div中-->
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);//追加到后面
</script>
</body>
效果如下:
上面是将一个已经存在的节点添加到别处,现在我们新创建节点:
<script>
var js = document.getElementById('js');//已经存在的节点
var list = document.getElementById('list');
//通过JS创建一个新的节点
var newP = document.createElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello,Kuangshen';
//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
//可以创建一个style标签
var myStyle = document.createElement('style');//创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>
插在前面 insertBefore
<body>
<!--现在我们想把这个JavaScript添加到div中JavaEE的前面-->
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
</script>
</body>
8、操作表单
表单是什么?form-----DOM树
- 文本框----text
- 下拉框----select
- 单选框----radio
- 多选框----checkbox
- 隐藏域----hidden
- 密码框----password
- .......
表单的目的:提交信息
<body>
<form method="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 input_text=document.getElementById("username");
var boy_radio=document.getElementById("boy");
var girl_radio=document.getElementById("girl");
>console.log(input_text.value); // 打印输出框的值
> input_text.value ="456";// 修改输出框的值
>var boySelected = boy_radio.checked;//查看返回的结果,是否为true,如果为true,则被选中。
>girl_radio.checked = true;//赋值
</script>
</body>
md5加密
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<!--MD5加密工具类-->
<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
</script>
</head>
<body>
<!--表达绑定提交事件
οnsubmit= 绑定一个提交检测的函数,true,false
将这个结果返回给表单,使用onsubmit接收
action表示提交到哪里,#表示当前页
-->
<form action = "#" method = "post" onsubmit = "return aaa()">
<p>
<span>用户名:</span>
<input type="text" id = "username" name = "username"/>
</p>
<p>
<span>密码:</span>
<input type="password" id = "password" />
</p>
<input type = "hidden" id = "md5-password" name = "password">
<!--绑定事件 onclick 被点击-->
<button type = "submit">提交</button>
</form>
<script>
function aaa(){
alert(1);
var username = document.getElementById("username");
var pwd = document.getElementById("password");
var md5pwd = document.getElementById("md5-password");
//MD5算法
//pwd.value = md5(pwd.value);
md5pwd.value = md5(pwd.value);
//可以校验判断表单内容,true就是通过提交,false就是阻止提交
return true;
}
</script>
</body>
</html>
9、jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jquery-->
<script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<!--
$代表jquery,()内是选择器
公式:$(selector).action()
-->
<a href="" id="test-jquery"> 点我</a>
<script>
$('#test-jquery').click(function(){
alert('hello,jquery');
})
</script>
</body>
</html>
选择器
<script>
//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//class
document.getElementsByClassName();
//jQuery css中的选择器它全部都能用
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器
</script>
事件
mousedown()(jQuery)----按下
mousemove()(jQuery)----移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后,响应事件
//document.ready(function(){})
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX+" y:"+e.pageY)
})
});
</script>
</body>
</html>
节点文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<ul>
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
//document.getElementById('');原本得这样写,太麻烦
//用JQuery
$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值
</script>
</body>
</html>
标签:function,console,入门,JavaScript,name,var,狂神,document,log
From: https://www.cnblogs.com/DuPengBG/p/16844001.html