HTML+CSS+JS详解

2021-02-25 18:05:11 浏览数 (20129)

Web概述

Web三要素：浏览器，服务器，HTTP协议

HTML工作原理：HTML是部署在服务器上的文本文件，根据HTTP协议浏览器发出请求给服务器，服务器做出响应给浏览器返回一个HTML，浏览器解释执行HTML，从而显示内容

什么是HTML？

HTML是超文本标记语言（Hyper Text Markup Language）,一种纯文本类型的语言，用来设计网页的标记语言，用该语言编写的文件以.html或者.htm为后缀，由浏览器解释执行，在HTML的页面上可以嵌套脚本语言编写程序段，如JavaScript

HTML标签

HTML标签通常也被称为HTML标记，HTML元素；HTML标签是由尖括号包围的关键字，比如<html>，HTML标签通常是成对出现的,比如<b></b>，标签对中的第一个标签为开始标签，第二个标签为结束标签，开始标签和结束标签也被称为开放标签和闭合标签

HTML注释：

<!–注释内容 -->

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们

HTML文档类型：

<!DOCTYPE>声明：HTML由多个不同的版本，只有完全明白页面中的使用的确切HTML版本，浏览器才能完全正确的显示HTML页面，这就是<!DOCTYPE>的意义；

<!DOCTYPE>不是HTML的标签，它为浏览器提供一项信息，即HTML是用什么版本所写的

HTML<head>标签：

定义：<head>标签用于定义文档的头部，是所有头部元素的容器，<head>中的元素可以引用脚本，指示浏览器在哪里找到样表式，提供元信息等等

文档的头部描述了文档的各种信息和属性，包括文档的标题，在web中的位置以及和其他文档的关系等，绝大多数文档的头部包含的数据都不会真正的作为内容显示给读者

以下这些标签可用在head部分：<title>,<meta>,<link>,<style>,<script>,<base>

文本元素：

作用：文本时网页上的重要组成部分，直接书写的文本会用浏览器默认的样式显示

文本元素列表：是包含在文本元素中的文本，则会被显示为元素所拥有的样式

HTML标题：

标题是通过<h1>~<h6>标签进行定义的，目的是为了能够以醒目的方式显示，<h1>定义最大标题，<h6>定义最小标题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H0qWULYZ-1613216632726)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192107880.png)]

HTML段落：

段落是通过<p>标签进行定义的，<p>元素提供了结构化文本的一种方式，<p>元素对中的文本会以单独的段落显示，与前后文本换行分开，添加一段额外的垂直空白距离，作为行间距

HTML列表：

列表是将具有相似特征或先后顺序的几行文字进行对齐排列，所有列表都是由列表类型和列表项组成

列表类型：

有序列表 <ol>：用于列出表面上有特定次序的一些项目，其中只能包含列表项<li>

无序列表 <ul>：用于列出页面上没有特定次序的一些项目，也只能包含具体列表项元素<li>

列表项：用来表示列表具体的内容 <li>

HTML列表嵌套：将列表元素嵌套使用，可以建多层列表

HTML分区元素：

用于元素的一些分组，常用于页面布局，块分区元素<div></div>,行内分区元素<span></span>

元素显示方式：

块级元素：默认情况下，块级元素独占一行，即元素前后都会自动换行，比如<p>,<div>

行内元素：不会换行,与其他行内元素位于同一行

<span>元素是内联元素,可用作文本的容器，无特定的含义

<i>元素定义斜体字

<em>定义着重文字

<del>用来定义带删除线的文字

<u>用来定义带下划线的文字

空格折叠：默认情况下，HTML中的多个空格，多个换行符会压缩成单个空格，即只显示一个空格

实体引用：空格：&nbsp；（小于号）<:< （大于号） >:&gt；

HTML图像：

使用<img>元素可以将图片添加到页面

语法：<img src=“url” >

常用属性：width,height

src指的是"source",原属性的值是图像的URL地址，但是地址值分为绝对路径和相对路径

绝对路径：文件从最高级目录下开始的完整路径，无论当前路径是什么，使用绝对路径后总能找到要连接的文件

相对路径：文件的位置是相对于当前的文件位置，包括目录名或指向一个可以从当前目录出发找到的文件

HTML超链接：<a href =“url”,target="">

href 属性：链接地址 URL target 属性：目标的打开方式

锚点：文档中某行的一个记号，用于链接到文档中的某个位置

链接锚点：在锚点前加 # <a href ="#g1">内容</a>

定义锚点：<a name=“g1”>内容</a>

俩者需对应使用，前后呼应

HTML表格

表格是由<table>标签来定义的，通常用来组织结构化信息，是被称作单元格的矩形框，按照从左到右，从上到下的顺序排列在一起而形成的，表格的数据保存在单元格里

创建表格：<table></table>

创建行：<tr></tr>

创建列：<td></td>

表格常用的属性：

border 边框

width/height 宽/高

align 对齐方式

padding 边框与文字之间的距离，内边距

cellspacing：单元格之间的距离

跨行属性：rowspan 合并行 colspan 合并列

行分组：表格看分为3个部分，分别为：表头，表主题，表尾

<table>
    <!--表头-->
    <thead>
    	<tr>
        	<th></th>
        </tr>
    </thead>
    <!--表主体-->
    <tbody>
    	<tr>
        	<td></td>
        </tr>
    </tbody>
    <!--表尾-->
    <tfoot>
    	<tr>
        	<td></td>
        </tr>
    </tfoot>
</table>

HTML表单：

表单是用于显示收集信息并提交信息到服务器，表单是一个包含表单元素的区域

俩要素：form元素，表单控件

表单是从浏览器向服务器传输数据的手段

表单元素：

定义表单使用成对的<form>标记，表示要将此元素中所涵盖的控件中的数据传入到服务器

主要属性：

action：表单提交URL；

method：数据提交方式；

enctype：表单数据进行编码的方式

表单控件：由许多不同类型的控件，其是一种HTML元素，是信息输入项，包含

input元素（具有不同的外观）:文本框，密码框，单选框，按钮…

其他元素：标签，文本域，下拉选

input元素

文本框 <input type = “text”/>

密码框：<input type = “password”/>

主要属性：value：由访问者自由输入任何文本

Maxlength：限制输入的字符数

Readonly：设置文本控件的只读

单选框: <input type =“radio”/>

复选框：<input type =“checkbox”/>

属性：value：文本，当提交form时，选中单选按钮，则发送服务器

Name：实现分组，一组单选框或者复选框名称必须相同

Check：设置选中

提交按钮：<input type = "submit " value=“提交”/>传送表单数据给服务器

重置按钮：<input type = “reset” value=“重置”/>清空内容，并设为最初默认状态

普通按钮：<input type = “button” value=""/>执行客户端脚本

隐藏域：<input type = “hidden”/>表单中包含但不希望用户所见

文件选择框：<input type = “file”/>选择上传的文件

其他元素：

标签：表单中的文本用于给控件设置显示名称

语法：<label for=“控件ID”>文本</label>

属性：for：设置该文本所关联的控件ID，关联后点击标签等同于点击控件

文本域：多行文本框

语法：<textrea></textrea>

属性：cols:指定文本域的列数；rows：指定文本域的行数； readonly：该文本域只读

下拉选

语法：

<select>
	<option></option>
</select>

CSS概述

什么是CSS?

CSS是层叠样式表（Cascading Style Sheets），样式定义了如何显示HTML元素，样式通常储存在样式表中，CSS是HTML的化妆师

如何使用CSS？

内联样式：定义在单个HTML元素中

内部样式表：定义在HTML的头元素中

外部样式表：将样式定义在外部的CSS文件中（.css）,由HTML页面引用样式表文件

内联样式：定义在HTML元素的属性style里面

css语法：只需要将分号隔开的一个或多个属性作为元素的style属性值，属性值之间用冒号（:）连接，多个属性值之间用分号（;）隔开

内部样式表：在HTML的<head>元素内部添加<style>元素

外部样式表：样式定义在独立的CSS文件中，一个纯文本文件，后缀为.css,该文件只包含样式规则

使用方法：①创建外部样式表文件

②引用该样式文件

CSS语法规范：

CSS规则由俩个部分构成：选择器，以及一条或多条样式声明

CSS注释：CSS注释以 “/*” 开始, 以 “*/” 结束,

/*这是个注释*/

CSS规则特性

优先级：同一个元素若存在多个CSS规则，对应冲突的声明以优先级高者为准（就近原则）

层叠性：同一个元素若存在多个CSS规则，对于不冲突的声明可以叠加

继承性：父元素的CSS声明可以被子元素继承，如字体，颜色

CSS选择器

元素选择器：能通过元素名来选择 CSS 作用的目标

类选择器：能够附带 class 属性的元素都可以使用此样式声明，将元素的 class 属性设置为样式类名，可以将类选择器和元素选择器结合使用，以实现对某种元素的中不同样式的细分控制 (.class_name)

ID选择器：以一种独立于文档元素的方式，它仅作用于id属性的值 (#id_name)

选择器组：选择器声明为以逗号隔开的选择器列表，将一些相同的规则作用于多个元素

派生选择器：用来选择子元素

分类：后代选择器：选择某元素的后代（子孙）元素

子元素选择器：选择某元素的所有子元素

伪类选择器：用于设置同一个元素在不同状态下的样式

常用伪类:

:link向未被访问的超链接添加样式

:visited 向已被访问的添加样式

:active:向未激活的元素添加样式

:hover:当鼠标悬停到元素上方时，添加样式

:focus:当元素获取焦点时，向该元素添加样式

border：用来设置元素的边框

四边设置：border：width值 style值 color值

单边设置：border-left border-right border-top border-bottom

样式单位：%：百分比 in：英寸 cm：厘米

mm:毫米 pt 磅（1pt=1/72 in）

Px像素 1em 等于当前字体尺寸

Overflow：当内容溢出元素边框时

Visible 不裁剪内容，可显示在内容框外

Hidden 裁剪内容，不提供滚动机制

Scroll 裁剪内容，提供滚动机制

Auto 如溢出，提供滚动

Box框模型：

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置

Margin - 清除边框区域。Margin没有背景颜色，它是完全透明
Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响 `
Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content - 盒子的内容，显示文本和图像

背景色：

background-color：用于为元素设置背景色，可接受任何合法的颜色值

背景图片：

background-image：设置背景图片，默认值为none，表示背景上没有放置任何图像，如需设置，则需要起始字符附带图像的url地址

默认情况下，背景图片是在水平和垂直方向上重复出现的

background-repeate：可控制背景图片的平铺效果

repeate：在水平和垂直方向重复

repeate-x：在水平方向重复

repeate-y：在垂直方向重复

no repeate：仅显示一次

background-position：用于改变背景图片在元素中的位置

CSS文本格式化

控制字体：

font-family：value 1，value 2 指定字体

font-size：value 字体大小

font-weight：normal/bold 字体加粗

color：value 文本颜色

Text-align：left/right/center 文本排列

Line-height：value 行高

Text-indent：value 首行文本缩进

表格样式：

常用属性：表格同样使用box模型（边框，内边距，宽，高）以及文本格式化属性

表格特有属性：如果设置了单元格边框，相邻单元格边框会单独显示，类似于双线边框

border-collapse：合并相邻的边框，设置是否将表格的边框合并为一个边框

显示方式：元素都有自己默认的选择方式

块元素：从上到下显示，可以设置宽高如：<P>,<div>,<h1>

行内元素：从左到右显示，不能设置宽高，如：<span>,<a>

行内块元素：从左到右显示，可以设置宽高，<input>,<img>

除了默认显示效果外，可以用display属性，修改元素的显示方式

具体修改方式:

display：none 表示不显示该元素，释放其占用的空间

display：block 表示将元素的显示方式设置为块

display：inline 表示将元素的显示方式设置为行内元素

display：inline-block：表示将元素的显示方式设置为行内块元素

定位：

定义元素框对于其正常位置应该出现的位置或相对于父元素另一个元素相对于浏览器窗口本身的位置

流定位：页面中的块级元素从上到下依次排列，每一个块级元素都会出现在新的一行，元素框之间的垂直距离，由框的垂直外边距计算得出

内联元素：在一行中从左到右，水平排列不需要换行，使用的是水平内边距，边框和外边距调整他们的间距

浮动定位：将元素排除在普通流之外，将浮动元素放置在包含框的左边或者右边，浮动元素依旧包含于框之外，浮动框可以向左或者向右移动，直到外边缘碰到包含框或者另一个浮动框位为止，如需要设置框浮动在包含框的左边或者右边，可以通过float属性实现具体方向的移动

任何元素都是可以移动的 float：none/left/right

clear清除浮动所带来的影响：clear：none/left/right/both

相对定位：元素原本所占的空间不释放，元素框会相对于原来的位置偏移某个距离，设置垂直或者水平，让元素相对于它的起点进行移动

首先需要设置position属性，其值为relative，然后使用left/right/top/bottom设置具体的偏移量

绝对定位：将元素的内容从当前定位中清除，释放空间，并使用偏移量来固定元素的位置，相对于最近的祖先元素，若偏移元素没有已定位的元素，那么它的位置就是相对于body元素的位置

首先设置position属性，其值为absolute，然后使用left/right/top/bottom设置具体的偏移量

固定定位：将元素的内容固定在页面的某个位置，元素从普通流中完全移出，不占用页面空间，当用户将页面向下滚动时，元素看不随着移动

首先设置position属性，其值为fixed，然后使用left/right/bottom/top设置具体的偏移量

堆叠顺序：一旦修改元素的定位方式，元素可能发生堆叠，可以使用z-index来控制有元素在框中出现的堆叠数值

Z-index：value 数值越大，级别越高，越显示在前

列表样式：

List-style-type：用于控制列表中列表项标志的一个样式

无序列表：出现在各列旁边的圆点

无需列表的取值：none：无标记；disc：实心圆（默认）；circle（空心圆）；square 实心方块

有序列表：可能出现数字，字母或者其他用来排列计数

有序列表的取值：none：无标记；decimal：数字；

lower-roman：小写罗马数字 upper-roman：大写罗马数字

list-style-image：使用图像替换列表项，取值为url

JavaScript

什么是javaScript？

嵌入在HTML中在浏览器中的脚本语言，具有与java和C语言类似的语言，一种网页的编程技术，用来向HTML页面添加交互行为，直接嵌入HTML页面，由浏览器解释执行代码，不进行预编译

特点：可以使用任何文本工具编译，由浏览器内置的JavaScript引擎执行代码

解析执行：事先不编译，逐行执行

基于对象：内置大量线程对象

使用：客户端的数据计算，客户端表单合法性验证，浏览器事件触发，网页特殊显示效果制作，服务器的异常数据提交

JavaScript程序的用法：

事件定义式：在时间定义时，直接写JavaScript；

嵌入式：在使用Script标签

文件调用式:代码位于单独的(.js)文件中，html页面引用js文件，在script标签中添加文件的地址（src=""）

JavaScript代码错误：

解释性代码，代码错误则页面中无效果，可以打开网页的"检查""错误控制台"来查看错误

JavaScript语法规范：

基本语法：由Unicode字符集编写

注释：单行：//注释内容多行：/*注释内容*/

语句：表达式，关键字，运算符，大小写敏感，建议使用分号结尾一条语句

标识符和关键字：

标识符:不以数字开头的字母，数字，下划线和$组成

关键字：查看js手册

变量：使用关键字var声明变量，变量初始化使用"=="来赋值

没有初始化的变量自动取值为：undefined

变量无类型，统一使用var声明，变量所引用的数据有类型

JavaScript数据类型：

特殊类型：null：空 undefined：未定义

内置对象：Number：数字 String：字符串 boolean：俩个值 true/false Array数组 function：函数

外部对象：window：浏览器对象 document：文档对象

自定义对象：Object：自定义对象

String类型:

由Unicode字符，数字，标点符号组成的字符序列，直接量需要一对单/双引号括起

Number类型：

在JavaScript中不区分整型数值和浮点型数值，整型直接量：默认的整数直接量为十进制

Boolean类型：

仅有俩个值 true/false

数据类型转换：

①数据类型之间隐式转换

②转换函数：

·toString：所有数据类型均可以转换为String类型

·parseInt（）：强制转换为整数，如不能转换则出现NaN;

·parseFloat（）：强制转换为浮点数，不能转换会出现NaN;

·typeof：查看当前类型，返回String/Number/boolean/object/Function/undefined

·isNaN（）：判断被检测表达式转换后是否不是一个数，若不是数，则为true；否则为fasle

特殊数据类型：

Null：程序中无值/无对象，可以给一个变量赋值为null来清除内容

Undefined：声明变量，单位赋值/对象属性不存在

运算符：

算数运算：+，-，*，/，%，++（自增），–（自减）

关系运算：>，>=，<，<=，!=，==

===：全等：类型相同，数值相同

！==：不全等

逻辑运算：与：&&；或：||；非（！）

条件运算：三目运算：表达式？表达式1：表达式2

控制语句：任何复杂的程序都可以通过顺序结构，分支结构，循环结构三种基本程序执行，默认结构为顺序结构

分支结构：if语句；switch-case与break联合使用

循环结构：for循环，while循环，do-while循环

JavaScript对象概述

对象是JavaScript中最重要的API，其中包含最多种对象，比如：内置对象，外部对象（window对象，dom对象），自定义对象

如何使用对象？

对象包含属性和函数，

访问对象的属性：对象.属性访问对象的方法：对象.方法名

常见内置对象：

String对象：

创建对象：var str = "hello"; var str=new String ("hello");

String对象的属性:length

常用方法：大小写转换：x.tolowerCase ; x.toUpperCase()

获取指定字符：x.charAt(index) 返回指定位置的字符

X.charCodeAt(index):返回指定位置的字符的Unicode编码

查询指定字符串：x.indexOf(findstr,[index]); x.lastindexOf(findstr,[index])

使用说明：findstr：查找的字符串；index：开始查找的位置索引，可以省略，如果没有找到则返回-1；lastindexOf：从后面开始找起

获取子字符串：x.substring(start,[end])

使用说明：start：开始位置；end：结束位置

替换子字符串：X.replace（findstr，tostr）

使用说明：findstr：要找的子字符串；tostr：替换的字符串

拆分字符串：x.split(bystr,[howmarny])

使用说明：bystr分割用的字符串；howmarny返回的数组最大长度

Number对象：

Number对象是数值对象，创建方法为var num=123；

常用方法：toFixed（num）转换为字符串，并保留小数点后一定位数

Array对象：

创建数组对象：

var a1 = new Array（）；var a2 =new Array（6）；
var a3 =new Array（100，"a",true）;
var a4 = \[100 ,200,300\];

获取数组元素的个数：.length；

数组长度可变；

数组的倒序与排序：

X.reverse（）反向数组，改变数组X中数值的顺序

X.sort（sortfunc）数组排序：sortfunc：可选项，用来确定元素的函数名称

Math对象：

Math对象用于执行数学任务，无需创建，直接把math作为对象使用可以调用所有的属性和方法

三角函数：Math.sin(x),Math.COS(X),math.tan(x)

计算函数：Math.log(x)…

数值比较函数：

Date对象：

用于处理日期和时间，封装了系统毫秒数

创建方法：var now = new Date（）

常用方法：读写时间毫秒数：getTime（）；setTime（）

读写时间分量:getDate();getDay;setDate();setDay;toString…

RegExp对象

表示正则表达式 var rge = new RegExp（）；

常用方法：

x.replace（regexp，tostr）

x.match(regexp)

x.search(regexp)

exec(str)检索字符串中指定的值，返回找到的值

test(str)检索字符串中指定的值，返回 true 或 false

使用说明：

regexp代表正则表达式或字符串

replace返回替换后的结果

match返回匹配字符串的数组

search返回匹配字符串的首字符位置索引

Function对象

JS中函数就是Function对象，函数名就是指向Function对象的引用，使用函数名就可以访问函数对象

函数的返回值：默认返回undefined，可以使用return返回具体的值

函数的参数：JS的函数没有重载；调用时只要函数名一样，无论传入多少个参数，调用的都是同一个函数；没有接收的实参的参数值是undefined；所有的参数传递给arguments数组对象

Arguments：是一特殊的对象，在函数代码中，表示函数的参数数组，在函数代码中可以使用arguments访问所有参数

–arguments.length函数的参数个数

–arguments[i]:第i个参数

–可以使用arguments实现可变参数的函数

使用Function对象创建函数：

var abc = new Function（"x","y","return(x+y)"）
var result = abc(2,3);
Alert(result)//5
Alert(abc)//Function（"x","y","return(x+y)"）

匿名函数：

Var func = Function（x，y）{return（x+y）}

Eval函数

Eval用于计算表达式字符串，或用于执行字符串中的JS代码

只接收原始字符串作为参数，如果参数中没有合法的表达式和语句，抛出异常

var s1 = “2+3”; eval(s1) //5

外部对象概述

·BOM（Browser Object Model）：

浏览器对象模型，用来访问和操作浏览器窗口，是JavaScript有能力和浏览器"对话"，通过操作BOM，可以动窗口，更改状态栏文本，执行其他不与页面内容发生直接联系的操作

·DOM（Document Object Model）

文档对象模型，用来操作文档，定义了访问和操作HTML文档的标准方法

·WINDOW对象：表示浏览器窗口

常用属性：

Document：窗口中显示的HTML文档对象

History：浏览器窗口的历史记录对象

Location：窗口文件地址对象

Screen：当前屏幕对象

Navigator：浏览器相关信息

常用方法：

alert（）；confirm（）

setTimeout（）；clearTimeout（）

setInterval（）；clearInterval（）

对话框：

alert（str）提示对话框，显示str字符串内容

confirm（str）确认对话框，显示str字符串内容，按"确定"按钮返回true，其他则返回false

定时器：

多用于网页的动态时钟，制作倒计时，跑马灯效果等

周期性时钟：以一定的间隔执行代码，循环往复

一次性时钟：在一个设定的时间间隔之后执行代码，而不是在函数被调用后立即执行

周期性定时器：

setInterval（exp，time） exp：执行语句 time：时间间隔

clearInterval（tID）停止启动的定时器

一次性定时器：

setTimeout（exp，time）exp：执行语句 time：时间间隔，返回已经启动的定时器

clearTimeout（tID）停止启动的定时器

常用属性：

Screen对象：包含有关客户端显示屏幕的信息，常用于获取屏幕的分辨率和色彩 Width/height/availwidth/availHeight

History对象：包含用户访问过的URL

length属性：浏览器历史记录列表中的URL数量

back（）：等同于后退按钮

forword（）：等同于前进按钮

go（num）：等同于单机前后或后退num次

Location对象：

Location对象包含有关当前的URL信息，常用于获取或改变当前浏览的网址

href属性：当前窗口正在浏览器的网页地址

reload（）：重新载入当前网址，等同于刷新按钮

Navigator对象:

包含有关浏览器的信息，常用于获取客户端浏览器和操作系统信息

DOM概述

DOM（document object model）文档对象模型

当网页被加载时，浏览器会创建页面的文档对象模型，通过可编程的对象模型。javaScript 获得了足够的能力来创建动态的 HTML，JavaScript可以改变页面中的所有 HTML 元素，属性，CSS 样式以及对页面中的所有事件做出反应

DOM节点树：DOM模型被构造为对象的数，这棵树的根就是 document 对象

DOM操作包括：查找节点，读取节点信息，修改节点信息，创建新节点，删除节点

读取，修改节点信息：

nodeName：节点名称

元素节点和属性节点：标签或属性的名称

文本节点：永远是text

文档节点：永远的document

nodeType：节点类型

返回数值：若是元素节点，返回1；属性节点：2；

文本节点：3；注解节点：8；文档节点：9

元素节点的内容：

innerText：设置或获取位于对象起始和结束标签内的文本

innerHTML：设置或获取位于对象起始和结束标签内的 HTML

节点属性：

getAttribute（）方法，根据属性名称获取属性的值

SetAttribute（）方法

RemoveAttribute（）

将HTML标记，属性和CSS都对象化

元素节点的样式：

style属性：node.style.color;node.style.fontsize

className属性：动态绑定样式

查询

查询节点：

如果需要操作HTML元素，必须首先找到该元素，查询节点的方式有

通过id查询
通过层次（节点关系）查询
通过标签名称查询
通过name属性查询根据元素的id查询节点：document.getElementById();通过指定的id来返回元素节点，查询整个HTML文档中的任何HTML元素，如果id值错误，返回null

根据层次查询：

parentNode：遵循文档的上下层次结构，查找单个父节点

childNodes：遵顼文档的上下层次结构，查找多个子节点

根据标签名查询：

getElementByTagName（）根据指定的标签名返回所有元素，查找整个HTML文档的所有元素，如果标签名错误，返回长度为0的节点列表

若返回一个节点列表（数组），使用节点列表的length属性获取个数，[index]:定位具体的元素

根据name属性查询：

document.getElementByName（）：根据标签的name属性的值进行查询

增加

创建新节点：document.createElement(name) name:要创建元素的标签名称，返回新创建的节点

添加新节点：parentNode.appendChild(newNode)

newNode:新节点作为父节点的最后一个子节点进行添加

parentNode.insertBefore(newNode,refNode) refNode是参考节点，新节点位于此节点之前添加

删除

删除节点： node.removeChild(childNode):删除某个子节点，childNode必须是 node 的子节点

事件

概述：指页面元素状态改变，用户在操作鼠标或者键盘时触发的动作，具体包括：鼠标事件，键盘事件，状态改变事件…

Event：事件触发后会产生一个 event 对象

事件属性：

鼠标事件：onclick 单击事件 ondblclick 双击事件

onmouseover：鼠标移入事件

onmouseout：鼠标移出事件

onmousedown：鼠标点击事件

onmouseup：鼠标松开事件

event对象：

任何事件触发后会产生一个 event 对象，event 对象记录事件发生时的鼠标位置，键盘按键状态和触发对象等信息

JQuery

JQuery 是一个优秀的 JavaScript 框架，一个轻量级的 JS 库，它封装了 JS,CSS,DOM 提供了一致的，简洁的 API,使用户更加方便的处理HTML，实现动画效果，并且方便为网站提供 Ajax 交互模型，使用户的 HTML 页面保持代码和 HTML 内容分离

使用JQuery

JQuery 的使用步骤：

引入 JQuery 的 js 文件
使用选择器定位操作节点
调用 JQuery 的方法进行操作什么是 JQuery 对象？JQuery 对象本质上是一个 DOM 对象数组，它在该数组上扩展了一些操作数组中元素的方法 Obj.length:获取数组的长度Obj.get(index):获取数组中的某一个 DOM 对象 Obj[index]:等价于obj.get(index)DOM对象转换为 JQuery 对象：$(DOM对象)

JQuery选择器：

JQuery选择器类似于CSS选择器（定位元素），能够实现定位元素，添加行为，使用JQuery选择器能够将内容与行为分离

选择器的分类：基本选择器，层次选择器，过滤选择器，表单选择器

基本选择器：

元素选择器：根据标签来定位元素 $(“标签名”)

类选择器：根据class属性定位元素 $(".class属性名")

Id选择器：根据id属性定位元素 $("#id属性名")

选择器组：定位一组选择器所对应的所有元素 $("#id,name")

层次选择器：

在select1元素下，选中所有满足select2的子孙（后代）元素 $(“select1 select2”)

在select1元素下，选择所有满足select2的子元素

$(“select1>select2”)

过滤选择器：

根据元素的基本特征定位元素，常用于表格和列表

first：第一个元素；last：最后一个元素

not（selector）把 selector 排除在外

even 挑选偶数行 odd 挑选奇数行

eq（index）下标等于index元素

gt（index）下标大于index的元素

lt（index）下标小于index的元素

内容过滤选择器：

根据文本内容定位元素

contains（text）匹配包含给定文本的元素

empty 匹配所有不包含子元素或文本的空元素

可见性过滤选择器：

hidden：匹配所有不可见元素

visible：匹配所有的可见元素

属性过滤选择器：

根据属性定位元素

[attribute]匹配具有 attribute 属性的元素

状态过滤选择器：

根据状态定位元素

表单选择器：

包括：text：匹配文本框 password：匹配密码框…

读写节点：

读写节点的HTML内容：

读入：obj.html() 写出：obj.html(“写出内容”)

读写节点的文本内容：

读入：obj.text() 写出：obj.text(“写出内容”)

读写节点的value属性值：

读入：obj.val() 写出：obj.val(“写出内容”)

读写节点的属性值：

读入：obj.attr(“属性名”) 写出：obj.attr(“属性名”，“属性值”)

增删节点：

创建DOM节点：$(’‘节点内容’’)

插入DOM节点：

parent.append(obj) 作为最后一个子节点添加

parent.prepend(obj) 作为第一个子节点添加

删除DOM节点：

Obj.remove() 删除节点

Obj.remove(selector) 只删除满足 selector 的节点

Obj.empty() 清空节点

样式：

addClass（" "）追加样式

removeClass（" "）移出指定样式

removeClass() 移出所有样式

toggleClass（" "）切换样式

hasClass（""）判断是否有这个样式

css（""）读取css的值

css（"",""）设置多个样式

遍历节点：

children（）取得一个包含匹配的元素集合中的每一个元素的所有子元素的元素集合

parent（） 父节点

事件处理：参考手册

等待页面加载完毕后执行：$(function(){…})

获得事件对象 event

只需要对事件处理函数传递一个参数如：$obj.click(function(e){…}); e 就是事件对象，已经经过了 JQuery 的底层事件对象的封装，封装后的事件对象可以方便的兼容各浏览器

事件的常用属性：

获取事件源：e.target 返回值就是DOM对象

：匹配所有的可见元素