Java前端基础——JavaScript

一、初识JavaScript

1.1 什么是JavaScript

JavaScript (简称 JS), 是⼀个脚本语言, 解释型或即时编译型的编程语言.  虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中.  

JavaScript和HTML与CSS之间的关系：

如果说HTML是骨架，那么CSS就是皮肉，JavaScript就是人物的动作。

---

1.2 JavaScript 快速上手 

---

1.3 JS引入方式

和CSS一样，JavaScript的引入方式页有三种：

 与CSS一样，在企业开发中主要使用外部样式。

示例：

1.外部样式

2.内部样式

3.行内样式

---

二、基础语法

2.1 变量

JS有三种声明变量的方式：

！！！注意： 

与Java不同，JavaScript是一门动态弱类型语言，一个类型的变量可以存放不同类型的值(动态）。如：

var name = "haha";
var age = 18;

并且随着程序的运行，变量的类型可能会发生改变。（弱类型）如：

let name = "haha";
name = 18;

示例：

我们所学的Java是静态强类型语言, 在变量声明时, 需要明确定义变量的类型. 如果不强制转换, 类型不会发生变化

！！！变量命名规则： 

1. 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

2. 数字不能开头 

3. 建议使用驼峰命名 + 表示字符串拼接, 也就是把两个字符串首尾相接变成一个字符串. 

4. \n 表示换行

---

2.2  数据类型

虽然JavaScript是弱类型语言，但还是有数据类型，分为原始类型和引用类型：

使用typeof函数可以返回变量的数据类型：

<script>
 var a = 10;
 console.log(typeof a);//number
 var b = 'hello';
 console.log(typeof b);//string
 var c = true;
 console.log(typeof c);//boolean
 var d;
 console.log(typeof d);//undefined
 var e = null;
 console.log(typeof e);//null
</script>

执行结果：

---

2.3 运算符

JavaScript的运算符和Java的基本相同，只有几处不同：

不同点：
1.  /  ：Java中 5/2 = 2 而JavaScript中 5/2 = 2.5；

 

2. == ：不比较类型，只比较值是否相等

3. === ：比较类型，值和类型都相等才相等

 

4. ！== ：不比较类型（与3类似的逻辑）

---

三、JavaScript对象

3.1 数组

3.1.1 数组的定义

创建数组有两种方式：

1.使用new关键字创建：

//注意：Array大写以及与Java的区别
let array = new Array();

2.使用字面量方式创建：

//与Java不同，这里使用的是中括号
let array = [];
let array2 = [1,2,"haha",false];

注意: JS 的数组不要求元素是相同类型.

---

3.1.2 数组操作

1. 读: 使用下标的方式访问数组元素(从 0 开始) 

2. 增: 通过下标新增, 或者使用 push 进行追加元素 

3. 改: 通过下标修改 

4. 删: 使用 splice 方法删除元素 

 示例：

<script>
 var arr = [1, 2, 'haha', false];

 //读取数组 
 console.log(arr[0]); //1

 //添加数组元素 
 arr[4] = "add"
 console.log(arr[4]);//add

 console.log(arr.length);//5, 获取数组的⻓度 

 //修改数组元素 
 arr[4] = "update"
 console.log(arr[4]);//update

 //删除数组元素 
 arr.splice(4,1);// 第⼀个参数表⽰从下标为4的位置开始删除. 第⼆个参数表⽰要删除的元
素个数是 1 个 

 console.log(arr[4]);//undefined 元素已经删除, 如果元素不存在, 结果为undefined 

 console.log(arr.length);//4, 获取数组的⻓度 
</script>

小知识：
 1.如果删除数组中不存在的元素，是不会执行成功的，如一个数组有5个元素，删除1000下标的元素。

2.如果将一个元素插入到数组的-1下标，会执行成功，但是数组长度不变。

注意：

1. 如果下标超出范围读取元素, 则结果为 undefined

2. 不要给数组名直接赋值, 此时数组中的所有元素都没了. （比如array = ”abc“，本来array是一个数组，但是现在被改为字符串了）

---

3.2 函数

3.2.1 语法

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

  和Java一样，函数需要调用才能执行，并且调用几次就执行几次，如：

注意：函数定义和调用的顺序没有要求，可以先使用后定义。

 

---

3.2.2 函数参数个数问题

实参和形参之间的个数可以不匹配. 但是实际开发一般要求形参和实参个数要匹配。

<1>实参个数多了

多出的参数不参与运算。

<2>实参个数少了

多出来的形参值为undefined。

---

3.2.3 函数表达式

函数表达式是定义函数的另一种方法

var add = function() {
 var sum = 0;
 for (var i = 0; i < arguments.length; i++) {
 sum += arguments[i];
 }
 return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add); // function

 此时通过变量add来调用整个匿名函数function()。

---

3.3 对象

在 JS 中, 字符串, 数值, 数组, 函数都是对象. 每个对象中包含若干的属性和方法.   

• 属性: 事物的特征. 

• 方法: 事物的行为.  

1. 使用字面量创建对象 [常用]

var a = {}; // 创建了⼀个空的对象 
var student = {
 name: '蔡徐坤',
 height: 175,
 weight: 170,
 sayHello: function() {
 console.log("hello");
 }
};

• 使用 { } 创建对象 

• 属性和方法使用键值对的形式来组织.

• 键值对之间使用 , 分割. 最后⼀个属性后面的, 可有可无

• 键和值之间使用 : 分割 

• 方法的值是⼀个匿名函数.

 

！！！如何使用对象的属性和方法？

// 1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的" 
console.log(student.name);
// 2. 使⽤ [ ] 访问属性, 此时属性需要加上引号 
console.log(student['height']);
// 3. 调⽤⽅法, 别忘记加上 ()  
student.sayHello();

 

 2. 使用new Object 创建对象 

var student = new Object(); // 和创建数组类似 
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
 console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();

！！！使用 { } 创建的对象也可以随时使用student.name = "哈啊哈"; 这样的方式来新增属性. 

 

3.使用构造函数创建对象 

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

示例： 

function Cat(name, type, sound) {
   this.name = name;
   this.type = type;
   this.miao = function () {
   console.log(sound); // 别忘了作⽤域的链式访问规则 
 }
}
var mimi = new Cat('咪咪', '中华⽥园喵', '喵');
var xiaohei = new Cat('⼩⿊', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '⾦渐层', '咕噜噜');
console.log(mimi);
mimi.miao();

 

注意: 

• 在构造函数内部使用 this 关键字来表示当前正在构建的对象. 

• 构造函数的函数名首字母一般是大写的. 

• 构造函数的函数名可以是名词. 

• 构造函数不需要 return 

• 创建对象的时候必须使用 new 关键字. 

（和Java一样）

---

四、JQuery

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架。

4.1 引入依赖

方法一：将JQuery库下载到本地，再引入

第一步：通过官网下载https://releases.jquery.com/

第二部：选择最新版的缩小版，保存到本地

第三步：引入依赖，在src中输入保存的位置即可

方法二：再浏览器中直接引入

1.点击最新版的缩小版

2.复制后粘贴到html文件中即可

开发时, 建议把JQuery库下载到本地, 放在当前项目中. 引入外部地址, 会有外部地址不能访问的风险. ，而且本地的访问速度要更快

---

4.2 JQuery语法

jQuery 语法是通过选取 HTML 元素， 并对选取的元素执行某些操作 

基础语法：

$(selector).action()

• $() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, 用于选择和操作 HTML 元素. 

• Selector 选择器, 用来"查询"和"查找" HTML 元素 

• action 操作, 执行对元素的操作 

JQuery代码一般写在document ready函数中，这是为了防止在文档加载完成之前就运行JQuery代码（可能导致操作失败）

$(document).ready(fuction(){

    //JQuery代码

});

示例： 

---

4.3 JQuery选择器

JQuery选择器 基于已经存在的CSS选择器, 除此之外, 还有⼀些⾃定义的选择器. 

jQuery 中所有选择器都以 $ 开头：$().

 

---

4.4 JQuery事件

JS 要构建动态页面, 就需要感知到用户的行为。

用户对于页面的⼀些操作(点击, 选择, 修改等) 都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作。（和Java的GUI用户图形化界面差不多）

事件由三部分组成: 

1. 事件源: 哪个元素触发的

2. 事件类型: 是点击, 选中, 还是修改?

3. 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数. 

例如：

常见的事件类型：

---

4.5 操作元素

4.5.1 获取/设置元素内容

下面有3个简单的JQuery方法

这三个方法既可以获取元素内容又可以设置元素内容，当有参数时是设置元素，没有参数时是获取元素内容。

示例一：获取元素

 

实列二：设置元素

设置元素是时text和html也是有区别的：

对于获取表单元素的内容，html和text是不起作用的，要使用val方法。

例如：

设置表单元素的值也是如此。

---

4.5.2 获取/设置元素属性

 可以使用attr()方法获取到元素的属性。

示例一：获取属性

示例二：设置属性（第一个参数表示要获取的属性，第二个参数表示要将这个属性修改成的值）

---

4.5.3 获取/设置CSS属性

css() 方法设置或返回被选元素的一个或多个样式属性  

示例一：获取CSS属性

示例二：修改CSS属性，与attr（）方法一样，传入第二个参数用来修改当前选中的属性的值

颜色由棕色变为了黑色

---

4.5.4  添加元素/删除元素

添加HTML内容：

1. append() : 在被选元素的结尾插入内容 

2. prepend() : 在被选元素的开头插入内容 

3. after() : 在被选元素之后插入内容

4. before() : 在被选元素之前插入内容 

示例：

 

 

删除元素 

删除元素和内容，一般使用以下两个 jQuery 方法： 

1. remove() : 删除被选元素（及其子元素） 

2. empty() : 删除被选元素的子元素。 

示例：

1.remove()

2.empty()

 

原文地址：https://blog.csdn.net/zhakakqns/article/details/143872636

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！