Javascript快速入门

一、引入

JavaScript代码可以单独写一个文件，也可以直接写入到html文件中。使用<script>标签包裹。

方法一：
<script src="./1.js"></script>
方法二：
<script>
    alert('hello world!');
</script>

严格模式

JavaScript严格模式（Strict Mode）是一种可选的运行模式，它使您能够更严格地控制JS代码的行为。通过在脚本或函数的顶部添加"use strict";语句，可以启用严格模式。

以下是严格模式的一些特点：

1. 避免使用未声明的变量：在严格模式下，如果使用未声明的变量，将会抛出一个引发错误的异常。而在非严格模式下，如果使用未声明的变量，则会创建一个全局变量。

2. 消除this指向全局对象：在严格模式下，如果没有显式绑定this到对象，this的值将是undefined，而不是指向全局对象（如window）。

3. 禁止删除变量、函数和函数参数：在严格模式下，使用delete操作符删除变量、函数或函数参数会导致抛出异常。

4. 限制函数中的上下文：在严格模式下，函数调用的上下文（this）是未定义的，而不是默认绑定到全局对象。

5. 重复的参数名是不允许的：在严格模式下，如果函数有重复的参数名，将会抛出一个错误。

6. 禁止使用eval和arguments作为变量名：在严格模式下，不能使用eval和arguments作为变量名，它们被限制为关键字。

二、定义变量

//全局
var test = "hello world!";
//局部
let test = "hello world!";

变量命名规则

JavaScript变量的命名规则主要包括以下几个方面：

1. 标识符组成：JavaScript变量名由字母、数字、下划线(_)和美元符号($)组成。它们必须以字母、下划线或美元符号开头，不能以数字开头。

2. 大小写敏感：JavaScript是区分大小写的语言，因此变量名中的大小写字母是不同的。例如，"myVariable"和"myvariable"是两个不同的变量。

3. 关键字的限制：不能使用JavaScript的保留关键字（如if、for、var等）作为变量名。

4. 规范命名约定：虽然变量名可以用任意合法的字符组成，但为了编程规范和可读性，通常遵循以下命名约定：

   • 使用有意义的名字：变量名应反映其存储的数据或表示的含义，使其易于理解和维护。

   • 使用驼峰命名法：通常使用驼峰命名法来命名变量。驼峰命名法有两种形式：

     • 小驼峰命名法（lower camel case）：第一个单词的首字母小写，后续每个单词的首字母大写，例如：myVariable, firstName。

     • 大驼峰命名法（upper camel case）：每个单词的首字母都大写，例如：MyVariable, FirstName。

   • 使用有意义的命名约定：根据变量的用途使用一些常见的前缀或后缀来增加变量名的可读性。例如，使用"is"作为前缀表示布尔类型的变量，如isReady、isActive；使用"count"作为后缀表示计数变量，如totalCount、productCount。

三、条件语句

if(1){
    alert('yes');
}else if(2){
    alert('two');
}else{
    alert('nonono!');
}

四、数据类型

number：数字

JavaScript不区分小数和整数，可以使用科学计数法，可以表示负数。

//number类型中有一个特殊的类型
NaN //表示not a number

NaN与任何数值都不相等，包括自己。

尽量不要使用浮点数进行运算，因为存在精度损失问题。

字符串

let test1 = 'abc';
let test2 = "abcd";
let test3 = "拼接：${test1}${test2}";
//定义多行字符串
var test = `
多
行
`;

• length属性：用于获取字符串长度：str.length

• 可以使用下标索引字符串字符

• 可以使用方法进行操作。

布尔值

• true

• false

逻辑运算

&& //两个为真才为真
|| //一个为真就为真
！ //否

• 比较运算符

=    //
==   //等于，不会比较数据类型
===  //绝对等于，比较数据类型，也比较数据值

NULL和undefined

• NULL：空

• undefined：未定义

数组

在JavaScript中数组中的元素类型不必相同，并且可以嵌套使用。

var arr = [1,'test',2];

• 通过下标进行索引和赋值

var arr[0,"test",1,2,3];
arr[0];
arr[5] = 'test';

• 长度属性

var arr = [1,2,3,4,5];
console.log(arr.length);

如果给arr的length属性赋值的话，arr.length的大小就会发生改变，如果过小就会导致数据丢失。

• 通过元素获取下标

var arr = [1,2,3,4,5];
console.log(arr.indexOf(2));

这里注意元素2和"2"是不一样的

• slice()截取数组的一部分

arr.slice(1,3);

• push和pop

//push：在数组末端添加元素
arr.push(1)
//pop：在数组末端删除元素
arr.pop()

• unshift()和shift()

//unshift()：在数组头部添加元素
arr.unshift('1')
//shift()：删除数组头部的元素
arr.shift()

• 排序sort()

arr.sort()

• 元素反转

arr.reverse()

• 拼接

arr.concat()

• 连接符join

打印拼接数组，返回的是一个字符串

var arr = [1,2,3,4,5]
arr.join('-')
// 输出：1-2-3-4-5

对象

var test = {
    name : 'Cristrik010',
    age : 18
}

对象属性的赋值

test.name = 'Cristrik010'

js中允许动态修改对象，例如：删除，添加等操作

// 删除
delete test.name
// 添加
test.email = 'xxx@qq.com'

判断属性值是否在这个对象中

'name' in test
// 输出：true

Map

这种数据类型，类似于Python中的字典，也就是键值对。

var map = new Map([['name','Cristrik010'],['age',18]]);
var name = map.get('name'); //通过key获得value
//添加内容
map.set('email','xxx.@qq.com');

Set

无序不重复的集合

var set = new Set([3,1,1,2]); //Set也可以去重
// 删除
set.delete(1);
// 添加
set.add(4);
//是否包含某元素
console.log(set.has(3))

iterator

在 JavaScript 中，迭代器（Iterator）是一种对象，用于提供对集合中元素的逐个访问。迭代器模式使得我们可以使用统一的方式遍历不同类型的数据结构，如数组、字符串、Map、Set 等。

• 遍历数组

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

• 遍历map

var map = new Map([['name','Cristrik010'],['age',18]]);
for (let x of map){
    console.log(x);
}

• 遍历Set

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

五、流程控制

if判断

在前面已经介绍过，这里不过多赘述。

循环

// while循环
while(i < 100){
    console.log(i);
}
// for循环
for(let i = 0;i < 100;i++){
    console.log(i);
}
// forEach循环
var arr[1,2,3,4,5]
arr.forEach(function(value){
            console.log(value);
		}
)
// for in遍历
var arr[1,2,3,4,5]
for(var index in arr){
    console.log(arr[index]);
}

六、函数

定义一个函数

// 方法一：
function fun(){
    return 0;
}
// 方法二：
var fun = function(){
    return 0;
}

函数执行到return结束，返回结果。

注意：JavaScript可以传任意个参数，也可以不传参。

arguments关键字

在 JavaScript 中，arguments 是一个特殊的关键字，用于表示函数内部的参数集合。它是一个类似数组的对象，包含了函数调用时传递的所有参数。

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3));  // 输出：6
console.log(sum(4, 5, 6, 7));  // 输出：22

rest

在 JavaScript 中，rest 是一种语法结构，用于将函数的多个参数收集到一个数组中。它是 ECMAScript 6（ES6）中引入的一项特性，也被称为剩余参数（Rest Parameters）。

使用 ... 后跟一个标识符，即可声明一个剩余参数。这个标识符将成为一个包含了所有剩余参数的数组。

function sum(x,...numbers) {
  let total = 0;
  for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }
  return total;
}

console.log(sum(1, 2, 3));  // 输出：5
console.log(sum(4, 5, 6, 7));  // 输出：18

变量作用域

在JavaScript中，var定义变量是有作用域的。在函数中定义的为局部变量。

全局对象window

我们定义的任何全局变量都会绑定到window对象下

局部作用域let

for(let i = 0;i < 100;i++){
    console.log(i);
}
console.log(i) //这里会报错，因为i的作用域只在for循环内。

常量关键字const

在ES6之前定义常量时，使用全部大写的关键字作为变量名。这样定义的变量就是常量。在ES6之后引入了关键字const来定义常量。

const a = 1

方法

方法就是定义在对象里的函数

var test = {
    name : 'Cristrik010',
    age : 18,
    birth : function fun(){
        var now = new Date().getFullYear();
        return now - this.age; 
    }
}

上面的this代表这个对象，因为索引属性需要使用对象索引：test.age

apply关键字

apply是 JavaScript 中的函数方法之一，它允许你在指定的上下文（对象）中调用函数，并传递一个数组（或类数组对象）作为参数。

apply的语法如下：

function.apply(thisArg, [argsArray])

其中：

• function 是要调用的函数。

• thisArg 是在调用函数时设置的 this 值，也就是函数执行时的上下文对象。如果不需要改变上下文，可以传递 null 或 undefined。

• argsArray 是一个可选的参数，是一个数组（或类数组对象），包含要传递给函数的参数。如果不提供该参数，可以将其设置为 null 或 undefined。

七、内部对象

Date

JSON对象

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它以易于阅读和编写的文本形式表示结构化数据。JSON 最初由 Douglas Crockford 在 JavaScript 中提出，并已成为一种通用的数据格式，广泛应用于不同编程语言和平台之间的数据传输。

JSON 使用键值对的方式组织数据，类似于 JavaScript 对象。它支持以下数据类型：

• 字符串：用双引号括起来的 Unicode 字符序列。

• 数字：整数或浮点数。

• 布尔值：true 或 false。

• 数组：用方括号括起来的有序值列表。

• 对象：用花括号括起来的无序键值对集合。

• null：表示空值。

下面是一个简单的 JSON 示例：

{
  "name": "Cristrik010",
  "age": 18,
  "Country": "China",
  "isStudent": true,
  "hobbies": ["eat", "drink", "play","hahah"],
  "address": {
    "street": "123 Main St",
    "zipCode": "10001"
  },
  "favoriteFoods": null
}

在这个示例中，我们有一个包含个人信息的 JSON 对象。每个键值对都由冒号分隔，键名（key）用双引号括起来，值（value）可以是字符串、数字、布尔值、数组、对象或 null。

八、面向对象编程

继承

var student = {
    name : "student",
    age : 18,
    study : function(){
        console.log(this.name + ' is studying.....');
    }
};
var Cristrik010 = {
    name : "Cristrik010"
};
Cristrik010.__proto__ = student;
Cristrik010.study()

class

在ES6中引入了class关键字，我们可以使用class来继承。在JavaScript中，super是一个关键字，用于引用当前对象的父类（超类）或原型链中的上层对象。通过super关键字，可以访问父类的属性和方法。

class Student{
    constructor(name){
        this.name = name;
    }
    run(){
        console.log(this.name + ' is running.........');
    }
}

class stu extends Student{
    constructor(name){
        super(name); //相当于给父类传了一个参数执行constructor
        this.age = 18;
    }
    walk(){
        console.log(this.name + ' is walking.........');
    }
}

var Cristrik010 = new stu('Cristrik010');
Cristrik010.run();
Cristrik010.walk();

九、操作BOM对象

什么是BOM？

BOM（浏览器对象模型）代表了浏览器对象模型，它是一组用于操作浏览器窗口的API（应用程序接口）和对象集合。BOM 提供了与浏览器交互的能力，例如管理浏览器窗口、处理用户输入、操作浏览历史记录等。

BOM 由多个对象组成，其中最重要的对象包括：

1. window 对象：window 对象代表了一个浏览器窗口或一个框架，它被视为 BOM 的顶层对象。window 对象提供了许多方法和属性，用于操作当前窗口或在窗口中加载和操作内容。

2. location 对象：location 对象用于获取或设置当前窗口的 URL 地址。通过 location 对象，可以获取当前页面的 URL 信息，也可以修改 URL 地址来加载新的页面。

3. history 对象：history 对象用于管理浏览器的历史记录。它提供了一些方法，例如 back()、forward() 和 go()，用于在历史记录中导航。

4. navigator 对象：navigator 对象提供了关于浏览器的信息，例如浏览器的名称、版本和操作系统。通过 navigator 对象，可以根据浏览器的不同特性来编写特定的代码。

除了上述对象，BOM 还提供了其他一些对象和 API，例如操作浏览器窗口大小的 resizeTo() 和 resizeBy() 方法、弹出对话框和警告框的 alert()、confirm() 和 prompt() 方法等。

Navigator

Navigator 对象代表了浏览器的信息，它提供了一系列属性和方法，用于获取有关浏览器的详细信息。通过 navigator 对象，我们可以判断浏览器的类型、版本以及一些其他属性。

location

location 对象代表了当前窗口的 URL 地址，并提供了一系列属性和方法，用于获取和操作 URL 信息。通过 location 对象，我们可以获取当前页面的 URL，也可以修改 URL 地址来加载新的页面或在当前页面进行跳转。

document

document 对象是浏览器中的内置对象之一，代表了当前页面的文档（DOM），并提供了一系列属性和方法，用于操作和访问页面的内容。

history

history 对象是浏览器提供的 JavaScript API 之一，用于访问用户在浏览器窗口中访问过的 URL 历史记录。它允许您在浏览器历史记录中导航、管理和修改当前会话的历史记录。

十、获得DOM节点

DOM 是 Document Object Model（文档对象模型）的缩写。它是一种表示和操作 HTML、XML 以及 XHTML 文档的标准编程接口。DOM 将文档解析为一个由节点和对象（包括元素、属性、文本等）组成的结构，开发者可以使用不同编程语言（如 JavaScript）通过 DOM 提供的方法和属性来访问和修改这些节点和对象。

var test1 = document.getElementById(id);
var test2 = document.getElementsByClassName(className);

更新节点

var test = document.getElementById(id);
// 修改文本的值
test.innerText = '123'
// 解析HTML文本标签
test.innerHTML = '<strong>123</strong>'
// 获取id的子节点
var children = test.children;

删除节点

• 先获取节点

• 找到父节点

• 通过父节点删除子节点

var self = document.getElementById('p1');
var father = self.parentElement;
father.removeChild(self);

注意：删除节点是一个动态过程，子节点数组下标是实时改变的。

插入一个节点

var list = document.getElementById(id);
// 创建一个新的标签
var new = document.createElement('p');
new.id = 'newP';
new.innerText = 'hello world!';
// 追加一个节点
list.appendChild(newP);
// 插入(在test2前面插入一个test1)
list.insertBefore(test1,test2)

创建的时候也可以这样设置标签的属性值：

var new = document.createElement('script');
new.setAttribute(key,value);

十一、操作表单

与DOM节点相似，我们先要获取表单元素才能进一步操作。

<form action="index.html" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码</span><input type="password" id="password" name="password">
    </p>
    <button type="submit" onclick="fun()">提交</button>
</form>
<!-- 引入md5加密的文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script>
    function fun(){
        //获取表单元素
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        //加密
        password.value =  CryptoJS.MD5(password.value).toString();
    }
</script>

十二、jquery库

jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互的开发。jQuery的目标是使网页开发更加快速、更易于使用。

通用公式：

// 选择器就是css格式的选择器
$(selector).action()
// 例如：
$(#id).action() //id选择器

action(事件)

jQuery 提供了多种方法来处理事件，使得对事件的绑定、触发和处理变得简单和灵活。以下是一些常用的 jQuery 事件相关的方法：

1. .on()：用于绑定一个或多个事件处理程序到匹配元素上。可以指定多个事件类型，并提供处理函数。例如：

   $("#myButton").on("click", function() {
     // 处理点击事件的代码
   });

2. .click() / .hover() / .focus() 等：这些是 .on() 方法的快捷方式，用于绑定特定类型的事件处理程序。例如：

   $("#myButton").click(function() {
     // 处理点击事件的代码
   });
   
   $(".myElement").hover(
     function() {
       // 鼠标进入元素时执行的代码
     },
     function() {
       // 鼠标离开元素时执行的代码
     }
   );

3. .trigger()：用于手动触发元素上绑定的指定事件。例如：

   $("#myButton").trigger("click");

4. .off()：用于解绑指定元素上的事件处理程序。例如：

   $("#myButton").off("click");

5. .delegate() / .undelegate()：用于委托事件处理程序给匹配选择器的子元素。.delegate() 绑定事件处理程序，.undelegate() 解绑事件处理程序。例如：

   $("#myContainer").delegate(".myElement", "click", function() {
     // 处理点击事件的代码
   });

6. .on() 方法还可以用于动态绑定事件处理程序，即绑定在将来添加到文档中的元素上。这对于处理通过 AJAX 或其他方式加载的内容很有用。例如：

   $(document).on("click", "#myButton", function() {
     // 处理点击事件的代码
   });

7. .ready() 是一个 jQuery 的事件处理函数，用于在 DOM（文档对象模型）加载完成后执行指定的函数。它可以确保 JavaScript 代码在页面完全加载后再执行，避免对尚未加载的元素进行操作。

   使用 $(document).ready() 方法的常见方式是将要执行的函数作为参数传递给它，如下所示：

   $(document).ready(function() {
     // 在这里编写要在文档加载完成后执行的代码
   });

   $(function(){}) 则是 $(document).ready() 方法的简写形式，可以达到相同的效果。因此，以下两种写法是等价的：

   $(document).ready(function() {
     // 在这里编写要在文档加载完成后执行的代码
   });
   
   // 或者使用简写形式
   $(function() {
     // 在这里编写要在文档加载完成后执行的代码
   });

   这个代码通常用于确保 JavaScript 代码在页面加载完成后才执行，以便正确地操作 DOM 元素。

以上是一些常用的 jQuery 事件处理方法，通过它们可以更方便地管理和处理各种事件。请注意，在最新的 jQuery 版本中，不同的方法可能有所变化或被废弃，建议查阅官方文档以获得最新的使用方法和注意事项。

操作DOM

这里只做简单介绍，详情请看官方文档。

节点文本操作

$().text(); //获得值
$().text('值'); //设置值
$().html(); //获得值
$().html('') //设置值

css的操作

$().css("color","red")