【前端】javaScript

目录

• 一、简述JS
• • 1.1 引入方式
• 二、基础语法
• • 2.1 变量
  • 2.2 数据类型
  • 2.3 运算符
  • 2.4 对象
  • • 2.4.1 数组
    • 2.4.2 函数
    • 2.4.3 对象
• 三、JQuery
• • 3.1 引⼊依赖
  • 3.2 JQuery语法
  • 3.3 JQuery 选择器
  • 3.4 JQuery事件
  • 3.5 操作元素
  • 3.6 常用方法

一、简述JS

javaScript：

JS：JavaScript(简称 JS), 是⼀个脚本语⾔, 解释型或即时编译型的编程语⾔. 虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名，但是它也被⽤到了很多⾮浏览器环境中.

1.1 引入方式

区别：

二、基础语法

2.1 变量

创建变量(变量定义/变量声明/变量初始化), JS声明变量有3种⽅式。

JavaScript 是⼀⻔动态弱类型语⾔，变量可以存放不同类型的值(动态).

命名规则：

2.2 数据类型

2.3 运算符

2.4 对象

2.4.1 数组

创建数组两种方式：

let arr = new Array();

let arr = [];
let arr2 = [1, 2, 'haha', false];

数组操作

注意事项：

2.4.2 函数

语法：

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调⽤
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

注意事项：

参数：

2.4.3 对象

对象：在 JS 中, 字符串, 数值, 数组, 函数都是对象. 每个对象中包含若⼲的属性和⽅法. 属性: 事物的特征. ⽅法: 事物的⾏为.

创建对象：

var a = {}; // 创建了⼀个空的对象
var student = {
name: '鸡哥',
height: 25,
weight: 2.5,
sayHello: function() {
console.log("你干嘛");
}
};

注意事项：

• 使⽤ { } 创建对象
• 属性和⽅法使⽤键值对的形式来组织.
• 键值对之间使⽤, 分割. 最后⼀个属性后⾯的 , 可有可⽆
• 键和值之间使⽤ : 分割.
• ⽅法的值是⼀个匿名函数.

var student = new Object();
student.name = "鸡哥";
student.height = 25;
student['weight'] = 2.5;
student.sayHello = function () {
console.log("你干嘛");
}

function 构造函数名(形参) {
this.属性 = 值;
this.⽅法 = function
}
let obj = new 构造函数名(实参);

注意事项：

• 在构造函数内部使⽤ this 关键字来表⽰当前正在构建的对象.
• 构造函数的函数名⾸字⺟⼀般是⼤写的.
• 构造函数的函数名可以是名词.
• 构造函数不需要 return
• 创建对象的时候必须使⽤ new 关键字.

三、JQuery

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架,于2006年发布.它封装JavaScript常⽤的功能代码, 提供了简洁⽽强⼤的选择器和DOM操作⽅法. 使⽤JQuery可以轻松地选择和操作HTML元素，从⽽减少了开发⼈员编写的代码量，提⾼了开发效率, 它提供的 API易于使⽤且兼容众多浏览器，这让诸如 HTML ⽂档遍历和操作、事件处理、动画和 Ajax 操作更加简单. JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互⾏为.

3.1 引⼊依赖

<script src="JQuery的URL"></script>

参考地址：地址

3.2 JQuery语法

基础语法：

$(selector).action()

解释：

• $() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.
• Selector 选择器, ⽤来"查询"和"查找" HTML 元素
• action 操作, 执⾏对元素的操作

3.3 JQuery 选择器

我们通过JQuery选择器来选择⼀些HTML元素. 然后对元素进⾏操作. JQuery选择器 基于已经存在的CSS选择器, 除此之外, 还有⼀些⾃定义的选择器. jQuery 中所有选择器都以 $ 开头：$().

3.4 JQuery事件

事件组成：

常见事件：

3.5 操作元素

3.6 常用方法