【前端】javaScript

目录

一、简述JS

javaScript：

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

1.1 引入方式

引⼊⽅式语法描述⽰例⾏内样式直接嵌⼊到 html 元素内部

<input type="button" value="点我⼀下" onclick="alert('haha')">

内部样式定义

<script>

标签，写到 script 标签中

<script> alert("haha"); </script>

外部样式定义

<script >

标签，通过src属性引⼊外部js⽂件

<script src="hello.js"> </script>

区别：

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

二、基础语法

2.1 变量

创建变量(变量定义/变量声明/变量初始化), JS声明变量有3种⽅式。
关键字解释⽰例var期JS中声明变量的关键字, 作⽤域在该语句的函数内

var name = 'zhangsan';

letES6 中新增的声明变量的关键字, 作⽤域为该语句所在的代码块内

let name = 'zhangsan';

const声明常量的，声明后不能修改

const name = 'zhangsan';

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

命名规则：

1. 组成字符可以是任何字⺟、数字、下划线（_）或美元符号（$）
2. 数字不能开头
3. 建议使⽤驼峰命名

2.2 数据类型

数据类型描述number数字. 不区分整数和⼩数.string字符串类型. 字符串字⾯值需要使⽤引号引起来, 单引号双引号均可.boolean布尔类型. true 真, false 假undefined表⽰变量未初始化. 只有唯⼀的值 undefined.

2.3 运算符

运算符类型运算符算术运算符

+ - * / %

⾃增⾃减运算符

++ --

赋值运算符

= += -= *= /= %=

⽐较运算符

< > <= >= ==⽐较相等(会进⾏隐式类型转换) === ⽐较相等(不会进⾏隐式类型转换)

逻辑运算符

&& || !

位运算符

& 按位与 | 按位或 ~按位取反 ^按位异或

移位运算符

<< 左移 >> 有符号右移(算术右移) >>> ⽆符号右移(逻辑右移)

三目运算符

条件表达式 ? true_value: false_value

2.4 对象

2.4.1 数组

创建数组两种方式：

1. 使⽤ new 关键字创建：

let arr =newArray();

1. 使⽤字⾯量⽅式创建 [常⽤]

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

数组操作

1. 读: 使⽤下标的⽅式访问数组元素(从0开始)
2. 增: 通过下标新增, 或者使⽤ push 进⾏追加元素
3. 改: 通过下标修改
4. 删: 使⽤ splice ⽅法删除元素

注意事项：

1. 如果下标超出范围读取元素, 则结果为 undefined
2. 不要给数组名直接赋值, 此时数组中的所有元素都没了. 相当于本来 arr 是⼀个数组, 重新赋值后变成字符串了.

2.4.2 函数

语法：

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

注意事项：

1. 函数定义并不会执⾏函数体内容, 必须要调⽤才会执⾏. 调⽤⼏次就会执⾏⼏次.
2. 调⽤函数的时候进⼊函数内部执⾏,函数结束时回到调⽤位置继续执⾏. 可以借助调试器来观察.
3. 函数的定义和调⽤的先后顺序没有要求. (这⼀点和变量不同, 变量必须先定义再使⽤)

参数：

1. 实参和形参之间的个数可以不匹配. 但是实际开发⼀般要求形参和实参个数要匹配
2. 如果实参个数⽐形参个数多, 则多出的参数不参与函数运算
3. 如果实参个数⽐形参个数少,则此时多出来的形参值为undefined

2.4.3 对象

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

创建对象：

1. 使⽤ 字⾯量 创建对象 [常⽤]

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

注意事项：

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

1. 使⽤ new Object 创建对象

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

1. 使⽤ 构造函数 创建对象

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 中所有选择器都以 $ 开头：$().

语法描述

$("*")

选取所有元素

$(this)

选取所有元素

$("p")

所有

<p>

元素

$("p:first")

选取第⼀个

<p>

元素

$("p:last")

最后⼀个

<p>

元素

$(".box")

所有 class=“box” 的元素

$("#box")

id=“box” 的元素$(“.intro.demo”)

$("p.intro")

选取 class 为 intro 的

<p>

元素

$("ul li:first")

选取第⼀个

<ul>

元素的第⼀个

<li>

元素

$(":input")

所有

<input>

元素

$(":text")

所有 type=“text” 的

<input>

元素

$(":checkbox")

所有 type=“checkbox” 的

<input>

元素

3.4 JQuery事件

事件组成：

1. 事件源: 哪个元素触发的
2. 事件类型: 是点击, 选中, 还是修改?
3. 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数.

常见事件：
事件代码⽂档就绪事件(完成加载)

$(document).ready(function)

点击事件

$(selector).click(function)

双击事件

$(selector).dblclick(function)

元素的值发⽣改变

$(selector).change(function)

⿏标悬停事件

$(selector).mouseover(function)

3.5 操作元素

JQuery⽅法说明test()设置或返回所选元素的⽂本内容html()设置或返回所选元素的内容（包括 HTML 标签）val()设置或返回表单字段的值

3.6 常用方法

1. JQuery的attr()⽅法⽤于获取属性值.
2. css() ⽅法设置或返回被选元素的⼀个或多个样式属性
3. 添加 HTML 内容 3.1. append() : 在被选元素的结尾插⼊内容 3.2. prepend(): 在被选元素的开头插⼊内容 3.3. after(): 在被选元素之后插⼊内容 3.4. before(): 在被选元素之前插⼊内容
4. 删除元素和内容 4.1. remove() : 删除被选元素（及其⼦元素） 4.2. empty(): 删除被选元素的⼦元素。