JavaScript基础与JQuery实践

🙉专栏推荐:Java入门知识🙉

🐹今日诗词:花弄影，月流辉，水晶宫殿五云飞🐹

⛳️点赞 ☀️收藏⭐️关注💬卑微小博主🙏

引入方式

JS的引入方式和html, css引入方式都是一样的, 但一般CSS代码放在head里面

JS代码放在body底部.

这与页面加载顺序有关, 一般页面先加载出数据, 然后才提供选项供用户选择

基础语法

变量

JS创建变量有三种方式

现在常用let创建变量, var正在使用频率正在下降

const创建的变量不能被修改, 类似finally

并且JavaSript是动态弱类型语言

动态/静态: 类型是否在编译时确定

弱类型/强类型: 类型是否需要强制转换

Java是静态强类型

Python是动态强类型

JS变量的类型

类型演示

JS运算符

运算符演示

主要有三个运算符需要注意

/: JS除的结果是可以是小数, Java两个整数除的结果只有整数

==和===: 都用于变量的比较, ==只比较值, ===比较值, 同时效验变量的类型

JS数组

JS创建数组一般有两种方式

JS的数组非常灵活, 会根据使用需求动态调整大小, 因此不需要手动指定数组大小

数组元素增删改查

增改查基本和Java差不多, 删除则会用到splice函数

splice(num1, num2): num1代表从哪个下标开始删除, num2代表删除的长度

增加

删除

更改

查找

数组的下标可以为数字也可以为字符或者字符串, 甚至负数

这种写法, 元素不计入数组长度中

这样的写法有点像Map, 键值对, 一个键对应一个值

JS函数

函数关键字: function

并且实参列表没有类型, 只需要声明变量即可

例如: function add(x, y) { }

关于传参个数

JS对象

创建对象

一般有两种方式: 1. 直接使用{ }创建对象, 2. 使用new Object创建

下面是两种不同的方式创建对象

对象的调用

一般也有两种方式调用

JQuery

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

使用JQuery需要引入对应的库

有两种引入方式

1. 输入JQuery文件的网址

2. 将文件下载到本地, 选择文件进行引入

JQuery官网: JQuery

TIP: 如果使用JQuery的函数出现问题了, 可能是引入出错了, 这时候可以尝试两种引用方式轮换使用

JQuery语法

JQuery代码一般写在$(document).ready()函数中

document ：整个⽂档对象,⼀个⻚⾯就是⼀个⽂档对象,使⽤document表示

这是为了防⽌⽂档在完全加载（就绪）之前运⾏JQuery代码，即在⽂档加载完成后才可以对⻚⾯进⾏操作。如果在⽂档没有完全加载之前就运⾏函数，操作可能失败

换言之,这一串代码也可以简写