前端阶段整体的个人总结

2024-01-18 02:05:08 阅读 0

参考类型

比如对象、数组、函数等都是引用类型

定义变量

var/let 变量名;
var name;
var age;
let sex;

标识符命名规则变量的初始化

var name;
name="Tom";
var age=22;
//可以不用var定义，但不建议
sex="男";
console.log("name"+name+"age"+age+"sex"+sex);

操作员

JS 中的类型可以是 true 或 false，也可以用非零数字来表示 true。默认用1表示，false用0表示。

所以你可以使用true或false作为数字来进行操作。

条件语句 if 语句

js中if语句的条件可以是一个值，也可以是一个数字（0表示假，非0表示真）

//单分支
if(){
}
//双分支
if(){
}else{
}
//多分支
if(){
}else if(){
}
//嵌套
if(){
    if(){}
}

在多分支if语句中，如果满足一个条件，则不再判断后续条件，将范围最小的情况写到前面。

陈述

//可以是任意类型
var op;
switch(op){
    case "":
        break;
    case 123:
        break;
    case true:
        break;
    default:
}

与Java不同的是，括号内的数据类型没有限制，不同case后可以写不同类型的数据。

如果没有break，则后续case后面的内容会继续执行，直到break或者没有代码。如果不满足任何情况，则执行

循环 while 循环

while(循环条件){
    循环体;
}

先判断，后执行。它甚至可能不会被执行一次。

do-while 循环

do{
    循环体;
}while(循环条件);

先执行一次，然后判断。至少执行一次。

for循环

for(定义循环变量;循环条件;更新循环变量){
    循环体;
}

并打破

停止本次循环，执行下一个循环。

break 停止所有循环。

JS 中的本地对象

数组数组

JS 中的数组与 Java 中的数组类似，

可以保存不同类型的数据，数组大小可变。

定义数组

var 数组名 = new Array();
var 数组名 = [];

数组使用

//定义数组
// 1.默认没有给某个位置赋值时，是undefined
// 2.最大下标决定了数组长度   
// 3.可以保存不同类型的数据
var list1 = new Array();
list1[0] = 123;
list1[3] = "hello";
list1[10] = true;
console.log(list1[3]);

数组遍历

// length属性可以获取数组长度
// 循环所有下标，没有赋值元素的输出undefined
for (var i = 0; i < list1.length; i++) {
    console.log(list1[i]);
}
// 增强for循环，获取保存了数据的下标
for(var index in list1){
    // 通过下标获取元素
    console.log(list1[index]);
}

数组初始化

var 数组名 = new Array(元素1,元素2...);
var 数组名 = [元素1,元素2...];

常用方法、方法名、函数、返回值

种类（）

按升序对数组中的元素进行排序

排序数组

()

以相反的顺序保存数组中的元素

数组逆序排列

流行音乐（）

从数组中删除最后一个元素

删除的元素

推（元素）

将元素添加到数组末尾

最新数组长度

填充（元素）

用指定元素填充数组

填充数组

（指数）

从指定索引开始分割数组。调用该方法后，该数组是剩余元素的数组。

截获元素的集合

（指数，）

截取从指定索引开始的指定长度的数组。调用该方法后，该数组是剩余元素的数组。

截获元素的集合

上述方法调用后，都会影响原数组。

方法名函数返回值

（元素）

获取元素第一次出现的索引

指数

（元素）

获取元素最后一次出现的索引

指数

（元素）

将指定元素添加到元素数组的末尾

添加元素后的数组

加入（字符）

使用指定符号将数组元素连接成字符串

连接字符串

切片（开始，结束）

截取指定[start,end)区间内的元素

截取后的数组

切片（索引）

截取从index开始到末尾的元素

截取后的数组

地图（方法名称）

让数组中的所有元素执行指定的方法

执行该方法后的新数组

以上方法调用后都不会影响原数组。

Date Date 创建日期对象

var now = new Date();

常用方法

// 获取当前日期时间
var now = new Date();
// 年
document.write(now.getFullYear()+"
");
// 0-11表示1-12月
document.write(now.getMonth()+"
");
// 日期
document.write(now.getDate()+"
");
// 一周中的第几天 0-6表示周天到周六
document.write(now.getDay()+"
");
document.write(now.getHours()+"
");
document.write(now.getMinutes()+"
");
document.write(now.getSeconds()+"
");
// 获取从1970/1/1起经过的毫秒数
document.write(now.getTime()+"
");
//以上方法都有对应的set方法用于设置指定值
// 获取日期时间字符串
document.write(now.toString()+"
");
// 获取日期部分字符串
document.write(now.toDateString()+"
");
// 获取时间部分字符串
document.write(now.toTimeString()+"
");
// 以当前环境输出日期时间字符串
document.write(now.toLocaleString()+"
");
// 以当前环境输出日期字符串
document.write(now.toLocaleDateString()+"
");
// 以当前环境输出时间字符串
document.write(now.toLocaleTimeString()+"
");

细绳

在JS中，字符串实际上是一个字符数组。字符串对象有属性

常用方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        var str="abcABC";
        //length字符串长度
        console.log(str.length);
        var LowerStr=str.toLowerCase();
        console.log(LowerStr);
        var blank="      abc     ";
        //去掉字符串左右空格
        var newblank=blank.trim();
        console.log(newblank);
        var str2="123456,1789";
        //返回字符串指定下标的字符
        console.log(str2.charAt(5));
        //返回指定字符(字符串)在字符串第一次出现的下标，从0开始，-1就是没找到
        var index=str2.indexOf(",");
        console.log(index);
        //返回指定字符(字符串)在原字符串中最后一次出现的下标
        console.log(str2.lastIndexOf("1"));
        //截取用逗号分割的两个电话号码
        var phoneNumber="17723010073,17783680377";
        //substring截取指定位置开始(包含)，到指定位置结束(不包含)的子字符串
        var phone1=phoneNumber.substring(0,phoneNumber.indexOf(","));
        var phone2=phoneNumber.substring(phoneNumber.indexOf(",")+1,phoneNumber.length);
        console.log(phone1);
        console.log(phone2);
        //substr截取从指定位置开始(包含)，指定长度的子字符串，如果长度超过了字符串的长度，也不会报错，只截取到字符串结束
        var testphone=phoneNumber.substr(phoneNumber.indexOf(",")+1,11);
        console.log(testphone);
        //按指定字符(字符串)拆分字符串为数组，
        var test=phoneNumber.split(",");
        console.log(test[0]);
        console.log(test[1]);
        var chars="abcdefg";
        //用空字符串拆分，实际是按字符拆分
        var arrChar=chars.split("");
        console.log(arrChar[4]);
        //拼接字符串
        var stra="xxx";
        var strb="你好";
        var newstr=stra.concat(strb);
        console.log(newstr);
        var strc="a d min";
        //用新字符(字符串)替换掉第一个旧字符
        console.log(strc.replace(" ",""));
        //把原字符串出现的所有旧字符串全部替换
        console.log(strc.replaceAll(" ",""));
    </script>
</body>
</html>

正则表达式

参考网站：参考手册

正则表达式是一种字符串匹配的工具（指定字符串的格式，例如长度、允许的字符...），一般用于验证表单输入数据。

两种定义方法：var reg1=new(“hqyj”);

var reg2=/hqyj/;

使用测试方法来验证字符串。如果字符串与正则表达式匹配，则返回 true，否则返回 false。

reg2.test("hqyj");

<script>
        //正则表达式定义
        var reg1=new RegExp("hqyj");
        var reg2=/hqyj/;
        //正则表达式用于校验(匹配)字符串,返回结果为true，说明字符串符合正则表达式格式要求，否则返回false
        var result=reg1.test("hqyj");
        result=reg2.test("hqyj");
        console.log(result);
        result=reg2.test("javascript");
        console.log(result);
        //匹配数字
        var reg3=/[0-9]/;
        console.log(reg3.test("10000"));
        //只要有数字，就算匹配成功
        console.log(reg3.test("100a00"));//true
        //^以什么开头，$以什么结束。整个字符串都要是数字
        reg3=/^[0-9]$/;
        console.log(reg3.test("100a00"));//false
        //等效于[0-9]，都是匹配数字
        reg3=/\d/;
        //匹配字母
        var reg4=/[a-z]/;//匹配小写字母
        console.log(reg4.test("1abcbc"));
        reg4=/^[a-z]$/;
        console.log(reg4.test("4ssss"));
        reg4=/[A-Z]/;//匹配大写字母
        reg4=/[A-z]/;//匹配所有字母
        //\w等效于[A-z]
        reg4=/\w/;
        //匹配部分数字或字符
        var reg5=/[135]/;
        console.log(reg5.test("1"));
        reg5=/[xyz]/;
        console.log(reg5.test("xyzz22"));
        //匹配次数(量词)
        var reg6=/[8]*/;//*代表可以出现0次或多次
        console.log(reg6.test("8"));//true
        console.log(reg6.test("888888888"));//true
        console.log(reg6.test(""));//true
        reg6=/[8]+/;//+代表前面的字符至少出现1次或多次
        console.log(reg6.test("8"));//true
        console.log(reg6.test("88888"));//true
        console.log(reg6.test(""));//false
        reg6=/[8]?/;//?代表0或1次
        console.log(reg6.test("8"));//true
        console.log(reg6.test(""));//true
        console.log(reg6.test("88"));//true
        reg6=/[8]{6}/;//{}大括号里面一个数字指定固定次数
        console.log(reg6.test("888888"));//true
        console.log(reg6.test("88888"));//false
        console.log(reg6.test("88888888"));//true
        reg6=/[8]{3,5}/;//大括号两个数字，用逗号分割，表示数字出现字数范围
        console.log(reg6.test("888"));//true
        console.log(reg6.test("8888"));//true
        console.log(reg6.test("88888"));//true
        console.log(reg6.test("88"));//false
        console.log(reg6.test("888888"));//true
        reg6=/[8]{2,}/;//大括号后面的一个数字省略，代表2到无限次
        console.log(reg6.test("88"));//true
        console.log(reg6.test("888888888888"));//true
        console.log(reg6.test("8"));//false
        //例子：QQ号码的正则表达式
        //全是数字，最少5位，最多10位，第一位不能为0(只能是1到9)
        var regqq=/^[1-9]{1}\d{4,9}$/;
        console.log(regqq.test("1818148"));//true
        console.log(regqq.test("1818"));//false
        console.log(regqq.test("011818"));//false
        console.log(regqq.test("17723010073"));//false
        //小括号括起来，中间有|分割，这种表示或者(多选一)
        var reg7=/^(130|177|151|189)/;
        console.log(reg7.test("17723010073"));
        console.log(reg7.test("1177"));//false
        var rgephone=/^(150|130|155|177){1}\d{8}$/;
        console.log(reg7.test("17723010073"));//true
        console.log(reg7.test("130"));//true
        //其他元字符
        //除了换行和结束符之外的其他字符(数字、字母、符号)
        //\s 空格
        //\n 换行符
        //\r 回车
        //\t 制表符
        //\ 转义符
        var reg8=/hqyj/i;//正则表达式后面的i，表示忽略大小写
        console.log(reg8.test("hqyj"));//true
        console.log(reg8.test("HQYJ"));//true
        reg8=/ba/g;//正则表达式后面的g，表示全局匹配
        console.log(reg8.test("baxyba"));//true
        console.log(reg8.test("baxyba"));//false
        //字符串的replace方法使用正则表达式
        //去掉字符串中连续的两位数字
        var str="abcd45lhl89jkl";
        var reg9=/\d{2}/g;//替换字符串中所有的两位数字
        console.log(str.replace(reg9,""));
    </script>

数学

<script type="text/javascript">
        //floor 向下取整（返回整数部分）
        console.log(Math.floor(3.94)); //3
        //ceil 向上取整(返回整数+1)
        console.log(Math.ceil(3.1));//4
        //round 四舍五入
        console.log(Math.round(3.14));//3
        //abs 取绝对值
        console.log(Math.abs(-10));//10
        //开平方
        console.log(Math.sqrt(9));//3
        //幂运算，3的2次方
        console.log(Math.pow(3,2));
        //random 返回0到1的随机数[0,1)
        console.log(Math.random());
        //0-9的随机数
        console.log(Math.floor(Math.random()*10));
        //5到10(包含)的随机数
        console.log(Math.floor(Math.random()*(10-5)+5));
    </script>

功能

一段可以执行特定功能并且可以重复使用的代码

匿名函数

没有名字的函数

标签.事件=function(){
}

自定义功能

    <script>
        fun1();//函数调用
        function fun1(){
            console.log("fun1 被调用");
        }
        //有参数。无返回值
        function fun2(name){
            console.log("你好" + name);
        }
        fun2("ABC");
        fun2();//js函数调用可以传参数也可以不传，不会报错
        function fun3(a,b){
            return a+b;
        }
        var sum=fun3(1,2);
        console.log(sum);
    </script>

js默认全局函数

//js自带的全局函数
//字符串转整数
console.log(parseInt("85"));
console.log(parseInt("abc")); //返回结果为NaN （not a number）
console.log(parseInt("99abc"));//99, 数字开头的字符串能把前面的数字转为整数，后面部分的字
符自动丢弃
// 字符串转小数
console.log(parseFloat("3.14"));
console.log(parseFloat("a.14"));// NaN
console.log(isNaN(parseFloat("a.14")));// true, 说明字符不是数字，转换失败
console.log(parseFloat("3.1515927").toFixed(2));//toFixed()对小数保留小数的位数
console.log(parseFloat("3.14xyz"));//3.14
// eval, 把字符串中能执行的内容当语句执行
console.log(eval("3 + 2")); //5

物料清单

模型

浏览器对象模型

可以通过JS获取浏览器信息和浏览器行为

弹出对象

用于获取屏幕相关信息

属性功能

[。]。宽度

获取当前屏幕设置的宽度

[.]。

获取当前屏幕设置的高度

[.]。

获取当前屏幕除任务栏外的宽度

[.]。

获取当前屏幕不包括任务栏的高度

目的

用于设置或获取您在地址栏中的相关信息

常用属性和方法

[.].href

获取或设置当前浏览器地址

[。]。（“地址”）

设置当前浏览器地址并可返回

[。]。（“地址”）

设置当前浏览器地址且无法返回

[.].()

重新加载当前页面

对象方法函数

[.].back()/go(-1)

回去

[.].()/去(1)

前进

DOM

模型

文档对象模型

标签元素节点==DOM对象

获取节点获取节点方法功能

.("某个标签的ID名称")

根据id名称获取页面中唯一的节点。返回获取到的节点对象。

.me("部分标签的类名")

根据类名获取页面中所有对应的节点。返回检索到的节点数组。

。（“标签名”）

根据标签名获取页面中所有对应的节点。返回获取到的节点数组

.("标签的名称属性值")

根据标签的name属性值获取所有对应的节点。返回获取到的节点数组

获取/设置节点文本

读取或设置节点的内容。（双标签中的内容），无论设置什么，都会按原样显示。

读取或设置节点的内容。（双标签内的内容），如果设置的内容有HTML元素，则为HTML元素

获取/设置节点属性的公共属性函数

节点源代码

获取或设置资源路径，如img的src

节点值

获取或设置节点的value属性，例如表单元素的value属性

节点。

获取或设置单选按钮和复选框的选定状态

节点。

获取或设置标签的类属性值

节点.href

获取或设置标签的href属性值，例如a的href

修改节点样式修改单个样式

节点.style.style =“值”;

这里样式名称需要使用驼峰命名法，比如-color，应该写成

修改多种样式

Node.style.="样式名称:值;样式名称:值;"

只有这样设置的样式才能通过node.style.style获取到。

创建添加删除节点创建节点

document.creatElement("标签名");
document.creatElement("div");

此时创建的节点处于“空闲状态”，需要添加到其他节点后才能使用。

添加子节点

//父节点.appChild(子节点);
var md=document.creatElement("div");
document.body.appChild(md);

删除子节点

//父节点.removeChile("子节点");
var md=document.getElementById("md");
document.body.removeChild(md);

事件

某个节点的某种行为。

向节点添加事件

<script>
节点.事件=function(){
    //触发事件时执行的内容
}
</script>

<button onclick="函数(实参)">
按钮
</button>
<script>
    function(){
    //xxx
}
</script>

常用事件常用事件函数

鼠标点击

鼠标双击

文本框焦点

文本框失去焦点

鼠标移入

鼠标移出

鼠标移动

鼠标滚轮滚动

鼠标按下/释放

表单提交

改变

事件对象

通过在函数中传入一个参数，通常是e或者event，就可以监听对应的事件。

如果在相关事件中添加事件参数，就可以监控鼠标状态。

通过在onkey相关事件中添加参数事件，可以监控键盘状态等。

节点.事件=function(){
}

事件对象的常用属性和方法

事件。

获取当前鼠标水平位置

事件。

获取当前鼠标垂直位置

事件。（）;

阻止默认事件

事件。（）;

防止事件冒泡

事件冒泡

如果文档中存在重叠的元素，并且这些重叠的节点具有相同的事件

默认情况下，当子节点触发事件时，父节点也会触发事件。这种情况称为事件冒泡。

经过。（）

表单相关表单提交

不要使用提交按钮的点击事件，使用表单的事件

获取表格

//使用常用的id、class、标签名、name属性名，通过document.getElementXXX方式获取
//还可以使用document.form获取当前页面中表单的数组
document.forms[0].onsubmit=function(){
}

阻止表单提交

//在表单的提交事件中使用return false阻止表单提交

输入框

文本框文字、密码框、文本域都是输入框

获取输入框中输入的内容

//var 变量=节点.value;
var username=document.getElementByName("username")[0].value;

设置输入框的内容

//节点.value=值;
document.getElementByName("username").value="xxx";

判断单选按钮是否被选中

节点.checked结果为true表示选中

获取单选按钮对应的值

例如，获取选择的性别时，可以将性别变量值设置为男性，则默认选择男性，然后判断是否选择女性选项。如果选择，请将性别变量值更改为女性。

复选框判断是否被选中

//节点.checked结果为true表示选中

全选

单击全选时，将所有复选框的选中状态设置为全选按钮的选中状态

反选

单击“反转选择”时，将所有复选框的选定状态设置为其相反的选定状态。

获取复选框的选定值

复选框与单选按钮相同。您需要自己设置该值。

通常会定义一个数组来存储最终选择的每个选项的值。

通过遍历所有复选框，确定其状态，如果选中，则将其值添加到数组中。

下拉菜单获取选定值

下拉列表可以通过value属性获取选中的值。如果没有设置value，则获取标签中的文字。如果有value属性，则获取实际值

动态添加选项

可以使用 .("") 方法创建，然后使用 .("") 方法添加。建议使用 new(value) 方法创建，然后使用 add() 添加到其中。

它是一个轻量级的函数库，封装了很多内容。本质依然是

影响

目的是：“write less，do more”，即写更少的代码，做更多的事情

使用

** 1.下载.js文件**

** 2. 将.js文件导入页面**

<script src="jquery.js文件路径"></script>

3.在页面中再写一个标签，并写上更改前的代码

<script src="jquery.js文件路径"></script>
<script>
    //文档就绪函数
    jQuery()//$(function(){
})
</script>

对象和js对象（dom对象）

在js中，使用, 获取dom对象

DOM对象只能使用style和等属性来修改样式或内容

在中，使用选择器来获取对象。

对象只能使用 .

通常在命名对象时，使用$符号作为前缀，以方便区分对象和DOM对象。

对象转换为 dom 对象 dom 对象转换为

$（dom对象）

$符号冲突问题

页面中引入.js后，$符号就相当于“”一词，有特殊的含义。

如果一个页面中引入了多个js函数库，并且这些函数库都使用了$符号，就会出现符号冲突。

提供了()函数来释放$的使用权

//直接调用该方法，释放对$的使用权，之后只能使用默认的"jquery"
$.noCoflict();
//$("#md")这时会无效
//调用该方法，使用变量接收，释放对$的使用权，用指定的变量名代替$
var jq=$.noConflict();
jq("#md");

基本选择器中的选择器基本选择器

$("#")

id选择器，根据id名称获取元素

$(".类名")

类选择器，根据类名获取某些节点

$("标签名称")

元素选择器，根据标签名称获取某些节点

$("#id 名称, .class 名称, 标签名称")

分组选择器，根据指定的选择器获取所有满足的节点

$("a.测试")

获取类名test的a标签

$(“a#测试”)

获取id名为test的a标签

$(“*”)

获取所有节点

分层选择器的分层选择器功能

$("#")

获取id为test的节点中的所有子节点

$("#")

获取测试节点中id为的所有div子节点

$(“#测试>*”)

获取测试节点中id为第一级的所有子节点

$(“#test>.class”)

获取ID为test的节点中class为test的一级子节点。

$(“#test+p”)

获取紧随 id 的测试节点之后的第一个 p 节点

$("#test~p")

获取id名为test节点后的同级p节点

注意

过滤器选择器普通过滤器普通过滤器

$("tr:奇数")

奇数索引。获取索引为 1,3,5... 的 tr 标签，偶数按自然顺序排列

$("tr:偶数")

偶数索引。获取索引为 0,2,4… 的 tr 标签，奇数按自然顺序排列

$("tr:第一个")

获取所有tr标签中的第一个

$("tr:eq(索引)")

获取指定索引处的tr

$("tr:lt(索引)")

获取小于指定索引的tr

$("tr:gt(索引)")

获取大于指定索引的tr

$(“li:第n个孩子(3n+1)”)

获取指定函数的子节点

$("li:第一个孩子()")

获取 li 的第一个 li 为子节点

$("li:最后一个孩子()")

获取li的最后一个li为子节点

$("#test p:not(#md)")

获取id为test的p标签，除了id为md的p标签

$("#test p:not(:eq(0)")

获取id为test的p标签（索引为0除外）

表单元素过滤器表单元素过滤器

$(“:输入”)

获取所有表单元素，包括输入，，

$(“:文本”)

获取文本框

$(“:”)

获取密码框

$(“:收音机”)

获取表单按钮

$(“:”)

获取复选框

$(“:输入”)

获取选中的表单元素，包括radio,,

$(“::”)

获取选中的复选框

$(“:”)

获取选中的下拉菜单选项

$(“:重置”)

属性过滤器选择器属性过滤器

$("a[href]")

获取所有包含href属性的a标签

$(“a:not([href])”)

获取所有不包含href属性的a标签

$("div[属性=值]")

获取具有指定属性和值的指定标签

$("div[属性！=值]")

获取属性不等于指定值的指定标签

$("div[属性^=值]")

获取以指定值开头的指定属性的指定标签

(“div[属性=值]”)

获取以指定值结尾的指定属性的指定标签

$("div[属性*=值]")

获取包含指定值的指定属性的指定标签

$("div[属性1=值][属性2=值]")

获取同时包含具有指定值的属性 1 和具有指定值的属性 2 的 div

内容过滤器选择器内容过滤器选择器

$("p:(文本)")

获取带有指定文本的p标签

$("p: not(:(文本))")

获取不带指定文本的p标签

$("p:空")

获取不带文本的 p 标签

操作节点获取、设置节点内容函数

节点.text()

获取节点中的文本，相当于js中

节点.text(“内容”)

设置节点中的文本。相当于js中的x.=""

节点.html()

获取节点的内容。相当于 var text=x。在js中；

节点.html(“内容”)

设置节点中的内容，相当于js中的x.=""

节点.val()

获取节点中的值属性。相当于js中的var val=x.value

节点.val(“内容”)

设置节点中的 value 属性。相当于js中的x.value=""；

获取和设置节点样式函数名称

Node.css("样式名称")

获取节点的某个样式值

Node.css("样式名称","值")

设置节点的某种样式

node.css("样式名称":"值").css("样式名称":"值")

同时设置多种样式

Node.css({"样式名称": "值", "样式名称": "值"...})

同时设置多种样式

获取和设置节点属性函数名称函数

Node.attr("属性名称")

获取属性的值

Node.attr("属性名称","值")

设置属性的值

Node.("属性名称")

删除指定属性

Node.("类名")

向节点添加类值

Node.("类名")

从节点中删除类值

Node.("类名")

添加或删除类值，如果不存在则添加，如果存在则删除

Node.("类名")

判断某个类值是否存在并返回类型

创建节点

//js写法
document.creatElement("h1");
h1.innerText="创建出的h1";
//jquery写法
var $h1=$("创建出的h1
");
//以上两种方式创建出的节点都是处于游离状态，需要添加到已有的某个节点上

添加节点添加子节点

父节点。（子节点）

将子节点添加到父节点的末尾

子节点。（父节点）

将子节点添加到父节点的末尾

父节点。（子节点）

将子节点添加到父节点的前面

子节点。（父节点）

将子节点添加到父节点的前面

添加兄弟节点

原始节点。（新节点）

在原节点之前添加新节点

原始节点。（新节点）

在原节点之前添加新节点

原节点.after(新节点)

在原节点后添加新节点

原始节点。（新节点）

在原节点后添加新节点

删除节点删除节点

某个节点。()

删除一个节点

一个node.empty()

删除节点的子节点

复制节点复制节点

一个node.clone()

复制节点，不复制节点事件

一个node.clone(true)

复制节点，复制节点事件

修改节点替换节点

旧节点。（新节点）

用新节点替换旧节点

新节点。（新节点）

用新节点替换旧节点

包裹节点

原始node.wrap（指定节点）

使用指定的节点来包裹原来的节点。如果原节点是一个集合，则将其一一包裹起来。

原始节点。（指定节点）

使用指定的节点来包裹原来的节点。如果原始节点是一个集合，它将被一个节点完全包裹起来。

父节点。（指定节点）

使用指定节点将所有子节点包裹在父节点中

通过node获取节点函数名

某个node.next()

获取某个节点的下一个节点

某个node.prev()

获取某个节点的前一个节点

某个节点。（参数）

获取某个节点或指定节点之后的所有节点。参数为一串标签名，如("a")表示获取所有后续a标签。无参数表示获取某个节点之后的所有节点

某个节点。（参数）

获取某个节点之前的所有节点。

某个节点。（参数）

获取某个节点或指定节点同级的所有节点

父节点。（参数）

获取父节点的所有或指定子节点

节点集合.first()

获取节点集合中的第一个子节点

节点集合.last()

获取节点集中最后一个子节点

子节点.()

获取节点的父节点

一个node.index()

获取节点所在集合的索引

默认动画函数名称

一个node.show()

同时将宽度和高度从0更改为原始值，:block

某个node.hide()

还将宽度和高度从原始值更改为 0 最后：none

某个节点。()

切换显示/隐藏状态

()

将不透明度从 0 更改为 1，淡入，最后：块

()

将不透明度从 1 更改为 0，淡出，最后：无

()

切换/状态

()

将高度从原始值更改为 0，最终：无

()

将高度从 0 更改为原始值，最后： block

()

转变/

上述所有函数都可以被赋予两个参数。 Node.(时间单位毫秒，回调函数)。例如node.(2000,(){})表示动画结束后执行函数中的内容。

自定义动画启用自定义动画停止动画停止当前动画

节点.stop()

停止所有动画

节点.stop(true)

事件

dom节点.on事件=function(){
}
document.getElementById("md").onclick=function(){
}

//jquery节点.事件(function(){})
$("#md").click(function(){
})
或
jquery节点.bind("事件名",function(){
})

事件函数功能

点击（）

点击

徘徊（）

鼠标悬停/离开。该事件可以传入两个函数，即悬停时触发一个函数，离开时触发第二个函数。如果只有一个函数，则悬停或离开时都会触发该函数。

重点（）

获得焦点

模糊（）

失去焦点

()

变化。适用于各种可以变化的节点，如文本框、单选框、复选框、下拉框等。

/下/上/移动/进入/离开/退出()

鼠标相关

()

表单提交

……

js中把事件名去掉on，变成函数

前端框架

设计者将框架的css文件和js文件提供给用户

用户只需要导入css文件和js文件，然后通过对应的class值呈现对应的样式和效果。

任何前端框架都有对应的开发文档API，参考其使用说明即可。

推出的一套前端框架

使用

1.下载核心文件

官方网站

2.将解压后的整个文件夹复制到项目中

3.新建一个页面，介绍3种文化

引入js的时候一定要先引入再引入，因为它依赖于

拉尤

一个基于的前端框架

官网已下架，但Layui仍然可以使用

您现在看到的网站都是镜像网站

镜像网站：

使用

1.下载Layui核心文件

2.解压并导入项目

3.页面添加2个文件

JSON

JS对象简单表示法

它是一种数据交换格式，可以理解为一种保存和交换数据的格式。

JSON数据通常以键值对的形式保存。

key的类型是，value的类型可以是普通类型、对象或者数组。

值的数据类型数据类型符号值的示例

细绳

””

“姓名”：””

数值

直接写数字

“年龄”：20

逻辑值

真假

““：错误的

无效的

“汽车”：空

目的

{}

"宠物":{"":"dian","":2}

大批

[]

"":[{"":"父亲","姓名":"xxx"},{"":"母亲","姓名":"xxx"}]

例子

以json格式保存一个人的信息

属性：姓名、性别、年龄、性别、宠物、婚姻状况、房产、家庭成员

{
    "name":"张明",
    "age":20,
    "sex":"男",
    "pet":{
        "petName":"卡妹",
        "petType":"狗"
    },
    "married":true,
    "house":null,
    "famliy":[{
        "name":"xxx",
        "relation":"配偶"
    },
    {
        "name":"yyy",
        "relation":"孩子"
    }]
}