当前位置：首页 > news >正文

JavaScript认识+JQuery的依赖引用

news 2025/7/16 13:24:31

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>alert("弹了个框")</script>
</body>
</html>

JS有3种引⼊⽅式，语法如下所示：

行内样式：直接嵌⼊到html元素内部<input type="button" value="点我⼀下" οnclick="alert('haha')">

⾏内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的jS

内部样式：定义<script>标签，写在script标签里<script> alert("haha");</script>

内部样式会出现⼤量的代码冗余,不⽅便后期的维护，所以不常⽤

外部样式：定义<script>标签，通过src属性引入外部js文件:<script src="hello.js">

外部样式，html和js实现了完全的分离,企业开发常⽤⽅式

基础语法：

变量

var 早期JS中声明变量的关键字,作⽤域在该语句的函数内let var name='zhangsan';

ES6中新增的声明变量的关键字,作⽤域为该语句所在的代码块内 let name='zhangsan';

const 声明常量的，声明后不能修改 const name='zhangsan';

命名规则：

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

2.数字不能开头

3.+ 表示字符串拼接,也就是把两个字符串首尾相接变成⼀个字符串

4. \n 表示换行

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let aa = 10;console.log(typeof aa); // 查看打印类型aa = "aaa";console.log(typeof aa);</script>
</body>
</html> >

这是他们的类型：

数据类型

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

number：数字.不区分整数和⼩数.。

string：字符串类型，字符串字⾯值需要使⽤引号引起来,单引号双引号均可.。

boolean：布尔类型，true真、false假。

undefined：表⽰变量未初始化，只有唯⼀的值undefined。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let aa = 10;console.log(typeof aa); // 查看打印类型aa = "aaa";console.log(typeof aa);aa = true;console.log(typeof aa);let bb;console.log(typeof bb);</script>
</body>
</html>

运算符

和java基本一致。

不同点：

==：比较值相等(会进行隐式类型转换)

===：比较值和类型相等(不会进行隐式类型转换)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let aa = 10;let bb = "10";console.log("aa == bb:" + (aa==bb));console.log("aa === bb:" + (aa===bb));</script>
</body>
</html>

数组

1.使⽤new关键字创建

var arr = new Array();

这个方法已经不常用了，可以不用记。

2.使⽤字面量方式创建

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

创建的数组长度不是固定的，我们可以给其加长，并且里面定义的类型可以不一样。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 数组let array = [];//定义数组let array2 = [10,"a",true]//定义数组里面的类型可以不相同//取值console.log(array2[0]);console.log(array2[1]);console.log(array2[2]);//添加array2[3] = "b";array2[100] = "x"console.log(array2[3]);console.log(array2[100]);//修改array2[0] = 20;console.log(array2[0]);//删除array2.splice(1,1);//从下表为1开始，删除一个console.log(array2);array2[-1] ="dx"array2["中文"] ="你好"console.log(array2);</script>
</body>
</html>

根据上面直接在下标100赋值，可以看到，中间是可以有空值。

然后还可以发现，js的下标不只有数字，还可以为一些奇奇怪怪的东西，像负数、中文等。

函数定义

function +自定义名字(){}。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 函数定义function sum(x,y){console.log(x + y);}// // 第二种写法// let sum = function(x,y){//     console.log(x + y);// }sum(10,20);sum(10,30);sum("10",20);sum(10,"20");sum(1)sum("10")sum(10,20,30)</script>
</body>
</html>

可以看到，和java定义函数大差不差，但是在传参这方面非常松，甚至可以多传或者少传，传入不类型。

对象定义

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 对象定义let student = {};let student2 = {"name" :"zhangsan",//name，也就是前面的引号可以不加，赋值才需要age:15};//读console.log(student2.name);console.log(student2["name"]);// 修改student2.name = "lisi"  console.log(student2.name);console.log(student2);//添加student.name = "空对象赋值";console.log(student) </script>
</body>
</html>

创建对象方法：

1.使用{}创建：

<script>var a = {}; // 创建了一个空的对象var student = {name: '柠檬茶',height: 172,weight: 140,sayHello: function() {console.log("hello");}};// 1. 使用.访问运算符来访问属性
console.log(student.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法, 别忘记加上 ()
student.sayHello();</script>

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

<script>// 第二种方法构造函数创建对象
function function1(name,height,weight) {this.name = name;this.height = height;this.weight1 = function(){console.log(weight);}
}
var cs1 = new function1('柠檬茶',175,170);
console.log(cs1);
cs1.weight1();</script>

JQuery

W3C 标准给我们提供了一系列的函数, 让我们可以操作:
• 网页内容
• 网页结构
• 网页样式
但是原生的JavaScript提供的API操作DOM元素时, 代码比较繁琐, 冗长. 所以使用JQuery来操作页面对象.
jQuery是一个快速、简洁且功能丰富的JavaScript框架, 于2006年发布. 它封装JavaScript常用的功能（也是老东西了，但也比原生的好使点）
代码, 提供了简洁而强大的选择器和DOM操作方法. 使用JQuery可以轻松地选择和操作HTML元素，从
而减少了开发人员编写的代码量，提高了开发效率, 它提供的 API 易于使用且兼容众多浏览器，这让诸
如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单. JQuery对于事件的处理也进行了简
化, 提供了一个简单的API来绑定、触发和处理事件，使开发人员能够更方便地处理各种交互行为.

（复制粘贴一下JQuery介绍^-^）