💓 博客主页：从零开始的-CodeNinja之路

⏩ 收录文章：【JS】深度学习JavaScript

🎉欢迎大家点赞👍评论📝收藏⭐文章

目录

一:JavaScript1.1 JavaScript是什么1.2 JS的引入方式1.3 JS变量1.4 数据类型1.5 数组操作1.6 函数1.6.1 函数的语法格式1.6.2 函数表达式

1.7 对象

二. JQuery2.1JQuery是什么2.2 引入依赖2.3 JQuery语法2.4. JQuery选择器2.5 JQuery事件2.6 操作元素2.6.1 获取/设置元素内容2.6.2 获取元素2.6.3 设置元素

2.7 添加元素2.8 删除元素

三.项目实现:表白墙

一:JavaScript

1.1 JavaScript是什么

JavaScript(简称JS),是⼀个脚本语⾔,解释型或即时编译型的编程语⾔.虽然它是作为开发Web页面的

脚本语言而出名，但是它也被用到了很多非浏览器环境中,其实Java和JavaScript之间的语法风格相去甚远

JavaScript和HTML和CSS之间的关系

• HTML:网页的结构(⻣)

• CSS:网页的表现(皮)

• JavaScript:网页的动作(魂)

1.2 JS的引入方式

JS有3种引入方式，语法如下表格所示：

3种引入方式对比:

内部样式会出现⼤量的代码冗余,不方便后期的维护，所以不常用.行内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的jS.外部样式，html和js实现了完全的分离,企业开发常用方式.

1.3 JS变量

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

注意事项:

JavaScript是⼀门动态弱类型语言，变量可以存放不同类型的值(动态),随着程序的运行,变量的类型可能会发⽣改变.(弱类型)

1.4 数据类型

虽然js是弱数据类型的语言，但是js中也存在数据类型，js中的数据类型分为：原始类型和引用类型，具体有如下类型

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

<code><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>

1.5 数组操作

读:使用下标的方式访问数组元素(从0开始)增:通过下标新增,或者使用push进行追加元素改:通过下标修改删:使用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>

注意:

如果下标超出范围读取元素,则结果为undefined不要给数组名直接赋值,此时数组中的所有元素都没了.

相当于本来arr是⼀个数组,重新赋值后变成字符串了.

1.6 函数

1.6.1 函数的语法格式

函数定义并不会执行函数体内容,必须要调用才会执行.调用⼏次就会执行⼏次.

function hello() {

console.log("hello");

}

// 如果不调⽤函数, 则没有执⾏打印语句

hello();

• 调用函数的时候进⼊函数内部执行,函数结束时回到调用位置继续执行.可以借助调试器来观察.

• 函数的定义和调用的先后顺序没有要求.(这⼀点和变量不同,变量必须先定义再使用)

// 调⽤函数

hello();

// 定义函数

function hello() {

console.log("hello");

}

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

如果实参个数比形参个数多,则多出的参数不参与函数运算

sum(10, 20, 30); // 30

如果实参个数比形参个数少,则此时多出来的形参值为undefined

sum(10); // NaN, 相当于 num2 为 undefined.

JS的函数传参比较灵活,这⼀点和其他语言差别较⼤.事实上这种灵活性往往不是好事.

1.6.2 函数表达式

另外⼀种函数的定义方式

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

此时形如 function() { } 这样的写法定义了⼀个匿名函数,然后将这个匿名函数用⼀个变量来表

示.后面就可以通过这个add变量来调⽤函数了.

JS中函数可以⽤变量保存,也可以作为其他函数的参数或者返回值.

1.7 对象

在JS中,字符串,数值,数组,函数都是对象.

每个对象中包含若⼲的属性和方法.

• 属性:事物的特征.

• 方法:事物的行为.

JavaScript的对象和Java的对象概念上基本⼀致.只是具体的语法表项形式差别较大

使用字面量创建对象

使用{}创建对象

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();

使用构造函数创建对象

function 构造函数名(形参) {

this.属性 = 值;

this.⽅法 = function...

}

var obj = new 构造函数名(实参);

注意:

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

• 构造函数的函数名首字母⼀般是⼤写的.

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

• 构造函数不需要return

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

二. JQuery

2.1JQuery是什么

W3C标准给我们提供了⼀系列的函数,让我们可以操作:

• 网页内容

• 网页结构

• 网页样式

但是原生的JavaScript提供的API操作DOM元素时,代码比较繁琐,冗⻓.我们学习使用JQuery来操作页面对象.

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架,于2006年发布.它封装JavaScript常用的功能

代码,提供了简洁⽽强⼤的选择器和DOM操作方法.使⽤JQuery可以轻松地选择和操作HTML元素，从

而减少了开发⼈员编写的代码量，提高了开发效率,它提供的API易于使⽤且兼容众多浏览器，这让诸

如HTML⽂档遍历和操作、事件处理、动画和Ajax操作更加简单.JQuery对于事件的处理也进行了简

化,提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互行为.

2.2 引入依赖

使用 JQuery需要先引入对应的库

在使⽤jQuery CDN时，只需要在HTML文档中加入如下代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>code>

其中， src 属性指明了JQuery库所在的URL.这个URL是CDN(内容分发网络)服务提供商为jQuery库

提供的⼀个统⼀资源定位符.

2.3 JQuery语法