【JavaScript】引入、基本语法、内部对象、面向对象编程、操作BOM对象、操作DOM对象、操作表单、jQuery

1、引入JavaScript

两种方法

1.1、内部标签

1 <script>  //....</script>

1.2、外部引入

abc.js里写script

.html引入：

1 <script src="js/abc.js">  //...</script>

2、基本语法

2.1变量

一切变量皆var

2.2数据类型

==number==

不区分小数整数

1 123//整数213
2 123.1//浮点数123.1
3 1.123e3//科学计数法1123
4 -99//负数
5 NaN//not a number
6 Infinity//表示无限大

==字符串==

'abd' "abc"

拼接字符串

1 //用``拼接
2 let msg = `
3 zxx
4 是
5 猪头
6 `
7 //<zxx是猪头

模板字符串

1 let name = "zxx";//let 局部变量 es6
2 let age = 3;
3 let msg = "${name}是猪"
4 //console.log(msg)
5 //<zxx是猪

==布尔值==

true false

==逻辑运算==

与&&、或||、非！

==比较运算符

1 =//赋值
2 ==//等于(类型不一样值一样也会判断为true)
3 ===//绝对等于(类型一样值一样结果为true)

tips:

NaN===NaN时也为false，其与任何数值比较都为false，可以用isNaN(NaN)来比较
浮点数问题

1 console.log((1/3)===(1-2/3))//false

尽量避免使用浮点数进行计算，存在精度问题

1 Math.abs(1/3-(1-2/3))<0.0000001

==null、undefined==

null //空
undefined //未定义

==数组==

java的数组必须是相同类型的对象，JS中不需要

1 var arr = [1,2,3,4,5,'hello',null,true]

slice()截取Array的一部分，返回一个新数组，类似于String中的substring。

1 var arr = [1,2,3,4,5,6,'1','2']
2 arr.slice(3)
3 //<(5)[4,5,6,'1','2']
4 arr.slice(1,5)
5 //<(4)[2,3,4,5]

push(),pop()

1 //push压入尾部
2 var arr = [1,2,3,4,5,6,'1','2']
3 arr.push('a','b')
4 //<(10)[1,2,3,4,5,6,'1','2','a','b']
5 //pop弹出尾部
6 arr.pop()
7 //<(9)[1,2,3,4,5,6,'1','2','a']

unshift(),shift()//头部

1 unshift()//压入头部
2 shift()//弹出头部

sort()、reverse()//正反序
concat()

1 let arr = ['c','b','a']
2 arr.concat([1,2,3])
3 //<(6)['c','b','a',1,2,3]
4 arr
5 //<(3)['c','b','a']
6 //由此可见concat()并没有修改数组，只是会返回一个新的数组

==对象==

 1 //java : Person person = new Person()
 2 //对象是大括号，数组是中括号，json是{}
 3 //JavaScript:
 4 var person = {
 5     name:"zzz",
 6     age:3,
 7     tags:['js','java','web','...']
 8 }
 9 //js对象中，{...}表示一个对象，键值对描述属性xxx:xxxx
10 //js中所有键都是字符串，值是任意对象

取对象的值

1 person.name
2 <zzz"
3 person.age
4 <3

动态的增删对象属性

 1 var person = {
 2     name:"zzz",
 3     age:18,
 4     score:100
 5 }
 6 //删减
 7 >delete person.name
 8 <true
 9 >person
10 <person = {
11     age:18,
12     score:100
13 }
14 //添加
15 >person.name = "zzz"
16 //<"zzz"
17 >person
18 <person = {
19     age:18,
20     score:100,
21     name:"zzz"
22 }

判断属性是否在该对象中 xxx in xxx

1 >'age' in person
2 <true
3 //继承
4 >'toString' in person
5 <true

判断属性是否是该对象的自身拥有的 hasOwnProperty()

1 >person.hasOwnProperty("toString")
2 <false
3 >person.hasOwnProperty("age")
4 <true

==Map、Set==

//ES6才有

1 var map = new Map(['tom','80'],['jack','90'],['zzz','100'])
2 //get
3 var score = map.get('zzz');//通过Key获得Value
4 console.log(score);
5 //<100
6 map.set('admin','123')//添加
7 map.delete('admin')//删除

Set //无序不重复的集合

1 //set可以去重
2 var set = new Set([3,1,1,1,1,1]);
3 //>set
4 //<Set(2) {3,1}
5 set.add(2);//增加
6 set.delete(1);//删除
7 console.log(set.has(3));//是否有某元素

遍历map

1 var map = new Map(['tom','80'],['jack','90'],['zzz','100'])
2 for (let x of map){
3     console.log(x)
4 }

遍历set

1 var set = new Set([3,4,5])
2 for (let x of set){
3     console.log(x)
4 }

2.3函数

2.3.1、定义函数

java:

1 public 返回值类型 方法名(){
2     reutrn 返回值;
3 }

js:

定义方式一

 1 //绝对值函数
 2 function abs(x){
 3     if(x>0){
 4         return x;
 5     }else{
 6         return -x;
 7     }
 8 }
 9 //一旦执行到return代表函数结束，返回结果
10 //如果没有执行return,函数执行完也会返回结果：undefined

定义方式二

1 var abs = function(x){
2     if(x>0){
3         return x;
4     }else{
5         return -x;
6     }
7 }

//function(x){...}是一个匿名函数，到那时可以把结果赋值给abs，通过abs就可以调用函数

方式一、方式二等价

2.3.2、调用函数

1 abs(10) //10
2 abd(-10)    //10

==A problem==：

参数问题：js可以传任意个参数，甚至不传参也不报错= =

此时要判断参数进来是否存在问题？

eg:传递参数为空或不是number类型

 1 var abs = function(x){
 2     //eg:不传参手动抛出异常
 3     if(typeof x != 'number'){
 4         throw 'Not a number';
 5     }
 6     if(x>0){
 7         return x;
 8     }else{
 9         return -x;
10     }
11 }

arguments

arguments是一个js免费赠送的关键字

代表传递进来的==所有参数==，是一个数组。

eg:传递多个参数(>设定)

 1 var abs = function(x){
 2     //传递多于设定的参数
 3     console.log("x:"+x);    
 4     //>abs(1,2,3)
 5     //<x:1
 6     for (var i = 0; i<arguments.length; i++){
 7         console.log(arguments[i]);
 8         //打印出了所有传入的参数
 9     }
10     //arguments也可以用于获取隐藏参数，入参设定一个，但传入两个
11     if(arguments.length>1){
12         arguments[1]
13     }
14     //此时就可以获得传入的第二个参数，但是明面上却只有一个入参
15     if(x>0){
16         return x;
17     }else{
18         return -x;
19     }
20 }

==A problem==

argument是所有参数，有时想使用多余的参数来进行附加操作，需要排除已有参数，这时就很麻烦。

1 if(arguments.length>1){
2     for(var i = 1; i<arguments.length;i++){
3         //...
4     }
5 }

于是ES6中引入了rest：

rest //获取除了定义的参数之外的所有参数

1 function test(a,b,...rest){
2     console.log("a:"+a);
3     console.log("b:"+b);
4     console.log("rest:"+rest);
5 }
6 //rest只能定义在最后面，且要用...标识
7

2.3.3、变量的作用域

在js中，var定义变量是有作用域的。

在函数体内声明不能在函数体外使用。（非要实现的话看一下闭包）

如果两个函数用了相同变量名，互不干扰。

1 function a(){
2     var x = 1;
3     x = x+1;
4 }
5 function b(){
6     var x = 2;
7     x = x+3;
8 }

如果嵌套(相当于java内部类)，内部函数可以访问外部函数的成员，反之不行

1 function a(){
2     var x = 1;
3     
4     function b(){
5         var y = x+1;//2
6     }
7     var z = y + 1;//Uncaught ReferenceError:y is not defined
8 }
9

全局变量

1 x=1;
2 function f(){
3     console.log(x);
4 }
5 f();
6 console.log(x);

全局对象 window

window.alert

1 var x = 'zzz'
2 alert(x);
3 alert(window.x);//所有全局变量默认绑定在window对象下
4 window.alert(x);//alert()这个函数其实也是window下的

==作用域小结==

js实际上只有一个全局作用域，任何变量（函数也是变量），假设没有在函数作用范围内找到就会到函数外查找，如果在全局作用域都没有找到就会报错ReferenceError。

==规范==

a problem: 因为全部全局变量都是默认绑定在window对象，那如果不同的js使用相同变量势必会产生冲突，如何减少冲突？

1 var zzz = {}//定义自己的命名空间，将所有全局变量和方法绑定在此对象上
2 zzz.name = 'zzz'
3 zzz.add = function add(a,b){
4     return a+b;
5 }

==some problem==

局部作用域

1 function a(){
2     for(var i = 0;i<100;i++){
3         console.log(i);//打印出1-99
4     }
5     console.log(x+1);//打印出101    a problem:在for里面使用的变量i在外面也可以用
6 }

于是ES6中：

let

let关键字，解决局部作用域冲突问题

1 function a(){
2     for(let i = 0;i<100;i++){
3         console.log(i);//打印出1-99
4     }
5     console.log(x+1);//Uncaught ReferenceError: i is not defined
6 }

常量

1 //约定大写字母的为常量，不建议修改，但可以修改...
2 var PI = '3.14'
3 console.log(PI);
4 //<3,14
5 PI = '123'
6 console.log(PI);
7 //<123
8 //常量被修改了...

于是ES6中：

const

1 const PI = '3.14'
2 console.log(PI);
3 //<3.14
4 PI = '123'; //TypeError: Assigment to constant variable
5 console.log(PI);
6

2.3.4、方法

把函数放在对象里面，对象只有属性和方法

 1 var zzz = {
 2     name: 'zzz',
 3     birth: 2000,
 4     age: function(){
 5         var now = new Date().getFullYear();
 6         return now - this.birth;
 7     }
 8 }
 9 //属性
10 zzz.name
11 //方法
12 zzz.age();
13 //>zzz.age()
14 //<20

this是无法指向的，是默认指向调用它的那个对象；

3、内部对象

标准对象

 1 typeof 123
 2 "number"
 3 typeof '123'
 4 "string"
 5 typeof true
 6 "boolean"
 7 typeof NaN
 8 "number"
 9 typeof []
10 "object"
11 typeof {}
12 "object"
13 typeof Math.abs
14 "function"
15 typeof undefined
16 "undefined"

3.1、Date

 1 var now = new Date();   //"Fri Mar 06 2020 22:12:24 GMT+0800 (中国标准时间)"
 2 now.getFullYear();//年
 3 now.getMonth();//月
 4 now.getDate()//日
 5 now.getDay();//星期几
 6 now.getHours();//时
 7 now.getMinutes();//分
 8 now.getSeconds();//秒
 9 
10 now.getTime();//时间戳，世界统一 毫秒数1583503937155
11 
12 console.log(new Date(1583503937155))//时间戳

转换

1 now = new Date(1583503937155)
2 //Fri Mar 06 2020 22:12:17 GMT+0800 (中国标准时间)
3 now.toLocaleString
4 //ƒ toLocaleString() { [native code] }
5 now.toLocaleString()
6 "2020/3/6 下午10:12:17"
7 now.toGMTString()
8 "Fri, 06 Mar 2020 14:12:17 GMT"

3.2、JSON

json简介

早期，所有数据传输习惯使用XML文件！

JSON(JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示；
- 格式： ·对象都用{}数组都用[] ·所有的键值对都是用key:value

JSON字符串和JS对象的转化

1 var user = {
2     name:'zzz',
3     age:18,
4     sex:'女'
5 }
6 //对象转化为json字符串{“name”:"zzz","age":18,"sex":"女"}
7 var jsonUser = JSON.stringify(user);
8 //json字符串转化为对象 参数为json字符串
9 var obj = JSON.parse('{"name":"zzz","age":18,"sex":"女"}')

JSON和JS对象的区别

1 var obj = {a:'hello',;'hellob'};
2 var json = '{"a":"hello","b":"hellob"}';

4、面向对象编程

4.1、什么是面向对象

javascript、java、c#.....都是面向对象；

类：模板
对象：具体的实例

javascript有什么区别：

4.2、proto原型对象

原型对象 ==proto==

 1 var man = { //一个zxx对象
 2     name:'zzz',
 3     age:21
 4     run:function(){
 5         console.log(this.name+' is running...')
 6     }
 7 };
 8 var zxx = {
 9     name:'zxx'
10 };
11 //此时zxx.run()会报错
12 zxx.__proto__ = man;
13 //设置zxx原型对象是man,此时zxx可以zxx.run()了
14 //相当于java中的继承
15 var bird = {
16     fly:function(){
17         console.log(this.name+' can fly')
18     }
19 };
20 zxx.__proto__ = bird;
21 //可以改变zxx的原型，让他可以zxx.fly()

当要在类中新增一个方法的时候：

1 function Student(name){
2     this.name = name;
3 }
4 //要新增一个hello方法
5 Student.prototype.hello = function(){
6     alert('hello')
7 };

4.3、class对象

class对象 (ES6才有)

定义一个类，属性，方法

 1 //定义一个学生类
 2 class Student{
 3     constructor(name){  //构造器
 4         this.name = name;
 5     }
 6     hello(){
 7         alert('hello')
 8     }
 9 }
10 
11 var zxx = new Student('zxx')
12 var zzz = new Student('zzz')
13 //zxx.hello
14 //zxx和zzz都可以hello了
15 
16 //继承
17 Class primaryStudent extends Student{
18     constructor(name,grade){
19         super(name);
20         this.grade = grade;
21     }
22     myGrade(){
23         alert('我系一只初中鸡')
24     }
25 }
26 
27 var zxx = new primaryStudent('zxx','初一')
28

原型链

proto：

5、操作BOM对象

浏览器介绍

JavaScript 和浏览器的关系？

JavaScript 诞生就是为了能够在浏览器中运行

BOM：浏览器对象模型

IE 6~11
Chrome
Safari
FireFox
Opera

三方：

QQ浏览器
360浏览器

window

window代表浏览器窗口

1 window.innerHeight
2 486
3 window.innerWidth
4 150
5 window.outerHeight
6 607
7 window.outerWidth
8 745

Navigator

Navigator 封装了浏览器的信息

navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3887.7 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3887.7 Safari/537.36"

大多数时候，我们不会使用Navigator对象，因为可以人为修改，不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
1536
screen.height
864

location

代表当前页面的url信息

reload: ƒ reload()//刷新网页
location.assgin('http://xxxxx.com')//跳转页面

document

代表当前的页面，HTML DOM文档树

 1 document.title
 2 "百度一下，你就知道"
 3 document.title='zzz'
 4 "zzz"
 5  
 6 
 7 <d1 id='app'>
 8     <dt>Java</dt>
 9     <dd>Java</dd> 
10     <dd>Java</dd> 
11 </d1>
12 <script>
13     var d1 = document.getElementById('app')
14 </script>
15 //返回id为app的文档树

获取cookie

1 document.cookie
2 "BAIDUID=8A07B4F052CFDFDA...."

劫持cookie原理

1 <script src='aa.js'></script>
2 <!--恶意人员，获取cookie上传到他的服务器-->

服务器端可以设置cookie:httpOnly保护cookie

history

1 history.back()//后退
2 history.forward()//前进

6、操作Dom对象

Dom：文档对象模型

核心

浏览器页面就是一个Dom树形结构！

更新：更新Dom节点
遍历：得到Dom节点
删除：删除Dom节点
添加：添加Dom节点

要操作一个Dom节点首先要获取这个节点

6.2、获得节点

原生代码：（之后多使用jQuery）

 1 <div id='father'>
 2     <h1>标题一</h1>
 3     <p id='p1'></p>
 4     <p id='p2'></p>
 5 </div>
 6 
 7 <script>
 8 //对应CSS选择器
 9 var h1 = document.getElementsByTagName('h1');
10 var p1 = document.getElementsByTagName('h1');
11 var p2 = document.getElementsByTagName('h1');
12 var father = document.getElementsByTagName('h1');
13 
14 var childrens = father.children;
15 //获取父节点下的子节点
16 
17 </script>

6.3、更新节点

.innerText修改文本的值
.innerHTML可以解析html文本标签
.style.color/fontSize/padding操作CSS

6.4、删除节点

步骤：

先获取父节点，再删除自己

 1 <div id='father'>
 2     <h1>标题一</h1>
 3     <p id='p1'></p>
 4     <p id='p2'></p>
 5 </div>
 6 <script>
 7 
 8     var self = document.getElementById('p1');
 9     //获取父节点
10     var father = p1.pareElement;
11     //父节点删除自己
12     //father.removechild(p1)
13     
14     //删除是一个动态的过程
15     father.removechild(father.children[0])
16     father.removechild(father.children[1])
17     father.removechild(father.children[2])
18 </script>

==删除多个节点==时，children是时刻变化的，如删除了children[0]后就不存在children[2]了，children[2]此时是children[1]

6.5、插入/追加节点

获得某个dom节点，假设为空，此时可以通过innerHTML增加一个元素，但此时不为空（已存在元素）时，再增加就会产生覆盖问题！

追加

 1 <p id='js'></p>
 2 <div id='list'>
 3     <p id='se'>javase</p>
 4     <p id='ee'>javaee</p>
 5     <p id='me'>javame</p>
 6 </div>
 7 <script>
 8 
 9     var js = document.getElementById('js');
10     var list = document.getElementById('list');
11     //>lish.appendChild(js)
12     //追加到后面
13     
14     //通过JS创建一个新节点
15     var newP = document.createElement('p');//创建一个p标签
16     newP.id = 'newP'
17     newP.innerText = '这是一个新增P标签'
18     
19     //通过setAttribute属性可以设置任意值(还可以创建script)
20     //newP.setAttribute('id','newP')
21     
22     list.appendChild(newP);
23 </script>

插入

1 var ee = document.getElementById('ee');
2 var js = document.getElementById('js');
3 var js = document.getElementById('js');
4 //要包含的节点.insertBefore(newNode,targetNode)
5 list.insertBefore(js,ee);

7、操作表单（验证）

7.1、表单是什么

文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
......

表单目的：提交信息

7.2、获得表单

 1 <from>
 2     <p>
 3         <span>用户名:</span><input type='text' id='username'></input>
 4     </p>
 5     <p>
 6         <span>性别</span>
 7         <input type='radio' name='sex' value='man' id='boy'>男</input>
 8         <input type='radio' name='sex' value='woman' id='girl'>女</input>
 9     </p>
10 </from>
11 
12 <script>
13     var input_text = document.getElementById('username');
14     //<input_text.value返回输入框中已输入的值
15     //<input_text.value='123'
16     //修改当前输入框的值
17     
18     var boy = document.getElementById('boy');
19     var girl = document.getElementById('girl');
20     //注意，对于单选框，多选框等等select固定的值，boy_radio.value只能取到当前标签的值
21     //此时查看返回结果，根据是否为true判断是否被选中
22     boy_raio.checked = true;//被选中
23 </script>
24

7.3、提交表单

 1 <!--
 2 表单绑定提交事件
 3 onsubmit = 绑定一个提交检测的函数，true、false
 4 将这个结果返回给表单，使用onsubmit接收
 5 onsubmit = "return check()"
 6 -->
 7 <body>
 8     <head>
 9         <script src='https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js'></script>
10     </head>
11 </body>
12 <form method='post' onsubmit='return check()'>//表单绑定提交事件
13     <p>
14         <span>用户名:</span><input type='text' id='username' name='username'>
15     </p>
16     <p>
17         <span>密码：</span><input type='text' id='input_password'>
18     </p>
19     <p>
20         <input type='hidden' id='md5_password' name='password'>
21     </p>
22 </form>
23 <script>
24     function check(){
25         username = document.getElementById('username');
26         input_password = document.getElementById('input_password');
27         md5_password = document.getElementById('md5_password');
28         md5_password = md5(md5_password);//密码加密
29         //可以校验表单提交内容
30         return true;
31     }
32 </script>

8、jQuery

jQuery库，里面存在大量的JavaScript函数

8.1、引入jQuery

两种方法

1 //在线导入
2 <script src='https://cdn.bootcss.com/jquery/3.4.1/core.js'></script>
3 //js文件导入    lib/jquery-xxx.xxx.xxx.js是idea项目中放jquery.js文件的地方
4 <script src='lib/jquery-xxx.xxx.xxx.js'></script>

8.2、公式

 1 $(selector).action()
 2 
 3 //一个a标签
 4 <a href='' id='test-jquery'>点我</a>
 5 <script>
 6     //以前的方法
 7     document.getElementById('test-jquery');
 8     id.click();
 9     
10     //用jquery：选择器就是css的选择器
11     $('#test-jquery').click(function (){
12         alert('hello jquery');
13     })
14 
15 </script>

8.3、选择器

原生态：

1 //标签
2 document.getElementsByTagName()
3 //id
4 document.getElementById()
5 //类
6 document.getElementsByC1assName()

jQuery:

1 /∥jQuery  css中的选择器它全部都能用！
2 $('p').click();//标签选择器
3 $('#id1').click();//id选择器
4 $('.class1').click()//class选择器

文档工具站：http://jquery.cuishifeng.cn/

8.4、事件

鼠标事件、键盘事件、其他事件

 1 //简单的鼠标移动事件
 2 
 3 <body>
 4     <head>
 5         <style>
 6             #divMove{
 7                 width:500px;
 8                 height:500px;
 9                 border:1px solid red;
10             }
11         </style>
12     </head>
13 </body>
14 
15 //获取鼠标当前的一个坐标
16 mouse:<span id='mouseMove'></span>
17 <div id=’divMove>
18     在这里移动鼠标试试
19 </div>
20 
21 <script>
22     //当网页元素加载完后，响应事件
23     $(function()){
24       //获取触发框的鼠标移动事件
25         $('#divMove').mousemove(function(e)){
26                                 //鼠标移动获得坐标
27                                 $('#mouseMove').text('x:'+e.pageX + 'Y:'+e.pageY)
28                                 }
29     }
30 
31 </script>
32

8.5、操作DOM

 1 $('#test-u1 li[name=python]').text();//获得值(text)
 2 $('#test-u1 li[name=python]').text('');//设置值
 3 $('#test-u1').html();//获得(html)
 4 $('#test-u1').html();//设置
 5 
 6 //css
 7 $('#test-u1 li[name=python]').css({'color','red'});
 8 //元素的显示和隐藏
 9 $('#test-u1 li[name=python]').show();
10 $('#test-u1 li[name=python]').hide();
11

9、提升小技巧

1.JS：看jQuery源码、看小游戏源码

2、html，css：扒网站试试q,q

posted on 2022-08-11 16:33 Jolyne123 阅读(68) 评论(0) 收藏举报