目录
一、简述JS1.1 引入方式 二、基础语法2.1 变量2.2 数据类型2.3 运算符2.4 对象2.4.1 数组2.4.2 函数2.4.3 对象 三、JQuery3.1 引⼊依赖3.2 JQuery语法3.3 JQuery 选择器3.4 JQuery事件3.5 操作元素3.6 常用方法
一、简述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> |
区别：
内部样式会出现⼤量的代码冗余, 不⽅便后期的维护，所以不常⽤.⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的jS.外部样式，html和js实现了完全的分离, 企业开发常⽤⽅式.二、基础语法
2.1 变量
创建变量(变量定义/变量声明/变量初始化), JS声明变量有3种⽅式。
| 关键字 | 解释 | ⽰例 |
|---|---|---|
| var | 期JS中声明变量的关键字, 作⽤域在该语句的函数内 | var name = 'zhangsan'; |
| let | ES6 中新增的声明变量的关键字, 作⽤域为该语句所在的代码块内 | let name = 'zhangsan'; |
| const | 声明常量的，声明后不能修改 | const name = 'zhangsan'; |
JavaScript 是⼀⻔动态弱类型语⾔，变量可以存放不同类型的值(动态).
命名规则：
组成字符可以是任何字⺟、数字、下划线（_）或美元符号（$）数字不能开头建议使⽤驼峰命名2.2 数据类型
| 数据类型 | 描述 |
|---|---|
| number | 数字. 不区分整数和⼩数. |
| string | 字符串类型. 字符串字⾯值需要使⽤引号引起来, 单引号双引号均可. |
| boolean | 布尔类型. true 真, false 假 |
| undefined | 表⽰变量未初始化. 只有唯⼀的值 undefined. |
2.3 运算符
| 运算符类型 | 运算符 |
|---|---|
| 算术运算符 | + - * / % |
| ⾃增⾃减运算符 | ++ -- |
| 赋值运算符 | = += -= *= /= %= |
| ⽐较运算符 | < > <= >= ==⽐较相等(会进⾏隐式类型转换) === ⽐较相等(不会进⾏隐式类型转换) |
| 逻辑运算符 | && || ! |
| 位运算符 | & 按位与 | 按位或 ~按位取反 ^按位异或 |
| 移位运算符 | << 左移 >> 有符号右移(算术右移) >>> ⽆符号右移(逻辑右移) |
| 三目运算符 | 条件表达式 ? true_value: false_value |
2.4 对象
2.4.1 数组
创建数组两种方式：
使⽤ new 关键字创建：let arr = new Array(); let arr = []; let arr2 = [1, 2, 'haha', false];数组操作
读: 使⽤下标的⽅式访问数组元素(从0开始)增: 通过下标新增, 或者使⽤ push 进⾏追加元素改: 通过下标修改删: 使⽤ splice ⽅法删除元素注意事项：
如果下标超出范围读取元素, 则结果为 undefined不要给数组名直接赋值, 此时数组中的所有元素都没了. 相当于本来 arr 是⼀个数组, 重新赋值后变成字符串了.2.4.2 函数
语法：
// 创建函数/函数声明/函数定义 function 函数名(形参列表) { 函数体 return 返回值; }// 函数调⽤ 函数名(实参列表) // 不考虑返回值 返回值 = 函数名(实参列表) // 考虑返回值 注意事项：
函数定义并不会执⾏函数体内容, 必须要调⽤才会执⾏. 调⽤⼏次就会执⾏⼏次.调⽤函数的时候进⼊函数内部执⾏,函数结束时回到调⽤位置继续执⾏. 可以借助调试器来观察.函数的定义和调⽤的先后顺序没有要求. (这⼀点和变量不同, 变量必须先定义再使⽤)参数：
实参和形参之间的个数可以不匹配. 但是实际开发⼀般要求形参和实参个数要匹配如果实参个数⽐形参个数多, 则多出的参数不参与函数运算如果实参个数⽐形参个数少,则此时多出来的形参值为undefined2.4.3 对象
对象：在 JS 中, 字符串, 数值, 数组, 函数都是对象. 每个对象中包含若⼲的属性和⽅法.
属性: 事物的特征.
⽅法: 事物的⾏为.
创建对象：
使⽤ 字⾯量 创建对象 [常⽤] var a = {}; // 创建了⼀个空的对象 var student = {name: '鸡哥',height: 25,weight: 2.5,sayHello: function() {console.log("你干嘛");}};注意事项：
使⽤ { } 创建对象属性和⽅法使⽤键值对的形式来组织.键值对之间使⽤, 分割. 最后⼀个属性后⾯的 , 可有可⽆键和值之间使⽤ : 分割.⽅法的值是⼀个匿名函数. 使⽤ new Object 创建对象var student = new Object();student.name = "鸡哥";student.height = 25;student['weight'] = 2.5;student.sayHello = function () { console.log("你干嘛");}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事件
事件组成：
事件源: 哪个元素触发的事件类型: 是点击, 选中, 还是修改?事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数.常见事件：
| 事件 | 代码 |
|---|---|
| ⽂档就绪事件(完成加载) | $(document).ready(function) |
| 点击事件 | $(selector).click(function) |
| 双击事件 | $(selector).dblclick(function) |
| 元素的值发⽣改变 | $(selector).change(function) |
| ⿏标悬停事件 | $(selector).mouseover(function) |
3.5 操作元素
| JQuery⽅法 | 说明 |
|---|---|
| test() | 设置或返回所选元素的⽂本内容 |
| html() | 设置或返回所选元素的内容（包括 HTML 标签） |
| val() | 设置或返回表单字段的值 |
3.6 常用方法
JQuery的attr()⽅法⽤于获取属性值.css() ⽅法设置或返回被选元素的⼀个或多个样式属性添加 HTML 内容3.1.
append() : 在被选元素的结尾插⼊内容3.2.
prepend(): 在被选元素的开头插⼊内容3.3.
after(): 在被选元素之后插⼊内容3.4.
before(): 在被选元素之前插⼊内容删除元素和内容4.1.
remove() : 删除被选元素（及其⼦元素）4.2.
empty(): 删除被选元素的⼦元素。