标签：function console log Javascript var document name

什么是Javascript

概述

javaScript是一门世界上最流行的脚本语言
Java，JavaScript
10天
一个合格的后端人员，必须精通JavaScript

历史

ECMAScript它可以理解为JavaScript的一个标准
最新版本已经到es6版本~
但是大部分浏览器还只停留在支持es5代码上！
开发环境–线上环境，版本不一致

快速入门

引入JavaScript

内部标签

<head>
	<script> 
	//....
    </script>
</head>

外部引入

<head>
    <link rel="stylesheet" href="javascript.js">
</head>

浏览器选项

Elements 结构元素
Console js代码控制台
Sources 源文件
Network 网络抓包
Application 网站加载资源

js数据类型

变量
数值
字符串
布尔值

变量

var a

数值

123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN	//not a number
Infinity // 表示无限大
//JavaScript中不区分数值的具体类型

字符串

var str = 'abc'
var str2 = "字符串"

布尔值

var i = 1
     while (i){
         console.log('这是真值,执行死循环')
     }

运算符

逻辑运算符
比较运算符

逻辑运算

 var number = 10
      if (number>60 && number <90){
        alert('良')
      }else if (number>90 && number<100){
        alert('优')
      }else {
        alert('差')
      }

比较运算符

=
1，"1"
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）

这是一个JS的缺陷，坚持不要使用 == 比较
须知：

NaN === NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN（NaN）来判断这个数是否是NaN

严格检查格式

如果不使用严格检查格式，那么就不会有数据类型，从而不能运算，当使用严格检查格式时定义变量要确定数据类型，"use strict"加在所有字段前面

"use strict"
    var i = 1

数据类型

字符串
数组
流程控制
Map和Set
iterator

字符串

正常字符串我们使用单引号，或者双引号包裹

var str = 'abc'
var str2 = "字符串"

注意转义字符 \

\'
\n
\t
\u4e2d    \u##### Unicode字符
\x41	Ascall字符

多行字符串编写

//tab 上面 esc下面
        var msg =
            `hello
            world
            你好呀
            xiaoyu
            `

模板字符串

//tab 上面 esc下面
let name = 'Xaioyu';
let age = 3;
var msg = `你好，${name}`

字符串长度

console.log(str.length)

字符串的可变性，不可变

字符串是数组所以不可被改变

大小写转换

//注意，这里是方法，不是属性了
student.toUpperCase();
student.toLowerCase();

字符串获取下标

console.log(student.indexOf('t'))

字符串截取

[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)

数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6];//通过下标取值和赋值

数组长度

arr.length

获得数组下标

arr.indexOf(2)

截取数组

arr.slice(3)

数组尾增删

push：压入到尾部
pop：弹出尾部的一个元素

数组头增删

unshift：压入到头部
shift：弹出头部的一个元素

数组排序

(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]

数组反转

(3)["A","B","C"]
arr.reverse()
(3)["C","B","A"]

数组替换

(3)["A","B","C"]
arr.concat([1,2,3])
(6)["A","B","C",1,2,3]
(3)["C","B","A"]
arr
(3)["A","B","C"]

数组连接符

(3)["A","B","C"]
arr.join('-')
"A-B-C"

多维数组

arr = [[1,2],[2,4],[5,6]]
arr[1][1]
4

对象

若干个键值对

var 对象名 = {
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
	name:"Xiaoyu",
	age:3,
	email:"[email protected]",
	score:66
}

Js中对象，{…}表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！

对象赋值

person.name  = "xioayu"
'xioayu'

赋值不严格

person.sex = "男"
"男"

对象属性的删除

delete person.name
true

对象属性的插入

person.id = 01
1

判断对象中的属性

'sex' in person
true

流程控制

判断

'use strict'
    var age = 17
    if(age > 18){
      alert("欢迎！")
    }else if(age == 18){
        alert("欢迎！")
    }else {
      alert("未成年禁止进入黄色网站！")
    }

循环

for (let i = 0; i < 100; i++){
    console.log(i)
}

var nums = [1,2,3,4,5,6,7,8,9]
age.forEach(function(value){
    console.log(value)
})

for (var num in nums){
    console.log(nums[num])
}

集合

Map

var map = new Map([['xiaoyu',90],['xiaolin',80],['xiaoyang',60]]);
map.set('xiaohua',100)//set后续添加
map.delete('xiaoyang')//delete删除
var student1 = map.get('xiaoyu')
var student2 = map.get('xiaohua')
console.log(student1)
console.log(student2)
90
100

Set （去重）

var set = new Set([1,1,2,2,3,3])
set
Set(3) {1, 2, 3}

set.add(4);//添加
set.delete(1);//删除
console.log(set.has(2))//判断包含

迭代器

数组

var arr = [1,2,3];
for (var x of arr){
    console.log(x)
}

map

var map = new Map([['xiaoyu',90],['xiaolin',80],['xiaoyang',60]]);
for (var x of map){
    console.log(x)
}

set

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

函数

定义对象

1.绝对值函数

function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined

2.变量值函数

var abs = function(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价！

调用函数

abs(10)
abs(-10)

函数异常

var abs = function(x){
    //手动抛出异常来判断
    if (typeof x!== 'number'){
        throw '不是数字！'
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

临时数组

var abs = function(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;
    }
}

参数去重

function abs(a,b,...rest){
    console.log('a=>'+a)
    console.log('a=>'+b)
    console.log(rest)
}

变量作用域

var 作用域

假设在函数体重声明，则在函数体外不可以使用~（闭包）

function xy(){
    var x = 1;
    x = x + 1;
}
x = x + 2;

如果两个函数使用了相同的变量名，只要在函数内部就不冲突

function xy1(){
    var x = 1;
    x = x + 1;
}
function xy2(){
    var x = A;
    x = x + 1;
}

内部函数可以访问外部函数的成员，反之则不行

function xy1(){
    var x = 1;
    function xy2(){
        var x = 'A';
        console.log('inner'+x)
    }
    console.log('outer'+x)
    xy2()
}
xy1()

假设在JavaScript中，函数查找变量从自身函数开始~，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升作用域

如果在变量未定义之前使用了该变量则后面赋值无效

function xy(){
    var x = "x"+y;
    console.log(x);
    var y = 'y'
}

正确的做法是定义在它使用之前

function xy(){
    var y = 'y'
    var x = "x"+y;
    console.log(x);
}

全局变量

放在最外层函数的同级

x = 1;
function xy(){
    console.log(x)
}
xy();
console.log(x)

使用window对象

var x = 'xiaoyu'
alert(x)
alert(window.x);

由于我们的所有变量都会绑定到window上，。如果不同的js文件，使用了相同的全局变量，就会产生冲突—>如何减少这样的冲突？

var myVar = {};
myVar.name = 'xiaoyu';
myVar.add = function (a,b){
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~
jQuery中就是使用的该方法：jQuery.name，简便写法：$()

局部作用域

//问题：for循环的i变量走出作用域还保持着循环之后的状态
function xy(){
    for(var i = 0; i < 100; i++){
        console.log(i)
    }
    console.log(i+1)
}
//结果为100

//解决：在循环体这个作用域里使用let定义局部变量，局部变量走出作用域生命周期结束
function xy(){
    for(let i = 0; i < 100; i++){
        console.log(i)
    }
    console.log(i+1)
}

常量

//早期：
var PI = 3.14
console.log(PI)
PI = '123'
console.log(PI)

//现在：
const PI = '3.14'
console.log(PI)
PI = '123'
console.log(PI)

方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var xy = {
    name: 'xiaoyu',
    birth: 2002,
    age: function () {
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
xy().name
xy().age()

this是无法指向的，是默认指向调用它的那个对象，但是在js中可以使用apply控制

var getAge = function (){
        var now = new Date().getFullYear
        return now-this.birth
}
var xy = {
    name: 'xiaoyu',
    birth: 2002,
    age: getAge
}
var xl = {
    name: 'xiaolin',
    birth: 2004,
    age: getAge
}
getAge.apply(xl,[])

内部对象

标准对象属于常用的数据类型

Date

var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳
console.log(new Date(时间戳序列))//时间戳转时间

json

JSON是什么？

JSON是一种轻量级的数据交换格式
理想的数据交换语言

我的理解：JSON能把对象和对象中的属性转换成字符，便与传输处理。同时也可以将字符转换成对象，还原成想要的数据。

为什么用JSON？

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON表示格式：

对象都用{ }
数组都用[ ]
所有的键值对都是用key:value

相互转换实例

var user = {
    name:"xaioyu",
    age:20,
    sex:'男'
}

//对象转化为json字符串{"name":"xiaoyu","age":20,"sex":"男"}
var jsonUser = JSON.stringify(user);

//json 字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"xiaoyu","age":20,"sex":"男"}');

JSON和JS对象有什么区别？

个人理解：前者是字符串，后者是对象。

示例：

var obj = {a:'hello',b:'hellob'};//a和b不是普通字符
var json= '{"a":"hello","b":"hellob"}'//是普通字符

AJAX

原生的js写法 xhr异步请求
jQuery封装好的方法$(#name).ajax("")
axios请求

面向对象编程

什么是面向对象编程

我认为这篇博客解释的很清楚，什么是面向对象。

在谈面向对象编程，首先需要了解什么是面向过程编程

什么是面向过程编程?

把需求按照步骤分解实现。

个人理解：

打个比方你想吃一碗面，以面向过程解决这个需求有以下步骤

1、准备面粉

2、和面

3、煮面

4、吃面

什么是面向对象编程？

类：模板

对象：具体实例

个人理解：

还是以吃一碗面为例，以面向对象思维就是

1、下馆子

2、吃

面向对象的底层还是面向过程，但是别人以及把过程抽象成类，而我们只需要会用，即在轮子的基础上造车，而不是花费时间去造轮子。

Javascript的特别之处

原型对象

就是父类，__ proto __可以将对象随意指向另一个对象。

示例：

var Student={
    name: "qinjiang",
    age:3
    run:function(){
        console.log(this.name + "run....");
    }
};

var xiaoming ={
    name:"xiaoming"
};

//原型对象
xiaoming.__proto__ = Student;

var Bird = {
    fly: function(){
        console.log(this.name +"fly....");
    }
};

//小明 指向 Bird
xiaoming.__proto__ = Bird;

class继承

class关键字，是在ES6引入的

ES6之后如何定义一个类、属性、方法？

示例：

//定义一个学生的类
class Student{
    constructor(name){
        this.name = name;
    }
    
    //定义一个hello方法
    hello(){
        alert('hello')
    }
}

//创建对象
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");

//调用对象方法
xiaoming.hello();

如何继承？

class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello');
    }
}

//XiaoStudent 继承 Student
class XiaoStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert('我是一名小学生');
    }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",1);

原型链

_ proto _与原型链到底是什么？

操作BOM对象

什么是BOM？

浏览器对象模型

B：Browser 浏览器

O：Object 对象

M：Mode 模型

常见的BOM对象

window (浏览器窗口)

控制台输入（>输出）

//页面弹窗
window.alert(1)
>undefined
//页面内高
window.innerHeight
>458
//页面内宽
window.innerWidth
>867
window.outerHeight
>917
window.outerWidth
>884
//随浏览器窗口大小而改变

Navigator (封装了浏览器的信息) (不建议使用)

控制台输入（>输出）

//名
navigator.appName
>'Netscape'
//版本
navigator.appVersion
>'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36'
//代理
navigator.userAgent
>'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36'
//平台
navigator.platform
>'Win32'

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

screen (屏幕尺寸)

控制台输入（>输出）

screen.height
>943
screen.width
>1676

location (当前页面的URL信息) （重要）

控制台输入（>输出）

location
>......
//主机
>host: "cn.bing.com"
//当前指向的位置
>href: "https://cn.bing.com/"
//协议
>protocol: "https:"
//刷新网页
>reload: ƒ reload()
//设置新的地址
location.assign('新地址名')

document （当前的页面，HTML DOM文档树）（内容DOM）

控制台输入（>输出）

//显示文档标题
document.title
>'必应'
//修改文档标题
'Lao'

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById('app');
</script>

获取cookie

控制台输入（>输出）

document.cookie
>'MUID=28E2A9356FF266B63B13B...'

history

控制台输入（>输出）

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

操作Dom对象

什么是BOM？

浏览器对象模型

B：document 文件（html）

O：Object 对象

M：Mode 模型

常见操作：

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

PS:要操作一个Dom节点，就必须要先获得这个Dom节点

获得Dom节点

控制台输入（>输出）

PS:前提首先自己写一个Dom树

//跟Css选择器一样
document.getElementsByTagName('标签名')
document.getElementsById('Id名')
document.getElementsByClassName('类名')
var father = document.getElementsById('father')

var childrens = father.children;	//获取父节点下的所有子节点
father.firstChild	//第一个子节点
father.lastChild	//最后一个子节点

更新节点

首先还是要获取节点才能对节点进行操作。

操作文本：

节点名.innerText='value'修改文本的值
节点名.innerHTML='<strong>value</strong>'可以解析超文本标签

操作css

.style.coler = 'yellow';	//属性使用 字符串 包裹
.style.fontSize = '20px';	// css中的- 转 驼峰命名法
.style.padding = '2em'

删除节点

如何删除节点？

1、获取父节点

2、通过父节点删除自己

示例：

<div id ="father">
    <h1>h1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //获取父节点
    var self = document.getElementById('p1')；
    var father = p1.parentElement;
    //通过父节点删除自己
    father.removeChild(self)
</script>

疑问：能否用father.removeChild(father.children[index])删掉剩下的子节点？

不能，删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。

<div id ="father">
    <h1>h1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //获取父节点
    var self = document.getElementById('p1')；
    var father = p1.parentElement;
    
    /*
    删除是一个动态的过程
    删除第一个子节点后，后续的子节点下标也随之改变
    */
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>

插入节点

注意：

获得了某个Dom节点后：

若dom节点是空，通过innerHTML就可以增加一个元素；

若Dom节点已经存在元素，则会产生覆盖。

移动标签

示例：将“JavaScript”移动到后面

<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 js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);
</script>

创建一个新的标签

document.createElement('标签类型');

示例1：在文本后面添加一个新的< P >标签

<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 list = document.getElementById('list');
    //通过JS创建一个新的节点
    var newP = document.createElement('p');
    newP.id = 'newP';
  	// 给它一些内容
    newP.innerText = "Hello,Lao";
	// 添加文本节点 到这个list 元素
    list.append(newP);
</script>

操作表单

表单是什么？

form标签构建的DOM树

示例

<form action = "post">
    <p>
        <span>用户名：</span><input type="text" id = "username" />
    </p>
    <!--多选框的值就是定义好的value-->
    <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");
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value  = "value";

    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。
    girl_radio.checked = true;//赋值

</script>

提交表单。md5加密密码，表单优化

未加密

<!--模拟表单-->
<form action = "post" >
    <p>
        <span>用户名：</span><input type="text" id = "username" />
    </p>
    <p>
        <span>密码：</span><input type="password" id = "password" />
    </p>

    <!--绑定事件 onclick 被点击-->
    <button type = "button" onclick="aaa()">提交</button>

</form>

<script>
    function aaa(){
        var uname = document.getElementById('username');
        var  pwd = document.getElementById('password');
        console.log(uname.value);
        console.log(pwd.value);
    }
</script>

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>
<form action = "#" method="post">
    <p>
        <span>用户名：</span><input type="text" id = "username" name="username"/>
    </p>
    <p>
        <span>密码：</span><input type="password" id = "password" name="password" />
    </p>

    <!--绑定事件 onclick 被点击-->
    <button type = "submit" onclick="aaa()">提交</button>

</form>

<script>
    function aaa(){
        alert('提交成功！')
        var uname = document.getElementById('username');
        var  pwd = document.getElementById('password');
        console.log(uname.value);
        console.log(pwd.value);
        //MD5算法
        pwd.value= md5(pwd.value);
        console.log(pwd.value);
    }
</script>

</body>
</html>

jQuery

javaScript和jQuery有什么关系？

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

获取jQuery

注意：

笔记中记录只是粗略步骤，具体操作看【狂神说Java】初识jQuery及公式

第一种：本地导入

下载，jQuery官网下载地址
将下载文件导入项目文件中
在head标签内，用外链式引入到html文件中

第二种：在线导入

寻找在线资源，jQuery cdn加速
在head标签内，用外链式引入到html文件中

公式

$(selector).action()

示例：

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script></head>
<body>
<a href="" id = "test-jquery">点我</a>
<script>
    //选择器就是css选择器
    $('#test-jquery').click(function(){
        alert('hello,jQuery!');
    });
</script>
</body>
</html>

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

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

文档工具站

事件

鼠标事件、键盘事件，其他事件，这些就不赘述了

示例：

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script></head>
    <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>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

CSS的操作

$('#test-ul li[name=python]').css({"color","red"});

元素的显示和隐藏

本质display:none

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

未来ajax()

$('#form').ajax()

$.ajax({url:"test.html",context:document.body,success:function(){
	$(this).addClass("done");
}})

总结

1、多看源码，推荐网站源码之家

2、多扒网站，按F12审查元素，按delete键删掉非关键元素（注意：CSS不能随意抄别人的可能会侵权）

Javascript

什么是Javascript

概述

历史

快速入门

引入JavaScript

浏览器选项

js数据类型

运算符

严格检查格式

数据类型

字符串

数组

对象

流程控制

集合

迭代器

函数

定义对象

变量作用域

方法

内部对象

AJAX

面向对象编程

什么是面向对象编程

什么是面向过程编程?

什么是面向对象编程？

Javascript的特别之处

ES6之后如何定义一个类、属性、方法？

如何继承？

操作BOM对象

什么是BOM？

常见的BOM对象

操作Dom对象

什么是BOM？

常见操作：

操作表单

jQuery

javaScript和jQuery有什么关系？

公式

节点文本操作

CSS的操作

元素的显示和隐藏

未来ajax()

总结

推荐网站

相关文章

赞助商

阅读排行