JavaScript知识点

第一章JavaScript概述

1.了解JavaScript的作用

表单验证
实现网页动态效果

2.了解JavaScript的特点

概念：Javascript是一种基于对象和事件驱动的客户端脚本语言，并具有相对的安全性，主要是用于创建交互性较强的动态页面。

基于对象
事件驱动
解释性语言
实时性
动态性
跨平台
简单性
安全性

3.掌握Javascript的组成

ECMAScript标准
浏览器对象模型
文档对象模型

4.掌握在页面引入JavaScript的方式

(1) 内嵌式：使用<script></script>标签对
目前建议放到body里面

<body>
此处放div代码即可
<script>
里面放js语句
</script>
</body>

(2) 外部：链接外部的JavaScript文件
创建后缀名为js的文件，在HTML文件里面引入。

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

(3) 行内：javascript伪URL引入
用法：javascript:javascript脚本代码
例如：<div onlick="javascript:alert('弹出你好')">按钮</div>

5.常用的输入输出语句

（1）警示对话框alert()
（2）提示对话框prompt()
（3）确认框confirm()
（4）页面写入document.write()

直接显示在HTML文挡里，该输出语句会解析HTML标签。 “\n”使用在document.write()中，只起到换行的作用

（5）控制台输出console.log()，\n可在内使用

6.注释

单行注释 //
多行（块）注释/**/

第二章变量、基本语法、数据类型

一、变量

1. 变量是什么？

变量就是一个容器，用来存放数据的。

2. 变量的本质是什么?

  变量是程序在内存中申请的一块用来存放数据的空间。

3. 变量的使用

声明变量 var age;
赋值：age = 10; 右侧的值赋到左边的空间里
变量的初始化：声明变量+赋值 var age = 18；
更新变量：一个变量被重新复赋值后，它原有的值就会被覆盖,变量值将以最后一次赋的值为准。var age= 18；age= 30;
同时声明多个变量：变量之间用逗号隔开。

4. 变量的命名规范：

由字母、数字、下划线、美元符号$组成
严格区分大小写
数字不能开头
不能是关键字、保留字
变量名需要有意义，遵循驼峰式命名

二、基本语法

1. 区分小写

2. 标识符的命名规则（变量、函数、属性、函数）

由字母、数字、下划线、美元符号$组成
严格区分大小写
数字不能开头
不能是关键字、保留字
遵循驼峰式命名

3. JavaScript中语句以一个;结尾（英文分号）。

三、数据类型

1. 基本数据类型

（1）数值类型number

整数
浮点数

（2）布尔类型boolean

true
false

（3）字符串类型string

必须用引号引起来

（4） undefined类型undefined

声明变量，但未赋值

（5） null类型null

2. 复合数据类型

（1） object类型object
（2）数组array
（3）函数function

3. 方法

（1） typeof( )：用来检测给定变量的数据类型
（2） Boolean( )：把值转换为Boolean类型
（3） parseInt()：用于将字符串转换成整数数值。
（4） parseFloat()：用于将字符串转换成浮点型数值。
（5） Number( )：把值转换成数字
（6） String( )：把值转换成字符串
（7） toString()：将值转换成字符串
（8） toFixed( )：把值按照指定的小数位返回

4. length:该属性返回字符串的长度。（重要）

举例： alert(“软件系”.length);//3

5. isNaN 判断变量是否为非数字的类型非数字true 数字false

6. JS可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)，禁止不配套使用。

正确示范：“ 我最喜欢 ‘乒乓球’ 运动 ” 或者 ‘ 我最喜欢 “乒乓球” 运动 ’

7. 注意字符串拼接。

多个字符串之间可以使用+进行拼接,其拼接方式为字符串+任何类型=拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串

8. js隐式转换(- * /) 减号、乘号、除号

利用算术运算隐式转换为数值型

第三章运算符

一、运算符

算数运算符

加（+）、减（-）、乘（*）、除（/）、取余（%）、自增（++）、自减（–）。

特别注意：当+号的其中一侧或者两侧是字符的时候，+充当连接符的作用。如：‘a’ + 1、2 + ‘a’、‘c’ + ‘a’。

赋值运算符

=（赋值）、+=（加赋值）、-=（减赋值）、*=（乘赋值）、/=（除赋值）、%=（取余赋值）

关系（比较）运算符

>（大于）
<（小于）
==（等于）、
!=（不等于）
>=（大于等于）
<=（小于等于）、
!==（严格不等于，比较类型和值）
===（全等，会比较类型和值）

字符串运算符

逻辑运算符

与（&&）、或（||）、非（!）

三目运算符（条件运算符）

？： ;
表达式？为真返回前面：为假返回后面；
优先级：

二、解释

1.概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值 true / false 作为比较运算的结果。
2.逻辑与&&：两边都是true才返回true ,否则返回false
3.逻辑或||：两边都是false才返回false ,否则都为true
4.逻辑非! ：也叫作取反符,用来取一个布尔值相反的值,如true的相反值是false
5.加赋值的用法：age += 2 等价于 age = age + 2；其他同理可得。

第四章流程控制

一、分支结构

1.if语句

（1）

if（表达式）{  表达式为真则执行此花括号里面的代码 }

（2）

if（表达式）{  表达式为真则执行此花括号里面的代码
}else{ 表达式为假则执行此花括号里面的代码
}

（3）

if  (表达式) { }else  if (表达式2) {}else{ }

语法说明：

else if是else和if两个关键字，中间使用空格进行间隔，不要粘连在一起书写。

条件1到条件n都是boolean类型

else if语句可以有任意多句

最后的else语句为可选

如果功能代码部分不是语句块，也就是不用大括号，就只能写一句。最好是都写上花括号。

执行流程：
当条件1成立时，则执行功能代码1；
当条件1不成立且条件2成立时，则执行功能代码2；
如果条件1、条件2都不成立且条件3成立，则执行功能代码3，
依次类推，如果所有条件都不成立，则执行else语句的功能代码。
举例：
提示用户输入0_{100的数字，如果输入的不是数字则提示“非法输入”；如果输入的数字不在0}100之间，则提示“不在范围之内”，否则提示“在范围之内”。

方法一：

方法二：

2.switch语句

语法结构：

switch ：开关转换， case ：小例子选项
switch ：开关转换， case ：小例子选项
switch ：开关转换， case ：小例子选项
关键字 switch 后面括号内可以是表达式或值，通常是一个变量
关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
switch 表达式的值会与结构中的 case 的值做比较
如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

3.switch 语句和 if else if 语句的区别

① 一般情况下，它们两个语句可以相互替换
② switch…case 语句通常处理 case为比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
③ switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
④ 当分支比较少时，if… else语句的执行效率比 switch语句高。
⑤ 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

二、循环结构

1. while( ){ }

语法结构：

执行思路：
① 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
② 执行循环体代码
③ 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束
注意:使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环。

2. do{ }while( )

语法结构：

执行思路：
①先执行一次循环体代码
②再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码
注意：先再执行循环体，再判断，我们会发现 do…while 循环语句至少会执行一次循环体代码

3. for循环

语法结构：

执行思路：
（1）初始化变量，初始化操作在整个 for 循环只会执行一次。
（2）执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。
（3）执行操作表达式，此时第一轮结束。
（4）第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
（5）继续执行操作表达式，第二轮结束。
（6）后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

4. 双重for循环：

语法结构：

执行思路：
内层循环可以看做外层循环的语句
内层循环执行的顺序也要遵循 for 循环的执行顺序
外层循环执行一次，内层循环要执行全部次数

三、关键字

1. continue 关键字

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

2. break关键字

break 关键字用于立即跳出整个循环（循环结束）。

第五章函数

1. 函数的概念

函数：就是封装了一段可被重复调用执行的代码块。

2. 函数的使用

// 声明函数

function 函数名() {//函数体代码
}

调用函数三种方式：
(1)事件名 = 函数名()

<button onclick="test()">按钮</button>
function test() {alert(1);
}

(2)函数名()【通过调用函数名来执行函数体代码，调用的时候千万不要忘记添加小括号】

function test() {alert(1);
}
test();

(3)事件名 = 函数名【之后会细讲，目前先了解。】

var el = document.getElementById('test');
el.onclick = function(){ alert(1)  };

3. 函数的参数

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3…) { // 可以定义任意多的参数，用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3…);

4. 函数的返回值

// 声明函数

function 函数名（）{...return  需要返回的值；
}

// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值

5. 函数内调用函数

举例：

function fn1() {console.log(111);fn2();console.log('fn1');
}
function fn2() {console.log(222);console.log('fn2');
}
fn1();

6. 函数的两种声明方式

（1）函数关键字 function 自定义函数方式

（2）匿名函数

7. 定时器函数

（1）延迟数秒执行（执行一次就停止）

https://www.runoob.com/jsref/met-win-settimeout.html

setTimeout(function () {alert(1);
}, 1500);

（2）间隔数秒持续执行（一直执行）

https://www.runoob.com/jsref/met-win-setinterval.htmlsetInterval(function () {alert(1);}, 1500);

（3）清除定时器

  clearTimeout(定时器名称);clearInterval(定时器名称);

8. break ,continue ,return 的区别

break ：结束当前的循环体（如 for、while）
continue ：跳出本次循环，继续执行下次循环（如 for、while）
return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

第六章对象、事件

一、对象

创建对象
（1）使用字面量创建对象
（2）使用new Object()创建对象
读取对象
（3）语法：（1）对象.属性名（2）对象[‘属性名’]
修改对象
（4）语法：对象.属性名 = 新属性值
删除对象
（5）语法：delete 对象.属性名

二、事件

https://www.runoob.com/jsref/dom-obj-event.html

第七章String、Math类

学习网址：https://www.runoob.com/jsref/jsref-obj-string.html

一、 String类

1. 什么是字符串类？

String类是字符串类型（String）的封装类，它允许用户使用String类的方法和属性操作初始的字符串类型值（或说：字符串可以直接使用String类中的属性和方法）

2. 创建字符串类

A、直接声明字符串常量【最常用】，格式：
var 字符串变量=“字符串”;//也可以是单引号
//此时的字符串其实就是字符串对象，可以使用String类中的属性和方法
var str = ‘欢迎大家学习Javascript’;
B、使用new关键字实例化字符串对象，格式：
var 字符串对象=new String(字符串);
var str = new String(‘世界灿烂盛大，欢迎回家。’);//实例化String类

3. 字符串对象属性

常用属性：length
功能：该属性用来返回字符串中的数量（也可以获取数组的长度）。
语法：对象名.length

4.字符串对象方法

（1）charAt() ：可返回指定位置的字符。
语法：stringObject.charAt(index)
字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符。
（2）substr() ：可在字符串中抽取从 start 下标开始的指定数目的字符。
语法：stringObject.substr(start,length)
（3）replace() ：用于在字符串中用一些字符替换另一些字符
语法：stringObject.replace(substr,replacement)

二、 Math类

学习网址：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random

1.概述：Math 类用于执行数学任务。

Math类不需要创建，而直接使用。Math类的所有属性和方法都是静态的，只需使用语法“Math.方法名(参数)”或“Math.常量名”来调用即可，不需要实例化。

2.使用，举例：

var pi=Math.PI;//访问属性
console.log(pi)//3.1415926…

3.常用属性：

PI：圆周率 Math.PI

4.常用方法：

abs(x) 返回 x 的绝对值。
ceil(x) 对数进行上舍入。
floor(x) 对 x 进行下舍入。
round(x) 四舍五入。
random() 返回 0 ~ 1 之间的随机数，包含0，不包含1。
sqrt(x) 返回数的平方根。 console.log(Math.sqrt(16))//4

5.随机数的计算的公式：会返回 min（包含）到 max（包含）到数字

Math.floor(Math.random() * (max - min + 1) ) + min

第八章Array数组类、Date日期类

学习网址：https://www.runoob.com/jsref/jsref-obj-array.html
学习网址：https://www.runoob.com/jsref/jsref-obj-date.html

一、Array数组类

1.数组的概念：

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。

2.创建数组的方式

利用 new 创建数组

var 数组名 = new Array();
var arr  = new Array();//创建一个新的空数组
//添加数组元素
arr[0] = '许言午';

利用数组字面量创建数组(中括号)

var arr = [ ];

3.检测是否为数组

instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

4.常用属性

length ：设置或返回数组中元素的数目。

5.Array类—方法

https://www.runoob.com/jsref/jsref-obj-array.html

(1)常用方法

concat() 连接两个或更多的数组，并返回结果。 str1.concat(str2)
isArray() 判断对象是否为数组。 Array.isArray( arr )
join() 把数组的所有元素放入一个字符串。分隔符 arr.join(‘&’)
pop() 删除数组的最后一个元素并返回删除的元素。 arr.pop()
push() 向数组的末尾添加一个或更多元素，并返回新的长度。 arr.push()
reverse() 反转数组的元素顺序。arr.reverse()
shift() 删除并返回数组的第一个元素。
slice() 选取数组的一部分，并返回一个新数组。数组截取slice(开始索引,结束的索引)
sort() 对数组的元素进行排序。
splice() 数组删除splice(开始的索引,要删除的个数) 返回被删除的新数组，会影响原数组。
toString() 把数组转换为字符串，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

举例：从大到小排序(从小到大)：

var arr = [1, 3, 16, 4, 8];arr.sort(function(a, b) {return a - b;//升序//return b - a;//降序})console.log(arr);

举例：随机点名
https://blog.csdn.net/xulihua_75/article/details/124641319

(2)数组索引方法

indexOf() 数组中查找给定元素的第一个索引，存在返回索引号，不存在返回-1
lastIndexOf() 在数组中的最后一个索引，存在返回索引号，不存在返回-1 【倒着找】
举例：
arr.indexOf(‘数组元素名称’)
案例：数组去重

二、Date日期类

https://www.runoob.com/js/js-obj-date.html

1.要调用Date类的方法（注：Date类没有自己的属性），实例化后才能使用。

2. Date()方法的使用

(1) 获取当前时间必须实例化

var nowTime = new Date();
console.log(nowTime);

(2) Date() 构造函数的参数

如果Date()不写参数，就返回系统当前时间
如果Date()里面写参数，就返回括号里面输入的时间
参数能用的写法：
数字型：2019,10，01 或者是字符串类型’2019-10-01 8:8:8’这俩比较常用

toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
输出格式：2022/4/17 16:15:17

（3）目前是`23:0:2`，实现以上效果图的解决方法：进行判断，如果时、分、秒小于10，前面就补位0。

采用方式：三目运算符
表达式？值1：值2；
h = h<10?’0’+h:h;

（4）要求封装一个函数返回当前的时分秒格式00:00:00。

3.获取Date总的毫秒数（时间戳）

注意：不是当前时间的毫秒数，是1970年1月1号到现在过了多少毫秒数。
方法如下：
var date = new Date();
console.log( date.valueOf() );//方法一
console.log( date.getTime() );//方法二
其余写法：
var date1 = +new Date();
console.log(date1);

时间倒计时计算写法如下：

第九章BOM

一、 window属性

1.document属性的用法：

https://www.runoob.com/jsref/dom-obj-document.html
document.title 返回当前文档的标题。
document.URL 返回当前文档的URL
document.write() 页面文本写入

2.history属性的用法：

https://www.runoob.com/jsref/obj-history.html
（1）属性length ：声明了浏览器历史列表中的元素数量。
（2）history对象方法

back() ：可加载历史列表中的前一个 URL（如果存在）。【后退】
语法：history.back()
forward() ：可加载历史列表中的下一个 URL。【前进】
语法：history.forward()
go() ：可加载历史列表中的某个具体的页面。
语法：history.go(number|URL)
比如：history.go(-1) 后退一步，history.go(-2)后退2步，history.go(2)前进2步

二、 window方法

alert()警示框
confirm()确定和取消的对话框确定返回true 取消返回false
prompt()提示用户输入的对话框
setTimeout(函数,毫秒)定时器，执行一次。
setInterval(函数,毫秒)定时器，执行多次。
clearTimeout(定时器名称)取消了先前通过调用setTimeout()建立的定时器
clearInterval(定时器名称)取消了先前通过调用setInterval()建立的定时器
window.open()打开一个新的浏览器窗口
close()关闭浏览器窗口

第十章DOM（获取元素、事件）

一、获取元素

console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法

1. 根据 ID 获取

用法： document.getElementById(‘id’);

2. 根据标签名获取

用法：document.getElementsByTagName(‘标签名’);

3. 通过 HTML5 新增的方法获取

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
document.querySelectorAll(‘选择器’); // 根据指定选择器返回元素对象集合

注意： querySelector 和 querySelectorAll里面的选择器需要加符号
比如:document.querySelector(‘#nav’);

4.特殊元素获取

获取body元素
document.body // 返回body元素对象
获取html元素
document.documentElement // 返回html元素对象

二、执行事件的步骤

（1）获取事件源

（2）注册事件（绑定事件）

（3）添加事件处理程序（采取函数赋值形式）

第十一章DOM操作元素

一、改变元素内容

（1）innerHTML：设置或获取对象及其内容的HTML形式。（解析标签）
（2）innerText：设置或获取对象的纯文本形式。（不解析标签）
（3）value：表单控件中value属性所呈现内容由该属性控制。

二、样式属性操作

innerText、innerHTML 改变元素内容
图片src、超链接href
表单元素的属性： type、value、checked、selected、disabled

三、常用元素的属性操作

1. element.style 行内样式操作举例：修改字体的大小、颜色等

例如：element.style.color= ‘#ff0000’

2. element.className 类名样式操作

例如：element.className = ‘newName’
注意：

JS 里面的样式采取驼峰命名法比如 fontSize、backgroundColor
JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
如果样式修改较多，可以采取操作类名方式更改元素样式。

第十二章节点操作

一、节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以
创建或删除。

二、节点操作

【节点操作主要操作的是元素节点】

1. 获取元素

如果想要第一个子元素节点，可以使用 parentNode.children[0]
如果想要最后一个子元素节点，可以使用 parentNode.children[parentNode.children.length - 1]

2.节点创建

document.createElement(‘tagName’)

3.节点添加

node.appendChild(child)
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。
node.insertBefore(child, 指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。

4.节点删除

node.removeChild(child)
node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。

5.节点复制

node.cloneNode()
node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意：
（1）如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
（2）如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

jQuery学习

参考手册：
https://www.w3school.com.cn/jquery/jquery_intro.asp
https://jquery.cuishifeng.cn/hide.html
http://hemin.cn/jq/bind.html

第一章JQuery核心

一、基础

1. 理念：Write less Do More 写的少，做的多

2. 入口函数,区分跟window.onload加载的区别

$(document).ready(fn)
$(function(){})
jquery的入口函数跟window.onload()区别
执行的时机不同，jQuery的入口，一旦我dom结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成；window.onload 的是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
jQuery入口函数可以书写多次，window.onload只能书写一次；

3. jsDOM对象和jquery对象的转化

（1）将js对象转换成jquery对象

$(js对象)

（2）将jquery对象转化成js对象

$(‘.box’)[0]
大家心里一定要明白jquery是一个库，它是有js封装过来的，所以js是包含jquery的。

4. jquery内部遍历（隐士迭代，自动给我们遍历好，不需要我们自己去遍历。）

5. jquery每次调用完方法之后,会返回一个jQuery对象,所以我们可以使用链式编程。

6.优点：

jQuery具有轻量级、强大的选择器、出色的DOM操作的封装、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、链式操作方式、隐士迭代、行为层与结构层的分离、丰富的插件支持、完善的文档、开源。

二、常用的选择器

（一）jquery的基本选择器

ID选择器（#）
作用：选择id为指定值的第一个元素
类选择器（.）
作用：选择具有指定class类名的所有元素
标签选择器（element）
作用：选择标签名为指定值的所有元素
通配符选择器（*）
作用：选择器所有元素

（二）高级选择器

后代选择器（空格表示）
作用：选择所有的后代元素
子代选择器（>）
作用：选择所有的子代元素
属性选择器
$(input[type=text])

（三）基本过滤选择器

:eq(index)
index是从0开始的一个数字，选择序号为index的元素。选择第一个匹配的元素
$(‘li:eq(1)’)
:gt(index)
选择序号大于index的元素
:lt(index)
选择小于index的元素
:odd
选择所有序号为奇数行的元素
:even
选择所有序号为偶数的元素
:first
选择匹配第一个元素
:last
选择匹配的最后一个元素
（四）筛选方法
find(selector)
查找指定元素的所有后代元素（包括子子孙孙）
$(‘#box’).find(‘p’)
children()
查找指定元素的直接子元素（亲儿子）
siblings()
查找所有兄弟元素（不包括自己）【用它来做选项卡】
parent()
查找父元素（亲的）
eq(index)
查找指定元素的第index元素，index是索引

三、 jquery对象访问

index()方法：查找元素在同辈中位置
【搜索匹配的元素，并返回相应元素的索引值，从0开始计数。】
$(this).index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
这种用法最常见。
如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置。 $(this).index();
如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置。

$('li').index($this);

第二章Jquery事件

1. jQuery事件绑定

.bind(type,[data],fn)

（1）第一个参数是事件类型，常用的click，blur，hover等；第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象；第三个参数是用来绑定的处理函数
（2）多个事件类型可以通过将每个空格分隔开来一次绑定
（3）我们可以通过传递事件类型/处理程序对的对象来同时绑定多个事件处理程序

$( "#foo" ).bind( "click", function() {alert( "User clicked on 'foo.'" );
});
$( "#foo" ).bind( "mouseenter mouseleave", function() {$( this ).toggleClass( "entered" );
});
$( "#foo" ).bind({click: function() {// Do something on click
},
mouseenter: function() {// Do something on mouseenter
}
});

2. 移除事件

用法：.unbind(type,fn)

第一个参数是事件类型
如果不写参数，移除所有的事件
$( “#foo” ).unbind();
第二个参数是将要移除的函数
$( “#foo”).unbind( “click” ，function(){})

3. 鼠标事件

click
鼠标单击触发事件，参数可选（data,fn）
dblclick
双击触发，同上
mousedown()/up()
鼠标按下/弹起触发事件
mousemove()
鼠标移动事件
mouseover()/out()
鼠标移入/移出触发事件
鼠标指针穿过/离开被选元素或者当前元素的子元素，会触发事件
mouseenter()/leave()
鼠标进入/离开触发事件
鼠标指针只在穿过/离开被选元素触发事件
focus()/blur()
鼠标聚焦/失去焦点触发事件（不支持冒泡）
keydown()/up
键盘按键按下/弹起触发

4. 表单事件

change()
表单元素发生改变时触发事件
此事件仅限于元素，框和元素
对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时，会立即触发事件
但对于其他元素类型，事件将延迟到元素失去焦点
select()
文本元素发生改变时触发事件
此事件仅限于input type类型为text和textarea表单元素
submit()
表单元素发生改变时触发事件

第三章JQuery样式操作

一、操作css方法

1. 一组样式：

$(this).css('color', 'red');

2. 多组样式：

$('#txt').css({"background": "black","color": "#fff"
})

二、设置类样式方法

可以操作类样式，注意操作类里面的参数不要加点。（课本225页）

1. 添加类

 $(“div”).addClass(''current'');

2. 移除类

 $(“div”).removeClass(''current'');

3. 切换类

 $(“div”).toggleClass(''current'');

第四章JQuery动画

一、普通动画

1. show()

无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display属性实现的。
show(2000);有参数,通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。
https://jquery.cuishifeng.cn/show.html

2. hide()

跟show()反之

3. toggle(3000,fn)

开关式的显示隐藏动画

二、滑入和滑出，卷帘门效果

1. slideDown()

下拉动画，显示

2. slideUp()

上拉动画，隐藏

3. slideToggle()

开关式切换

三、淡入淡出

1. fadeIn(3000,callback)

让元素以淡淡的进入视线的方式展示出来

2. fadeOut(3000,callback)

让元素以渐渐消失的方式隐藏起来

3. fadeToggle(3000,callback)

通过改变透明度，切换匹配元素的显示或隐藏状态

4. fadeTo(时间,透明度)

将被选元素的不透明度逐渐地改变为指定的值

四、自定义动画animate

语法： $(selector).animate({params}, speed, callback);
第一个参数表示：要执行动画的css属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，立即执行的回调函数（可选）

五、停止动画

语法：$(selector).stop(true, false); 默认是(false,false)
记得：玩动画要先停止动画再开启动画

第五章html值的操作

1. html()

返回或设置被选元素的内容 (inner HTML)，对文本和标签进行渲染
如果有参数表示设置值，如果没有参数表示获取值，下面方法一样效果

2. text()

方法设置或返回被选元素的文本内容。innerText实现，只对文本进行渲染

3. val()

方法返回或设置被选元素的值（适合表单）

第六章

jQuery 遍历 - is() 方法 (w3school.com.cn)

1. is()

作用：is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。
通俗理解：判断里面的条件，满足返回true，不满足返回false。
例如：is(‘:visible’)判断是否是可见的，如果可见返回true,否则返回false。
jQuery prop() 方法 | 菜鸟教程 (runoob.com)

2. html对象属性操作

（1）prop()

该方法设置或返回被选元素的属性和值。【但凡是自带的属性均可用这个获取,倾向于处理系统自带的。】
返回属性的值：
$(selector).prop('参数1 ')
设置属性和值：
$(selector).prop(‘参数1’,‘参数2’)

（2）attr()

作用：该方法设置或返回被选元素的属性和值。
返回属性的值：
$(selector).attr(attribute)；
设置属性和值：
$(selector).attr(attribute,value)；

（3）两者的区别如下：

https://www.w3cschool.cn/article/56197750.html

3. 获取指定元素的字体大小

$('div').css('font-size')
原有基础增加2px
$('div').css('font-size','+=2')

4. not()

作用：从匹配的元素集合中移除指定的元素。

$('li').not(this)

第七章DOM操作

1. 创建节点

var $li = $('<li>你好</li>');
var $div = $('<div>你好</div>');

2.插入

（1）内部插入，后面

父.append(子)
子.appendTo(父)
####（2）内部插入，前面
父.prepend(子)
子.prependTo(‘’)
####（3）外部插入，后面
兄弟.after(要插入的兄弟)
要插入的兄弟.inserAfter(兄弟)
####（4）外部插入，前面
before（）
inserBefore（）

3.删除操作

remove（）
删除节点后，事件也会删除，自杀。
detach（）
删除节点后，事件会保留
empty
清空选中元素中的所有的子元素

第八章方法讲解（课本221页）

1. children（）：获取亲儿子

2. next():获取匹配元素的下一个兄弟元素

3. prev():获取匹配元素的上一个兄弟元素

4. siblings()：获取所有的兄弟元素

5. parent()与parents()区别：

parent（）获取当前匹配元素的父元素（亲的）
parents()获取当前匹配元素的祖先元素，参数可填写指定的元素选择器。

6. each()方法遍历循环

https://www.w3school.com.cn/jquery/traversing_each.asp

第九章ajax技术实现前后端分离

https://www.w3school.com.cn/jquery/ajax_ajax.asp

<script>$.ajax({url: "https://api.eduapi.cn/api/test/books/index",//这里放的是接口地址，这个地址能用。success: function(res) {console.log(res);//获取成功之后返回的数据，我们之后对res里面的数据进行处理}});
</script>

js、jq知识点文档相关推荐

Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件基础组件在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
Ext JS 6学习文档-第6章-高级组件
Ext JS 6学习文档-第6章-高级组件高级组件本章涵盖了高级组件,比如 tree 和 data view.它将为读者呈现一个示例项目为图片浏览器,它使用 tree 和 data view 组 ...
如何查看jsplumb.js的API文档(YUIdoc的基本使用)#华为云·寻找黑马程序员#
[摘要] 介绍前端文档工具YUIdoc 示例代码托管在:http://www.github.com/dashnowords/blogs 一.问题描述最近向一些同事推荐了网页中实现流程图绘制的工具库j ...
Sencha Cmd 6 和 Ext JS 6 指南文档（部分官方文档中文翻译）
近期组织了几个程序员网友,正在翻译一部分官方的Sencha Cmd 6 和 Ext JS 6 指南文档. 眼下还没翻译完,大家能够先看看 Sencha Cmd 6 和 Ext JS 6 指南文档 ( ...
Dva.js 入门级教学文档-1
Dva.js 入门级教学文档-1 简介一.介绍 1.什么是 dva 2.dva 的作用是什么二.环境搭建和使用 1.环境搭建 2.创建项目 3.使用 antd 三.全局架构 1.index.js( ...
是的你没看错，js生成word文档
用js生成word文档查看Demo 你可以生成一份 word 文档,在此文档中可以添加多种元素并设置多种属性. 可添加的元素段落超链接标题表格列表图片可设置的属性 font:字体,比如 ...
浅谈Word.Application，关于js操作word文档的使用
这篇文章只是说个人放个笔记在这里,并没有讲解的意思,但为了进来的朋友能知道我在说啥,写的过程中我还是简单介绍一下. 官网地址:https://docs.microsoft.com/zh-cn/offi ...
使用jquery.wordexport.js导出word文档设置行间距不生效问题
在使用jquery.wordexport.js导出word文档时在js里设置的style margin-top不生效生成的doc还是没有行间距一通百度后发现没用解决方法后来发现有位 ...
js导出word文档可以兼容IE8+浏览器适配其他浏览器
js导出word文档,兼容IE8浏览器其他浏览器需要引入两个文件:FileSaver.js 和 jqueryWordExport.js 需要兼容IE8浏览器需要引用:FileSaver.js exc ...

js、jq知识点文档

JavaScript知识点

第一章JavaScript概述

1.了解JavaScript的作用

2.了解JavaScript的特点

3.掌握Javascript的组成

4.掌握在页面引入JavaScript的方式

5.常用的输入输出语句

6.注释

第二章变量、基本语法、数据类型

一、 变量

1. 变量是什么？

2. 变量的本质是什么?

3. 变量的使用

4. 变量的命名规范：

二、 基本语法

1. 区分小写

2. 标识符的命名规则（变量、函数、属性、函数）

3. JavaScript中语句以一个;结尾（英文分号）。

三、 数据类型

1. 基本数据类型

（1） 数值类型number

（2） 布尔类型boolean

（3） 字符串类型string

（4） undefined类型undefined

（5） null类型null

2. 复合数据类型

3. 方法

4. length:该属性返回字符串的长度。（重要）

5. isNaN 判断变量是否为非数字的类型 非数字true 数字false

6. JS可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)，禁止不配套使用。

7. 注意字符串拼接。

8. js隐式转换(- * /) 减号、乘号、除号

第三章运算符

一、运算符

算数运算符

赋值运算符

关系（比较）运算符

字符串运算符

逻辑运算符

三目运算符（条件运算符）

二、解释

第四章流程控制

一、分支结构

1.if语句

2.switch语句

3.switch 语句和 if else if 语句的区别

二、循环结构

1. while( ){ }

2. do{ }while( )

3. for循环

4. 双重for循环：

三、关键字

1. continue 关键字

2. break关键字

第五章函数

1. 函数的概念

2. 函数的使用

3. 函数的参数

4. 函数的返回值

5. 函数内调用函数

6. 函数的两种声明方式

（1）函数关键字 function 自定义函数方式

（2）匿名函数

7. 定时器函数

（1）延迟数秒执行（执行一次就停止）

（2）间隔数秒持续执行（一直执行）

（3）清除定时器

8. break ,continue ,return 的区别

第六章对象、事件

一、对象

二、事件

第七章String、Math类

一、 String类

1. 什么是字符串类？

2. 创建字符串类

3. 字符串对象 属性

4.字符串对象 方法

二、 Math类

1.概述：Math 类用于执行数学任务。

一、变量

二、基本语法

三、数据类型

（1）数值类型number

（2）布尔类型boolean

（3）字符串类型string

5. isNaN 判断变量是否为非数字的类型非数字true 数字false

3. 字符串对象属性

4.字符串对象方法

（3）目前是`23:0:2`，实现以上效果图的解决方法：进行判断，如果时、分、秒小于10，前面就补位0。

（4）要求封装一个函数返回当前的时分秒格式00:00:00。

一、改变元素内容

二、样式属性操作

三、常用元素的属性操作

1. element.style 行内样式操作举例：修改字体的大小、颜色等

一、节点概述

二、节点操作