前端简介

前端基础知识

根据视频教程总结：视频地址

HTML

head 标签

head 标签的内容，不会显示在web页面上，它只是定义了一些浏览器标签标题，页面编码等信息。

title 标签

title 标签定义了浏览器标签的标题


    窗口1

meta 标签

meta 标签是一个自闭合标签，可以定义页面的编码格式，页面的定时刷新和跳转，以及一些其他信息

link 标签

link 标签可以定义引用外界 CSS 样式。也可以定义浏览器标签页标题旁边的小图标。

定义CSS

href 属性是本地 css 文件的相对路径

定义小图标

icon.png 是本地的一个小图片

style 标签

style 标签内部写的是 CSS 代码。

script 标签

script 标签内部，写的是 JavaScript 代码（最好是放在body标签里面的最底下！！！）

也可以直接导入一个 js 脚本：

body 标签

在网页上我们能看到的主体内容，都存放在 body 标签里面。

标签的 name， value 属性

很多标签都有 name，value属性，它们的作用主要是用来向服务器后台发送数据用的。因为很多标签都是让用户输入数据的，譬如登陆时的用户名和密码。name 属性的值，会作为键（键值对的键），value属性的值（当然，用户名这种文本框不需要手动写value属性，因为它会自动将用户输入字符作为value，但是像单选框这种类型，就需要手动定义value属性），会作为键值对的值，传递给服务器。这样服务器就可以拿这个键值对，处理用户的数据了。所以name，value属性的值，是和服务器后台挂钩的。

简单来说，name和value定义了键值对的键和值，方便服务器后台获取。

常见标签

特殊符号

在html中，一些特殊符号是用特殊代码表示的，如表示空格，< 表示 <, > 代表 > 等等。

div 标签

div 标签没有自身特殊的格式，一个文字加上这个标签和不加这个标签，外表看上去没有任何变化。但是我们可以通过给 div 标签加上特殊样式，就可以改变这个标签内部的元素的样式。（div 标签占据屏幕一整行，属于块级标签）

span 标签

span 标签本身也没什么特殊样式。和div 类似（但是span 标签不会占据屏幕一整行，而是根据 span 标签中的内容，自适应大小）

内联标签，块级标签

块级标签（block），这种标签自己独占一行，写在它后面的其他标签会被挤到下一行。

内联标签（inline），它的大小就是内容的大小，不会自动换行，也无法单纯的设置标签的宽度和高度。

inline-block ，这种标签具有上面两种的属性。它不会自动换行，但是也可以设置宽度和高度等属性。

p 标签

p 标签代表一个段落，它本身是有格式的！（段落间距）


    
        这是一个段落。
    
    
        这是第二个段落。

br 标签

br 标签是一个自闭合标签，它代表一个换行符。


    
        这是一个段落的第一句话。
 这是第一段的换行后的第二句话。

img 标签

显示一个图片, src 属性代表图片的地址。

a 标签

链接跳转

a 标签代表一个超链接。可以给文字等设置超链接，可以实现点击的跳转。它有两个重要的属性：href, target

href 代表了链接的地方。target 代表如何打开这个链接：_blank 代表在新标签页打开。


    点击我跳转





    点我没反应

锚

锚相当于一个锚点，点击这个锚点，就可以直接跳转到锚点指向的位置（譬如你想从当前网页顶部，直接跑到页面的底部，就可以在页面顶部创建一个锚点，指向页面底部的某个元素）

格式：href="#id"

将想要跳转到的元素的 id 属性值，放到 a 标签的 href 属性中（记住要加 #）


    	
         跳转到底部

        模拟网页中间的大段内容
    
    	
        底部

h 标签

h 标签代表标题。类似于 word 中的一级标题，二级标题...

h有6个等级。分别为： h1, h2, h3, h4, h5, h6

form 标签

form 标签通常用来放置用户输入的内容，然后可以将用户输入的内容，发送给服务器后台。它有两个属性：method, action

action 定义了发送的地址，通常是一个 url 链接。

method 定义了发送的方法：get，post

enctype 如果不需要上传文件，可以不写。需要上传文件时，必须要写。

        
            用户名：
            密码：

input 标签

input 标签可以创建让用户输入的内容。譬如文本框，密码框，单选项，多选项等等。

type 属性定义了标签的类型。

文本框


            
                name :

密码框


            
                password :

单选项

针对单选项，value 属性定义了发送给服务器后台数据的值，假设用户选择了 '男' ,那么form表单会发送：

{'gender': 1} 这种类型的数据。

多选项

文件上传

提交

submit 类型，可以提交一个form 表单中用户填写的数据。 value 是按钮显示出来的名字

例子见下方。

按钮

按钮类型，对 form 表单没有什么影响（需要用户自己写一些函数，绑定在按钮上才有用）

例子见下方。

重置按钮

重置按钮，可以将用户在 form 表单中填写的所有数据清空。

        
            用户名：
            密码：

textarea 标签

这个标签可以让用户输入一大串文本。(可以换行，多段落)



我是文本区域内的默认值。

select 标签

select 标签可以实现下拉选项。

option 标签设置每个选项。option 标签的 selected 属性，可以将此选项设置成默认值。

label 标签

label 可以让一个 label 和后面的内容相关联。下面的例子中，用户点击 用户名 这三个字，鼠标光标就会自动放到用户名的输入框中，相当于点击文字和点输入框是一样的效果。


    用户名：
        
    


    密码：

ul，ol 标签

ul，ol 标签都是代表列表。ul 标签的 li 用 · 表示每一项。 ol 用数字放在列表前代表每一项。

    
        content
        content
        content
    

    
        content
        content
        content

table 标签

table 标签声明一个表格。它是由行和列组成的。一个表格包含多行(), 每行又包含多列()。

声明一个表格

声明表格的表头（可以忽略不写）

表格的内容（可以忽略不写）

一行

表头的每一列

一列

合并单元格

两个属性：

colspan="2" 代表横跨两列，即水平方向合并两个单元格

rowspan="2" 代表纵跨两行，即竖直方向合并两个单元格

下面的例子是一个3行2列的表格。

表头的第一列占据了2个单元格，所以我们只写一个

就行了

表格body里第一行的第一列单元格纵跨了2行，所以下一行保留一个

就够了

总之就是表格的大小是固定的，只要有人占多了位置，被占据的就要被踢出去。

iframe 标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

CSS

CSS 指层叠样式表 (Cascading Style Sheets)。

三种设置方式和优先级

有三种设置它的方式：

标签内部的 style 属性

仅作用于当前标签

我的世界

html的 head 头部 style 标签

html的 hread 头部 link标签

在head 标签中，通过 link 标签引入外部 css 文件，实现样式。

优先级：标签内部 > 头部 style 标签 > link 外部文件

语法

如果是写在标签内部，则给标签添加一个 style 属性：使用键值对的方式，填写想要施加的属性样式和值。并且多个属性之间，用 ; 分隔开。


    ....

如果是写在的

CSS选择器

我们想要对标签设置样式，自然需要先选中标签，css 有多种方式可以给你想要的标签添加样式。

标签选择器

直接定义一个固定的标签，给页面所有的这个标签添加样式。

给所有 div 标签设置颜色红色。

id选择器

给某 id 的标签设置样式，使用：#id 的格式。因为 html 中所有标签的 id 不能重复，所以这个选择器不常用。

class 选择器

html 中每一个标签都可以有一个 class 属性，并且 class 的值可以相同。我们可以通过设置某个 class 的样式，对这些标签设置样式。

属性选择器

选择某个标签后，还可以筛选响应的属性

层级选择器

如果嵌套多个标签，我们可以给定标签层的路径，设置某一层的标签的样式

每一个层级，都用空格隔开

组合选择器

我们想要对多个标签或者 class 选择器施加相同的样式，可以将这些选择器用 , 分隔开：

小知识：

!important

如果一个标签，施加了多个样式，可能某个样式的优先级比较低，没有成功施加样式，可以这样做：

!important 会无视别的样式的优先级，确保当前样式一定会执行。

:after

:after 可以给所选择的标签的内容后面，添加新的内容。新内容用 'content' 定义

/* 给 p 标签内容的后面，添加一个 '。' */
p:after{
	content: '。';
}

:before

同上。

常见属性

color

color可以设置字体颜色，有三种设置方式：颜色名称，16进制rgb颜色，rgb(255,255,255,0.5)

div{
    color: red;
    color: #FFB6C1;
    color: rgb(0,255,200,0.6);  /* 前三个值代表 rgb，最后一个代表透明度
}

background-color

设置元素的背景颜色，同样支持三种颜色方式（见 color 属性）

font-size

设置字体大小。

div{
    font-size: 50px;
    font-size: 100%;  /* 相对父元素的大小 */
}

height, width

元素的高度，不支持百分比。width宽度，支持百分比

div{
    height: 500px;
    width: 150%;  /* 相对父元素的宽度 */
}

background-image

设置背景图片。

高和宽是在网页上显示的图片的大小（如果图片宽高大于设置的宽高，则只会显示图片的局部）。

background-repeat 可以设置是否重复显示图片（如果图片真实高宽小于设置的宽高，则默认重复显示图片铺满这块区域）

background-position: 设置图片的位置（以图片左上角为基准点，放到某个位置。屏幕左上角是0，0）

.img{
    background-image: url(icon.png);
    height: 50px;
    width: 100px;
    background-repeat: no-repeat;
    background-position: -100px -200px;
}

border

border设置边框线条。想要设置单独某个边框，可以使用：

border-left, border-right, border-top, border-bottom

后面跟的值分别是：边框粗细，边框线条样式，边框颜色(有一个特殊的透明色：transparent)

table{
    border: 1px solid red;
	border-left: 2px dotted green;
}

利用border实现特殊小三角效果：

会沿着两个对角线，将标签填充成四个颜色小三角形。




    
    Title

display

display可以改变一个元素的展示方式

div{
    display: none;  /* 顾名思义，彻底隐藏一个元素，就好像它不存在一样 */
    display: inline;  /* 将一个块级标签转换成内联标签 */
    display: block;  /* 将一个内联标签转换成块级标签 */
}

margin, padding

margin 控制一个元素的外边距(元素仅仅移动，保持一个边距)。（margin-left, -top, -right, -bottom可以分别调节四个边距）

margin 后面可以跟1-4个值：

div{
    margin: 0 auto;   /* 0代表上下间距为0，左右间距自动（通常会自动居中） */
    margin: 0 10px;   /* 0代表上下间距为0，左右间距10px */
    margin: 10px 20px 30px 40px;   /* 分别代表上边距，右边距，下边距，左边距 */
    margin: 10px 20px 30px;   /* 分别代表上边距10px，左右边距都是20px，下边距30px */
    margin: 0;   /* 上下左右边距都是0 */
    
    margin-left: 0;
}

padding 控制一个元素的内边距（元素会向某个方向扩大），同样有 -left，-top, -right, -bottom

margin 设置的是标签的外边距，增加一个边距，会让整个标签移动（相当于整个标签平移了）。

padding 设置的是标签的内边距，增加它会增加标签的大小（一个标签的大小包含了可供放置内容的区域和内边距，扩大内边距会增大标签的大小，但是不会增加可供放置内容区域的大小）

top，bottom等设置的是标签的边缘，它们会将标签的边缘放置在相应的位置，通过top，left，right，bottom的结合，可以肆意拉伸一个标签，变大或变小。

float

float：left，right，top，bottom

float，顾名思义，可以让一个标签悬浮起来。譬如下面的例子中，div 标签有三个子标签。我们想让前两个子标签放在一行（它们的宽度加起来刚好100%，所以能放在一行。但是div标签是块级标签，每个单独占一行，没法放在一行），所以我们就需要让他们靠 left float 起来，这样它们就会自动填充空隙（跑到一行中）。但是它们悬浮以后，父级 div 就无法囊括住这两个子标签了，所以需要第三个 div ，设置 style="clear: both" , 让它们依然和父标签在一起。

        
            a
            b

上面我们用了一个 clear: both 来重新撑起父级标签。现在有个更好的做法：




    
    Title
    



    
        part1
        part2

position

这个属性可以设置一个元素的位置。它有三种定位方式：

position: fixed / absolute / relative

fixed: 固定位置。不管如何滚动页面，永远显示在那个位置。

absolute: 单独使用也可以固定位置，但是会随着页面的滚动而滚动。如果有别的标签使用了 relative，则当前使用了 absolute 的标签，会根据那个 relative 的标签进行定位。

relative：给别的标签作为相对定位用的。

bottom, top, right, left

四种设置元素位置的属性


    顶部

opacity

设置不透明度。取值范围 0-1。1代表不透明，0代表透明

.shadow{
    background-color: black;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0.4;
}

z-index

设置不同选择器样式的优先级，值越大，优先级越高。想要 z-index 生效，必须使用 position，或者父元素使用了 positoin。



    
        
        Title

list-style-type

设置

,

标签前面的 · 样式

ul{
    list-style-type: none;  /* 将列表前面的小圆点设置为无 */
}

line-height

设置行高，设置了此属性的标签，它的子标签会自动垂直方向居中

div{
    line-height: 50px;
}

cursor

设置鼠标的样式（小手，指针，十字等）

div{
    cursor: pointer; /* 鼠标小手的样式 */
}

hover

设置鼠标悬停的样式，针对一个标签，如果设置了 hover，当鼠标悬停在此标签上时，会自动应用设置的样式

div:hover{  /* 设置鼠标悬停在div标签上时，此div的背景色变成 红色 */
    background-color: red;
}

font

设置字体大小，是否是斜体，

div{
    font-size: 10px;
    font-size: 1em;  /* 1em =16px, 16px是浏览器默认大小 */
    font-style:normal;  /* 设置文字正常还是斜体。italic 是斜体文字，oblique 是倾斜的文字 */
    font-weight:normal; /* 字体粗细。normal, bold */
}

text-align

设置文字左右对齐方式，譬如 center, left, right

span{
    text-align: center;
}

overflow

假设一个标签的内容太多，超出了标签的大小，overflow 会生成一个滑动条，实现标签内部的内容滑动，而不是无限扩大标签的大小。




    
    Title
    


    Title
    sss
    
        ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd

        ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd

        ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd

        ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd

        ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd

        ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd

        ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd

        ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd

        ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd

        ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd

        ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd
ddddddddd

@media 响应式布局

@media 可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

JavaScript

常见符号

==  // 判断两个变量的值是否相等（不判断类型，数字的 123 和字符串的 '123' 会认为相等）
!=  // 不相等（同样不判断类型）
===  // 判断两个变量的值和类型是否相等
!==   // 判断类型和值是否不相等
&&   // 并且；类似于 python 的 and
||  // 或

变量类型

变量和注释

var 关键字声明局部变量。不加关键字声明的是全局变量。

// 单行注释
/* 多行注释
*/
var x = 10;
a = 20;

特殊变量

null

null 代表一个特殊的变量，类似于 python 中的 None

var a = null;

undefined

undefined 代表一个暂未赋值的变量。

var a;  // 此时 a 就是 undefined
var b = undefined;  // 这样也行

数字类型

javascript 中不区分整数型和浮点型数字，所有数字都用浮点型表示

类型转换

parseInt() 将一个值转换成数字，不成功返回 Nan
parseFloat() 将一个之转换成浮点型，不成功返回 Nan

特殊值

Nan 代表一个非数字的值；可以通过 isNaN() 判断。
Infinity 代表一个无穷数；可以通过 isFinite() 判断。

字符串类型

常用方法：

var a = ' ab  abcde      ';
var b = '123456'

a.trim()         	// 去除左右空白符号
a.trimLeft()		// 去除左边空白符号
a.trimRight()		// 右边
a.charAt(0)			// 获取某个索引位置的字符
a.concat(a,b)		// 拼接 a,a,b 这三个字符串
a.indexOf('a', 2)	// 获取索引2位置后面的第一个a的索引
a.lastIndexOf('a', 2)
a.substring(2,3)	// 返回一个2-3索引的字符串（不包含3）
a.slice(2,3)		// 切片
a.toLowerCase()		// 转换成小写
a.toUpperCase()		// 大写
a.split('b', 2)		// 按照 'b' 分割，返回列表的前两个。

数组类型

声明数组：

var a = [];
a.push(1)			// 末尾追加
a.pop()				// 末尾弹出
a.unshift(2)		// 头部追加
a.shift()			// 头部删除
a.slice(2,3)		// 切片
a.reverse()			// 反转
a.join(sep)			// 使用 sep 这个符号来拼接；类似于python： sep.join(list)
a.concat(val,...)	// 拼接
a.sort()

a.splice(index, deleteCount, value1,value2...)  // 从索引 index的地方开始，删除 deleteCount 个元素，然后插入 value1,value2...

字典对象

JavaScript中没有字典这个概念，它有一个类似于字典的对象，我们姑且叫它字典。它的表现形式和字典起始一样。

var a = {"k1": 1; "k2": 2}
a["k1"]

时间类型

d = new Date()
// 可以自己在 chrome 浏览器的控制台上试试，有代码自动提示功能。
d.getYear();
d.setYear(2022);
d.setHours(d.getHours()+2);

条件判断语句

if...else

if(condition){
    
} else if(){
    
} else{
    
}

switch

switch(name){
    case "wnag":
        console.log('wang');
    	break;
    case "zhang":
        ...
}

while

while (condition){
    ...
    break;
    continue;
}

for

第一种样式：和 java 中的语法很像

var a = [1,2,3];
for(var i=0; i


第二种：
var a = [1,2,3];
var b = {"k1": 1; "k2": 2};

// 针对数组，遍历的是索引
for(var item in a){
    console.log(a[item]);  // 记住，这里的 item 依然是索引！不是里面的元素！
}

// 针对字典对象，遍历的是 key
for(var key in b){
    console.log(key)  // 这里的遍历的是 key，可以通过 b[key] 取值。
}

异常处理
try...catch...finally
捕获异常。
try{
    code;
}catch(e){
    code;
}finally{
    code;  // finally 无论有无异常，都会执行。
}

throw new Error
抛出异常
throw new Error('Error with ....')

函数
普通函数
function func1(args){
    code;
    return xxx;
}

匿名函数
var func1 = function(args){
    args = args + 1;
    return args;
}

类似于 python 中的 lambda:
func1 = lambda x: x+1

自执行函数
创建一个匿名函数，并执行它
格式：(匿名函数)(传递的参数值)
(function(args){return args+1})(123)

// 上面的自执行函数可以分解如下：
// 1. 声明函数
function func1(args){
    return args+1;
}
// 2. 执行函数
func1(123)


对象序列化
var a = [1,2,3]

a = JSON.stringify(a)  // 将a序列化成字符串
JSON.parse(a)  // 将字符串反序列化成对象

转义
url转义
将 URL 中的特殊符号，转义
    

值转义
仅仅将值转义，不针对URL
var name = "我的"
name = escape(name)  // 编码

unescape(name)  // 解码


eval
可以将一段字符串，当成可执行命令执行
var a = 'alert(123)'
eval(a)

DOM 元素查找
直接查找
document.getElementById("i1")                 // 根据ID获取一个标签
document.getElementsByName("xxx")             // 根据name属性获取标签集合
document.getElementsByClassName("class1")     // 根据class属性获取标签集合
document.getElementsByTagName("div")          // 根据标签名获取标签集合

根据标签的上下文查找
var tag = document.getElementsByTagName("div");  // return an array of all div.
ele = tag[0]

// 查找 Node（譬如一个标签元素。它会有文本内容，会有属性。内容和属性都各属于一个Node，链接到这个元素上），所以我们查找Node，会返回标签的各个Node，然后从Node中获取文本内容等。
ele.parentNode          // 父节点
ele.childNodes          // 所有子节点
ele.firstChild          // 第一个子节点
ele.lastChild           // 最后一个子节点
ele.nextSibling         // 下一个兄弟节点
ele.previousSibling     // 上一个兄弟节点

// 查找 Element，查询出来标签元素。
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

查找标签的内容值
value
针对带有 value 属性的标签（譬如输入框，勾选框等），我们可以通过 value 取值
var tags = document.getElementByTagName("input")
tag = tags[0]

tag.value

innerHTML, innerText
对于包含春文本形式的标签（不带value属性）我们可以通过 innerHTML 或者 innerText 取值
它们的不同之处是：假设内容中嵌套了 html 标签，innerHTML 可以将其原样返回。innerText 只会返回内部的值。



    
    Title


    这是内容(嵌套了内容)，还是内容。
    
    




标签的 class 属性
获取标签的 class 属性值。
className 可以获取一个标签的 class 属性（作为一个字符串）
classList 也可以获取一个标签的 class 属性（作为一个数组）
var tag = document.getElementByClassName("div")[0];
tag.className  // return the string type class value of the div.
tag.classList // return an array of all classes of the div.

// 添加或删除某个值
tag.classList.remove("c1") // remove a class value of the tag.
tag.classList.add("c1") // add a class value of the tag.

标签的样式
tag.style.attribute 可以动态的修改标签的样式。
var tag = document.getElementByClassName("div")[0];

tag.style.color='red';
tag.style.fontSize='20px';

标签的属性
简单粗暴的获取，设置，删除一个标签的属性的值。
tag.getAttribute("attribute_name")
tag.setAttribute("attribute_name", "value")
tag.removeAttribute("attribute_name")

tag.setAttribute('class', 'c1') // 将标签的 class 设置为 c1;
tag.removeAttirbute("class")  // 删除标签的 class 属性

更多例子
创建HTML标签
方式一：创建标签对象
var tag = document.createElement('a')  // 创建 a 标签
// 设置内容和 class,href 属性
tag.innerText = "链接文字"
tag.className = "c1"
tag.href = "http://www.baidu.com"

方式二：字符串方式
var tag = "链接文字"

插入创建的标签
插入纯文字标签
tag.insertAdjacentHTML(where, str_obj)
var div = document.getElementsByTagName("div")[0];
var p2 = "p2";
div.insertAdjacentHTML("beforeBegin", p2);

插入标签对象
tag.insertAdjacentElement(where, obj)
var div = document.getElementsByTagName("div")[0];
var tag = document.createElement('a');  // 创建 a 标签
// 设置内容和 class,href 属性
tag.innerText = "链接文字";
tag.className = "c1";
tag.href = "http://www.baidu.com";

div.insertAdjacentElement("beforeBegin", tag);

where 有如下四种选项：

beforeBegin   当前元素的前面插入（关系是兄弟节点）

beforeEnd      当前元素的内部的最后插入（关系是父子节点）

afterBegin      当前元素的内部的开头插入（关系是父子节点）

afterEnd         当前元素的后面插入（关系是兄弟节点）

插入子节点
将对象当成子节点，插入到末尾。
tag.appendChild(obj)
var div = document.getElementsByTagName("div")[0];
var tag = document.createElement('a');  // 创建 a 标签
// 设置内容和 class,href 属性
tag.innerText = "链接文字";
tag.className = "c1";
tag.href = "http://www.baidu.com";

div.appendChild(tag);

在某个子节点的前面，插入子节点
tag.insertBefore(tag1, children_tag)
var div = document.getElementsByTagName("div")[0];
var tag = document.createElement('a');  // 创建 a 标签
// 设置内容和 class,href 属性
tag.innerText = "链接文字";
tag.className = "c1";
tag.href = "http://www.baidu.com";

div.insertBefore(tag, div.children[0]);  // 插入到 div 的第一个孩子节点之前

查找 form 表单
var tag = document.getElementById('form1')  // 通过 id 获取 form 表单
tag.submit()  // 提交form表单

示例：



    
    Title


    
        
        提交  
    

    




定时器
setInterval(function, time)
setInterval 可以间隔一段时间，一直循环执行一个函数。
setInterval(function(){alert(123)}, 2000); // 每隔两秒，执行一次前面的匿名函数,返回一个对象

clearInterval(interval)
清除 setInterval 设置的定时任务。
var interval = setInterval(function(){alert(123)}, 2000); // 每隔两秒，执行一次前面的匿名函数,返回一个对象
clearInterval(interval)

setTimeout(function, time)
和 setInterval 类似，等待多久后，执行一次前面的函数（只执行一次）
setTimeout(function(){alert(111)}, 2000)  // 2秒后，执行一次前面的匿名函数

clearTimeout(ojb)
var interval = setTimeout(function(){alert(111)}, 2000);
clearTimeout(interval);

url 刷新，重定向
location.href               // 获取当前url
location.href = "url"       // 重定向到指定 url
location.reload()           // 刷新

弹出框
确认弹出框
var result = confirm('确定关闭？')
console.log(result)  // true or false;

警告框
alert('出现错误！')

文档标签高度
文档高度
文档总高度
获取文档总高度（加上滚动条）
document.documentElement.offsetHeight

当前屏幕显示的文档高度
document.documentElement.clientHeight

标签高度
标签自身高度
tag.offsetHeight

标签最近的一个祖宗元素
父级元素应该要 positioned，否则会一层层网上找，直到找到 body 标签。
tag.offsetParent  // 返回一个元素

标签到 offsetParent 标签的高度
tag.offsetTop

滚动高度
tag.scrollTop

html 事件
事件不仅可以针对某个单独的标签，还可以针对整个窗口window。
针对标签：

    点击会触发 func1 这个函数。


针对窗口：
window.onclick = function(){  // 在窗口上任意位置点击，都会触发这个函数
	alert(1234);
}

针对一些特殊事件，函数会接受一个包含所有信息的 event 对象:
window.onkeydown = function(event){  // event 是按下的事件
    console.log(event.keyCode);  // 打印事件的按键的代码
}

onfocus
onfocus 会在鼠标聚焦在当前标签时，运行 onfocus 属性值指定的函数
onblur
会在鼠标失去聚焦当前标签时，执行指定的函数
onclick
会在鼠标点击当前标签时，执行指定的函数
onscroll
滚动事件
jQuery
语法和选择器
基础语法：
$(selector).action()  // '$' 等同于 jQuery；selector代表选择器，通常是一个字符串或某个DOM元素。action是要采取的动作。

常见选择器：来源w3school
 元素 元素


选择器
实例
选取




*
$("*")
所有元素


#id
$("#lastname")
id="lastname" 的元素


.class
$(".intro")
所有 class="intro" 的元素


element
$("p")
所有  元素


.class.class
$(".intro.demo")
所有 class="intro" 且 class="demo" 的元素







:first
$("p:first")
第一个  元素


:last
$("p:last")
最后一个  元素


:even
$("tr:even")
所有偶数 



:odd
$("tr:odd")
所有奇数 








:eq(index)
$("ul li:eq(3)")
列表中的第四个元素（index 从 0 开始）


:gt(no)
$("ul li:gt(3)")
列出 index 大于 3 的元素


:lt(no)
$("ul li:lt(3)")
列出 index 小于 3 的元素


:not(selector)
$("input:not(:empty)")
所有不为空的 input 元素







:header
$(":header")
所有标题元素  - 



:animated

所有动画元素







:contains(text)
$(":contains('W3School')")
包含指定字符串的所有元素


:empty
$(":empty")
无子（元素）节点的所有元素


:hidden
$("p:hidden")
所有隐藏的  元素


:visible
$("table:visible")
所有可见的表格







s1,s2,s3
$("th,td,.intro")
所有带有匹配选择的元素







[attribute]
$("[href]")
所有带有 href 属性的元素


[attribute=value]
$("[href='#']")
所有 href 属性的值等于 "#" 的元素


[attribute!=value]
$("[href!='#']")
所有 href 属性的值不等于 "#" 的元素


[attribute$=value]
$("[href$='.jpg']")
所有 href 属性的值包含以 ".jpg" 结尾的元素







:input
$(":input")
所有  元素


:text
$(":text")
所有 type="text" 的  元素


:password
$(":password")
所有 type="password" 的  元素


:radio
$(":radio")
所有 type="radio" 的  元素


:checkbox
$(":checkbox")
所有 type="checkbox" 的  元素


:submit
$(":submit")
所有 type="submit" 的  元素


:reset
$(":reset")
所有 type="reset" 的  元素


:button
$(":button")
所有 type="button" 的  元素


:image
$(":image")
所有 type="image" 的  元素


:file
$(":file")
所有 type="file" 的  元素







:enabled
$(":enabled")
所有激活的 input 元素


:disabled
$(":disabled")
所有禁用的 input 元素


:selected
$(":selected")
所有被选取的 input 元素


:checked
$(":checked")
所有被选中的 input 元素



自动展开折叠菜单栏实例
查找节点
父节点和祖先节点
parent()			// 查找当前节点的父节点
parents()			// 当前节点的所有祖先节点
parentsUntil('xxx') // 当前节点直到 xxx 的所有祖先节点

譬如：
$("span").parent()
$("span").parents()
$("span").parentsUntil("body")

子孙节点
$("xxx").children()     // 只会查找xxx 的儿子节点。
$("xxx").find()			// 会查找当前节点的所有子孙...

兄弟节点
$("span").siblings()		// 当前节点的所有兄弟节点

$("span").next()			// 当前节点的下一个兄弟节点
$("span").nextAll()		// 当前节点的剩下的所有兄弟节点
$("span").nextUntil("div") // 介于当前节点和div兄弟节点之间的，所有兄弟节点

$("span").prev()			// 和上面类似，方向相反
$("span").prevAll()
$("span").prevUntil("xxx")

过滤
$('div').find(".xxx")		// 查找当前div下面所有class='xxx'的标签。

$("div p").last();			// div标签下面的最后一个 p标签
$("p").eq(1);				// 当前页面的第二个 p 标签（索引为1）
$("p").filter(".intro");	// class="intro" 的所有 p 标签
$("p").not(".intro");		// class不是 intro 的 p 标签

修改文档:来源w3school



方法
描述
实例
解释




addClass()
向匹配的元素添加指定的类名。
$("p:first").addClass("intro");
向第一个 p 元素添加一个类


after()
在匹配的元素之后插入内容。（兄弟节点）
 $("p").after("Hello world!
");
在每个 p 元素后插入内容


append()
向匹配元素集合中的每个元素结尾插入由参数指定的内容。
$("div").append(" Hello world!");
在每个 div 元素内部的末尾插入内容


appendTo()
向目标结尾插入匹配元素集合中的每个元素。
$("Hello World!").appendTo("div");
把内容，添加到 div 标签内部的末尾


attr()
设置或返回匹配元素的属性和值。（只写一个参数，取值。两个参数，设置值）
$("img").attr("width","180");
改变图像的 width 属性


before()
在每个匹配的元素之前插入内容。（兄弟节点）
$("p").before("Hello world!
");
在每个 p 元素前插入内容：


clone()
创建匹配元素集合的副本。
$("body").append($("p").clone());
克隆并追加一个 p 元素


detach()
从 DOM 中移除匹配元素集合。
$("p").detach();
移除所有 p 元素


empty()
删除匹配的元素集合中所有的子节点。
 $("p").empty();
移除 p 元素的内容


hasClass()
检查匹配的元素是否拥有指定的类。
alert($("p:first").hasClass("intro"));
检查第一个 p 元素是否包含 "intro" 类


html()
设置或返回匹配的元素集合中的 HTML 内容。
$("p").html("Hello world!");
设置所有 p 元素的内容


insertAfter()
把匹配的元素插入到另一个指定的元素集合的后面。
 $("Hello world!").insertAfter("p");
在每个 p 元素之后插入 span 元素


insertBefore()
把匹配的元素插入到另一个指定的元素集合的前面。
$("Hello world!").insertBefore("p");
在每个 p 元素之前插入 span 元素


prepend()
向匹配元素集合中的每个元素开头插入由参数指定的内容。
 $("p").prepend("Hello world!");
在 p 元素的开头插入内容


prependTo()
向目标开头插入匹配元素集合中的每个元素。
$("Hello World!").prependTo("p");
在每个 p 元素的开头插入内容


remove()
移除所有匹配的元素。
 $("p").remove();
移除所有 p 元素


removeAttr()
从所有匹配的元素中移除指定的属性。
 $("p").removeAttr("id");
从任何 p 元素中移除 id 属性


removeClass()
从所有匹配的元素中删除全部或者指定的类。
$("p:first").removeClass("intro");
移除所有 p 的 "intro" 类


replaceAll()
用匹配的元素替换所有匹配到的元素。
$("p").replaceAll("Hello world!");
用粗体文本替换每个段落


replaceWith()
用新内容替换匹配的元素。
 $("p").replaceWith("Hello world!");
用粗体文本替换每个段落


text()
设置或返回匹配元素的内容。（不写参数取值。写参数设置值）
$("p").text("Hello world!");
设置所有 p 元素的内容


toggleClass()
从匹配的元素中添加或删除一个类。




unwrap()
移除并替换指定元素的父元素。




val()
设置或返回匹配元素的值。
  $(":text").val("Hello World");
设置输入文本框的值


wrap()
把匹配的元素用指定的内容或元素包裹起来。




wrapAll()
把所有匹配的元素用指定的内容或元素包裹起来。




wrapinner()
将每一个匹配的元素的子内容用指定的内容或元素包裹起来。





事件
click
        // $(function(){}); 这个是在 dom 文档树刚生成时，就执行内部的匿名函数。不用等待网页所有资源加载完毕。
        $(function (){
            $("div").click(function (){  // obj.click(func(){})；当点击某个对象时，会自动触发内部的 func(){} 函数。
                alert($(this).text())
            })
        })

bind
$("div").bind("click",function(){  // 主动给 click 事件，添加一个处理函数。
  alert($(this).text())
});

delegate
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。(它可以动态的给元素添加处理程序，譬如当文档已经加载完毕，但是用户出发了其他事件，产生了一些新的标签，delegate也可以给这些新产生的标签，添加这些功能。)
语法：
$(selector).delegate(childSelector,event,data,function)




    
    Title


    123
    145

    
    



循环
$.each([...], function(){})
$(selector).each(function(){})
each 可以循环处理一个数组，在 each 里的 function 中，return false 代表 break 中止循环。return 仅仅代表 continue 继续循环。
插件
font awsome
easyUI
jqueryUI
bootstrap
bxslider
示例
文字滚动



    
    Title


    
        欢迎领导莅临指导
    
    
    




输入框提示



    
    Title


    
    

    




动态对话框



    
    Title
    


    
    
    
    
    
    
         

         

        
        
    


    




复选框的全选，取消，反选
普通版
有点小问题。我们知道 checkbox 有个特殊属性checked, 它可以设置选中的状态。我们可以在html中写死这个值，让它选中或者不选中。但是当我们在网页上真的勾选或者取消勾选，它的真实的状态是由 标签的一个内部属性决定的，不会动态的给标签添加这个 'checked' 属性。所以我们通过 'checked' 这个属性，很难获取它的真实状态。



    
    Title
        



    
    
    

    
        
            
                选择
                内容
            
        
        
            
                
                吃饭
            
            
                
                睡觉
            
            
                
                豆豆
            
        
    



    




jquery 版
需要导入 jquery



    
    Title
    



    
    
    

    
        
            
                选择
                内容
            
        
        
            
                
                吃饭
            
            
                
                睡觉
            
            
                
                豆豆
            
        
    


    




点赞特效（+1 漂浮扩大)



    
    Title
    


    
        
        点赞
    
    
        点赞
    


    




返回顶部



    
    Title
    



    返回顶部

    
        段落
        段落
        段落
        段落
    

    




判断用户名不能为空



    
    Title


    
        
        
        
    

    




自动展开折叠菜单栏
注意：需要下载 jQuery



    
    Title
    
    


    
        
            菜单一
            
                content1
                content2
                content3
            
        
        
            菜单二
            
                content1
                content2
                content3
            
        
        
            菜单三
            
                content1
                content2
                content3
            
        
        
            菜单四
            
                content1
                content2
                content3
            
        
    

    




复制添加搜索条件



    
    Title
    


    
        
             + 
            
        
    

    




编辑模式，退出编辑模式



    
    Title
    



    
    
    
    

    
        
            
                选择
                内容
            
        
        
            
                
                吃饭
            
            
                
                睡觉
            
            
                
                豆豆
            
        
    

    
    




						  
					  
						
							

						
							
							
			其他							
						



						
						
						

						

						
					
					
					
					
						相关
						
				
						
			
																
								
										007.SMB其他应用
									
									
								 

        
								
							
							

																
								
										python的WeakKeyDictionary类和weakref模块的其他函数
									
									
								 

        
								
							
							

																
								
										jQuery 当前展开其他收缩 三级下拉菜单（转载）
									
									
								 

        
								
							
							

																
								
										Dora.Interception，为.NET Core度身打造的AOP框架 [5]：轻松地实现与其他AOP框架的整合
									
									
								 

        
								
							
							

																
								
										九、测试经销商能看到其他经销商的工单数据排查--excel如何单列去重
									
									
								 

        
								
							
							

																
								
										img图片跨域问题（场景：阿里oss,腾讯oss,其他第三方文件服务器）
									
									
								 

        
								
							
							

																
								
										【其他】修改服务器时间，oracle数据库时间
									
									
								 

        
								
							
							

																
								
										如何申请 Apple 的 Dun & Bradstreet Code (邓白氏编码 2021)（最新的，网上其他的流程都
									
									
								 

        
								
							
							

																
								
										表单组件里面放其他组件的方法
									
									
								 

        
								
							
							

																
								
										表单组件里面放其他组件的方法
									
									
								 

        
								
							
							

																
								
										7_less中引入其他文件 / 模块
									
									
								 

        
								
							
							

																
								
										Windows 2003 只能打开百度，不能打开其他网页的一个解决方法
									
									
								 

        
								
							
							            
            
            
                                    
           
  			
						

					
					
				

				
														
					
					

					
									
					
									   标签
										
										
										
									

										
										
									
					

					
				

			
		
		
		
			


						


	
	一品网 冀ICP备14022925号-6