HTML+CSS+JS详解w3c笔记

715 674

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

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

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

HTML注释：

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

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

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

以下这些标签可用在head部分：,<meta>,<link>,<style>,<script>,<base></p><p>作用：文本时网页上的重要组成部分，直接书写的文本会用浏览器默认的样式显示</p><p>文本元素列表：是包含在文本元素中的文本，则会被显示为元素所拥有的样式</p><p>标题是通过<h1>~<h6>标签进行定义的，目的是为了能够以醒目的方式显示，<h1>定义最大标题，<h6>定义最小标题</p><p>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H0qWULYZ-1613216632726)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192107880.png)]</p><p>段落是通过<p>标签进行定义的，<p>元素提供了结构化文本的一种方式，<p>元素对中的文本会以单独的段落显示，与前后文本换行分开，添加一段额外的垂直空白距离，作为行间距</p><p>列表是将具有相似特征或先后顺序的几行文字进行对齐排列，所有列表都是由列表类型和列表项组成</p><p>列表类型：</p><p>有序列表<ol>：用于列出表面上有特定次序的一些项目，其中只能包含列表项<li></p><p>无序列表<ul>：用于列出页面上没有特定次序的一些项目，也只能包含具体列表项元素<li></p><p>列表项：用来表示列表具体的内容<li></p><p>HTML分区元素：</p><p>用于元素的一些分组，常用于页面布局，块分区元素<div></div>,行内分区元素<span></span></p><p>元素显示方式：</p><p>块级元素：默认情况下，块级元素独占一行，即元素前后都会自动换行，比如<p>,<div></p><p>行内元素：不会换行,与其他行内元素位于同一行</p><p><span>元素是内联元素,可用作文本的容器，无特定的含义</p><p><i>元素定义斜体字</p><p><em>定义着重文字</p><p><del>用来定义带删除线的文字</p><p><u>用来定义带下划线的文字</p><p>空格折叠：默认情况下，HTML中的多个空格，多个换行符会压缩成单个空格，即只显示一个空格</p><p>实体引用：空格： ；（小于号）<:<（大于号）>:>；</p><p>使用<img>元素可以将图片添加到页面</p><p>语法：<imgsrc=“url”></p><p>常用属性：width,height</p><p>src指的是"source",原属性的值是图像的URL地址，但是地址值分为绝对路径和相对路径</p><p>绝对路径：文件从最高级目录下开始的完整路径，无论当前路径是什么，使用绝对路径后总能找到要连接的文件</p><p>相对路径：文件的位置是相对于当前的文件位置，包括目录名或指向一个可以从当前目录出发找到的文件</p><p>锚点：文档中某行的一个记号，用于链接到文档中的某个位置</p><p>定义锚点：<aname=“g1”>内容</a></p><p>俩者需对应使用，前后呼应</p><p>表格是由<table>标签来定义的，通常用来组织结构化信息，是被称作单元格的矩形框，按照从左到右，从上到下的顺序排列在一起而形成的，表格的数据保存在单元格里</p><p>创建表格：<table></table></p><p>创建行：<tr></tr></p><p>创建列：<td></td></p><p>表格常用的属性：</p><p>border边框</p><p>width/height宽/高</p><p>align对齐方式</p><p>padding边框与文字之间的距离，内边距</p><p>cellspacing：单元格之间的距离</p><p>跨行属性：rowspan合并行colspan合并列</p><p>行分组：表格看分为3个部分，分别为：表头，表主题，表尾</p><p><table><!--表头--><thead><tr><th></th></tr></thead><!--表主体--><tbody><tr><td></td></tr></tbody><!--表尾--><tfoot><tr><td></td></tr></tfoot></table>HTML表单：表单是用于显示收集信息并提交信息到服务器，表单是一个包含表单元素的区域</p><p>俩要素：form元素，表单控件</p><p>表单是从浏览器向服务器传输数据的手段</p><p>表单元素：</p><p>定义表单使用成对的<form>标记，表示要将此元素中所涵盖的控件中的数据传入到服务器</p><p>主要属性：</p><p>action：表单提交URL；</p><p>method：数据提交方式；</p><p>enctype：表单数据进行编码的方式</p><p>表单控件：由许多不同类型的控件，其是一种HTML元素，是信息输入项，包含</p><p>input元素（具有不同的外观）:文本框，密码框，单选框，按钮…</p><p>其他元素：标签，文本域，下拉选</p><p>input元素</p><p>文本框<inputtype=“text”/></p><p>密码框：<inputtype=“password”/></p><p>主要属性：value：由访问者自由输入任何文本</p><p>Maxlength：限制输入的字符数</p><p>Readonly：设置文本控件的只读</p><p>单选框:<inputtype=“radio”/></p><p>复选框：<inputtype=“checkbox”/></p><p>属性：value：文本，当提交form时，选中单选按钮，则发送服务器</p><p>Name：实现分组，一组单选框或者复选框名称必须相同</p><p>Check：设置选中</p><p>提交按钮：<inputtype="submit"value=“提交”/>传送表单数据给服务器</p><p>重置按钮：<inputtype=“reset”value=“重置”/>清空内容，并设为最初默认状态</p><p>普通按钮：<inputtype=“button”value=""/>执行客户端脚本</p><p>隐藏域：<inputtype=“hidden”/>表单中包含但不希望用户所见</p><p>文件选择框：<inputtype=“file”/>选择上传的文件</p><p>其他元素：</p><p>标签：表单中的文本用于给控件设置显示名称</p><p>语法：<labelfor=“控件ID”>文本</label></p><p>属性：for：设置该文本所关联的控件ID，关联后点击标签等同于点击控件</p><p>文本域：多行文本框</p><p>语法：<textrea></textrea></p><p>属性：cols:指定文本域的列数；rows：指定文本域的行数；readonly：该文本域只读</p><p>下拉选</p><p>语法：</p><p><select><option></option></select>CSS概述什么是CSSCSS是层叠样式表（CascadingStyleSheets），样式定义了如何显示HTML元素，样式通常储存在样式表中，CSS是HTML的化妆师</p><p>内联样式：定义在单个HTML元素中</p><p>内部样式表：定义在HTML的头元素中</p><p>外部样式表：将样式定义在外部的CSS文件中（.css）,由HTML页面引用样式表文件</p><p>内联样式：定义在HTML元素的属性style里面</p><p>css语法：只需要将分号隔开的一个或多个属性作为元素的style属性值，属性值之间用冒号（:）连接，多个属性值之间用分号（;）隔开</p><p>内部样式表：在HTML的<head>元素内部添加<style>元素</p><p>外部样式表：样式定义在独立的CSS文件中，一个纯文本文件，后缀为.css,该文件只包含样式规则</p><p>使用方法：①创建外部样式表文件</p><p>②引用该样式文件</p><p>CSS注释：CSS注释以“/*”开始,以“*/”结束,</p><p>/*这是个注释*/</p><p>元素选择器：能通过元素名来选择CSS作用的目标</p><p>ID选择器：以一种独立于文档元素的方式，它仅作用于id属性的值(#id_name)</p><p>派生选择器：用来选择子元素</p><p>分类：后代选择器：选择某元素的后代（子孙）元素</p><p>子元素选择器：选择某元素的所有子元素</p><p>伪类选择器：用于设置同一个元素在不同状态下的样式</p><p>常用伪类:</p><p>:link向未被访问的超链接添加样式</p><p>:visited向已被访问的添加样式</p><p>:active:向未激活的元素添加样式</p><p>:hover:当鼠标悬停到元素上方时，添加样式</p><p>:focus:当元素获取焦点时，向该元素添加样式</p><p>border：用来设置元素的边框</p><p>四边设置：border：width值style值color值</p><p>单边设置：border-leftborder-rightborder-topborder-bottom</p><p>样式单位：%：百分比in：英寸cm：厘米</p><p>mm:毫米pt磅（1pt=1/72in）</p><p>Px像素1em等于当前字体尺寸</p><p>Overflow：当内容溢出元素边框时</p><p>Visible不裁剪内容，可显示在内容框外</p><p>Hidden裁剪内容，不提供滚动机制</p><p>Scroll裁剪内容，提供滚动机制</p><p>Auto如溢出，提供滚动</p><p>元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。</p><p>内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置</p><p>背景图片：</p><p>background-image：设置背景图片，默认值为none，表示背景上没有放置任何图像，如需设置，则需要起始字符附带图像的url地址</p><p>默认情况下，背景图片是在水平和垂直方向上重复出现的</p><p>background-repeate：可控制背景图片的平铺效果</p><p>repeate：在水平和垂直方向重复</p><p>repeate-x：在水平方向重复</p><p>repeate-y：在垂直方向重复</p><p>norepeate：仅显示一次</p><p>background-position：用于改变背景图片在元素中的位置</p><p>font-size：value字体大小</p><p>font-weight：normal/bold字体加粗</p><p>color：value文本颜色</p><p>Text-align：left/right/center文本排列</p><p>Line-height：value行高</p><p>Text-indent：value首行文本缩进</p><p>border-collapse：合并相邻的边框，设置是否将表格的边框合并为一个边框</p><p>块元素：从上到下显示，可以设置宽高如：<P>,<div>,<h1></p><p>行内元素：从左到右显示，不能设置宽高，如：<span>,<a></p><p>行内块元素：从左到右显示，可以设置宽高，<input>,<img></p><p>除了默认显示效果外，可以用display属性，修改元素的显示方式</p><p>具体修改方式:</p><p>display：none表示不显示该元素，释放其占用的空间</p><p>display：block表示将元素的显示方式设置为块</p><p>display：inline表示将元素的显示方式设置为行内元素</p><p>display：inline-block：表示将元素的显示方式设置为行内块元素</p><p>定义元素框对于其正常位置应该出现的位置或相对于父元素另一个元素相对于浏览器窗口本身的位置</p><p>流定位：页面中的块级元素从上到下依次排列，每一个块级元素都会出现在新的一行，元素框之间的垂直距离，由框的垂直外边距计算得出</p><p>内联元素：在一行中从左到右，水平排列不需要换行，使用的是水平内边距，边框和外边距调整他们的间距</p><p>浮动定位：将元素排除在普通流之外，将浮动元素放置在包含框的左边或者右边，浮动元素依旧包含于框之外，浮动框可以向左或者向右移动，直到外边缘碰到包含框或者另一个浮动框位为止，如需要设置框浮动在包含框的左边或者右边，可以通过float属性实现具体方向的移动</p><p>任何元素都是可以移动的float：none/left/right</p><p>clear清除浮动所带来的影响：clear：none/left/right/both</p><p>相对定位：元素原本所占的空间不释放，元素框会相对于原来的位置偏移某个距离，设置垂直或者水平，让元素相对于它的起点进行移动</p><p>绝对定位：将元素的内容从当前定位中清除，释放空间，并使用偏移量来固定元素的位置，相对于最近的祖先元素，若偏移元素没有已定位的元素，那么它的位置就是相对于body元素的位置</p><p>首先设置position属性，其值为absolute，然后使用left/right/top/bottom设置具体的偏移量</p><p>固定定位：将元素的内容固定在页面的某个位置，元素从普通流中完全移出，不占用页面空间，当用户将页面向下滚动时，元素看不随着移动</p><p>首先设置position属性，其值为fixed，然后使用left/right/bottom/top设置具体的偏移量</p><p>堆叠顺序：一旦修改元素的定位方式，元素可能发生堆叠，可以使用z-index来控制有元素在框中出现的堆叠数值</p><p>Z-index：value数值越大，级别越高，越显示在前</p><p>List-style-type：用于控制列表中列表项标志的一个样式</p><p>无序列表：出现在各列旁边的圆点</p><p>无需列表的取值：none：无标记；disc：实心圆（默认）；circle（空心圆）；square实心方块</p><p>有序列表：可能出现数字，字母或者其他用来排列计数</p><p>有序列表的取值：none：无标记；decimal：数字；</p><p>lower-roman：小写罗马数字upper-roman：大写罗马数字</p><p>list-style-image：使用图像替换列表项，取值为url</p><p>什么是javaScript？</p><p>嵌入在HTML中在浏览器中的脚本语言，具有与java和C语言类似的语言，一种网页的编程技术，用来向HTML页面添加交互行为，直接嵌入HTML页面，由浏览器解释执行代码，不进行预编译</p><p>特点：可以使用任何文本工具编译，由浏览器内置的JavaScript引擎执行代码</p><p>解析执行：事先不编译，逐行执行</p><p>基于对象：内置大量线程对象</p><p>使用：客户端的数据计算，客户端表单合法性验证，浏览器事件触发，网页特殊显示效果制作，服务器的异常数据提交</p><p>嵌入式：在使用Script标签</p><p>文件调用式:代码位于单独的(.js)文件中，html页面引用js文件，在script标签中添加文件的地址（src=""）</p><p>解释性代码，代码错误则页面中无效果，可以打开网页的"检查""错误控制台"来查看错误</p><p>基本语法：由Unicode字符集编写</p><p>注释：单行：//注释内容多行：/*注释内容*/</p><p>语句：表达式，关键字，运算符，大小写敏感，建议使用分号结尾一条语句</p><p>标识符和关键字：</p><p>标识符:不以数字开头的字母，数字，下划线和$组成</p><p>关键字：查看js手册</p><p>没有初始化的变量自动取值为：undefined</p><p>特殊类型：null：空undefined：未定义</p><p>内置对象：Number：数字String：字符串boolean：俩个值true/falseArray数组function：函数</p><p>外部对象：window：浏览器对象document：文档对象</p><p>自定义对象：Object：自定义对象</p><p>String类型:</p><p>由Unicode字符，数字，标点符号组成的字符序列，直接量需要一对单/双引号括起</p><p>Number类型：</p><p>在JavaScript中不区分整型数值和浮点型数值，整型直接量：默认的整数直接量为十进制</p><p>Boolean类型：</p><p>仅有俩个值true/false</p><p>数据类型转换：</p><p>①数据类型之间隐式转换</p><p>②转换函数：</p><p>·toString：所有数据类型均可以转换为String类型</p><p>·parseInt（）：强制转换为整数，如不能转换则出现NaN;</p><p>·parseFloat（）：强制转换为浮点数，不能转换会出现NaN;</p><p>·typeof：查看当前类型，返回String/Number/boolean/object/Function/undefined</p><p>·isNaN（）：判断被检测表达式转换后是否不是一个数，若不是数，则为true；否则为fasle</p><p>特殊数据类型：</p><p>Null：程序中无值/无对象，可以给一个变量赋值为null来清除内容</p><p>算数运算：+，-，*，/，%，++（自增），–（自减）</p><p>关系运算：>，>=，<，<=，!=，==</p><p>===：全等：类型相同，数值相同</p><p>！==：不全等</p><p>逻辑运算：与：&&；或：||；非（！）</p><p>条件运算：三目运算：表达式？表达式1：表达式2</p><p>控制语句：任何复杂的程序都可以通过顺序结构，分支结构，循环结构三种基本程序执行，默认结构为顺序结构</p><p>分支结构：if语句；switch-case与break联合使用</p><p>循环结构：for循环，while循环，do-while循环</p><p>对象是JavaScript中最重要的API，其中包含最多种对象，比如：内置对象，外部对象（window对象，dom对象），自定义对象</p><p>对象包含属性和函数，</p><p>常见内置对象：</p><p>创建对象：varstr="hello";varstr=newString("hello");</p><p>String对象的属性:length</p><p>常用方法：大小写转换：x.tolowerCase;x.toUpperCase()</p><p>获取指定字符：x.charAt(index)返回指定位置的字符</p><p>X.charCodeAt(index):返回指定位置的字符的Unicode编码</p><p>查询指定字符串：x.indexOf(findstr,[index]);x.lastindexOf(findstr,[index])</p><p>使用说明：findstr：查找的字符串；index：开始查找的位置索引，可以省略，如果没有找到则返回-1；lastindexOf：从后面开始找起</p><p>获取子字符串：x.substring(start,[end])</p><p>使用说明：start：开始位置；end：结束位置</p><p>替换子字符串：X.replace（findstr，tostr）</p><p>使用说明：findstr：要找的子字符串；tostr：替换的字符串</p><p>拆分字符串：x.split(bystr,[howmarny])</p><p>使用说明：bystr分割用的字符串；howmarny返回的数组最大长度</p><p>Number对象是数值对象，创建方法为varnum=123；</p><p>常用方法：toFixed（num）转换为字符串，并保留小数点后一定位数</p><p>创建数组对象：</p><p>vara1=newArray（）；vara2=newArray（6）；vara3=newArray（100，"a",true）;vara4=\[100,200,300\];获取数组元素的个数：.length；</p><p>数组长度可变；</p><p>数组的倒序与排序：</p><p>X.reverse（）反向数组，改变数组X中数值的顺序</p><p>X.sort（sortfunc）数组排序：sortfunc：可选项，用来确定元素的函数名称</p><p>Math对象用于执行数学任务，无需创建，直接把math作为对象使用可以调用所有的属性和方法</p><p>三角函数：Math.sin(x),Math.COS(X),math.tan(x)</p><p>计算函数：Math.log(x)…</p><p>数值比较函数：</p><p>创建方法：varnow=newDate（）</p><p>表示正则表达式varrge=newRegExp（）；</p><p>常用方法：</p><p>x.replace（regexp，tostr）</p><p>x.match(regexp)</p><p>x.search(regexp)</p><p>exec(str)检索字符串中指定的值，返回找到的值</p><p>test(str)检索字符串中指定的值，返回true或false</p><p>使用说明：</p><p>regexp代表正则表达式或字符串</p><p>replace返回替换后的结果</p><p>match返回匹配字符串的数组</p><p>search返回匹配字符串的首字符位置索引</p><p>JS中函数就是Function对象，函数名就是指向Function对象的引用，使用函数名就可以访问函数对象</p><p>函数的返回值：默认返回undefined，可以使用return返回具体的值</p><p>函数的参数：JS的函数没有重载；调用时只要函数名一样，无论传入多少个参数，调用的都是同一个函数；没有接收的实参的参数值是undefined；所有的参数传递给arguments数组对象</p><p>Arguments：是一特殊的对象，在函数代码中，表示函数的参数数组，在函数代码中可以使用arguments访问所有参数</p><p>–arguments.length函数的参数个数</p><p>–arguments[i]:第i个参数</p><p>–可以使用arguments实现可变参数的函数</p><p>使用Function对象创建函数：</p><p>varabc=newFunction（"x","y","return(x+y)"）varresult=abc(2,3);Alert(result)//5Alert(abc)//Function（"x","y","return(x+y)"）匿名函数：</p><p>Varfunc=Function（x，y）{return（x+y）}</p><p>Eval函数</p><p>Eval用于计算表达式字符串，或用于执行字符串中的JS代码</p><p>只接收原始字符串作为参数，如果参数中没有合法的表达式和语句，抛出异常</p><p>vars1=“2+3”;eval(s1)//5</p><p>·BOM（BrowserObjectModel）：</p><p>浏览器对象模型，用来访问和操作浏览器窗口，是JavaScript有能力和浏览器"对话"，通过操作BOM，可以动窗口，更改状态栏文本，执行其他不与页面内容发生直接联系的操作</p><p>·DOM（DocumentObjectModel）</p><p>文档对象模型，用来操作文档，定义了访问和操作HTML文档的标准方法</p><p>·WINDOW对象：表示浏览器窗口</p><p>常用属性：</p><p>Document：窗口中显示的HTML文档对象</p><p>History：浏览器窗口的历史记录对象</p><p>Location：窗口文件地址对象</p><p>Screen：当前屏幕对象</p><p>alert（）；confirm（）</p><p>setTimeout（）；clearTimeout（）</p><p>setInterval（）；clearInterval（）</p><p>对话框：</p><p>alert（str）提示对话框，显示str字符串内容</p><p>confirm（str）确认对话框，显示str字符串内容，按"确定"按钮返回true，其他则返回false</p><p>定时器：</p><p>多用于网页的动态时钟，制作倒计时，跑马灯效果等</p><p>周期性时钟：以一定的间隔执行代码，循环往复</p><p>周期性定时器：</p><p>clearInterval（tID）停止启动的定时器</p><p>一次性定时器：</p><p>clearTimeout（tID）停止启动的定时器</p><p>Screen对象：包含有关客户端显示屏幕的信息，常用于获取屏幕的分辨率和色彩Width/height/availwidth/availHeight</p><p>History对象：包含用户访问过的URL</p><p>length属性：浏览器历史记录列表中的URL数量</p><p>back（）：等同于后退按钮</p><p>forword（）：等同于前进按钮</p><p>go（num）：等同于单机前后或后退num次</p><p>Location对象：</p><p>Location对象包含有关当前的URL信息，常用于获取或改变当前浏览的网址</p><p>reload（）：重新载入当前网址，等同于刷新按钮</p><p>Navigator对象:</p><p>包含有关浏览器的信息，常用于获取客户端浏览器和操作系统信息</p><p>DOM（documentobjectmodel）文档对象模型</p><p>当网页被加载时，浏览器会创建页面的文档对象模型，通过可编程的对象模型。javaScript获得了足够的能力来创建动态的HTML，JavaScript可以改变页面中的所有HTML元素，属性，CSS样式以及对页面中的所有事件做出反应</p><p>DOM节点树：DOM模型被构造为对象的数，这棵树的根就是document对象</p><p>DOM操作包括：查找节点，读取节点信息，修改节点信息，创建新节点，删除节点</p><p>读取，修改节点信息：</p><p>nodeName：节点名称</p><p>元素节点和属性节点：标签或属性的名称</p><p>文本节点：永远是text</p><p>文档节点：永远的document</p><p>nodeType：节点类型</p><p>返回数值：若是元素节点，返回1；属性节点：2；</p><p>文本节点：3；注解节点：8；文档节点：9</p><p>元素节点的内容：</p><p>innerText：设置或获取位于对象起始和结束标签内的文本</p><p>innerHTML：设置或获取位于对象起始和结束标签内的HTML</p><p>节点属性：</p><p>getAttribute（）方法，根据属性名称获取属性的值</p><p>SetAttribute（）方法</p><p>RemoveAttribute（）</p><p>将HTML标记，属性和CSS都对象化</p><p>元素节点的样式：</p><p>style属性：node.style.color;node.style.fontsize</p><p>className属性：动态绑定样式</p><p>查询节点：</p><p>如果需要操作HTML元素，必须首先找到该元素，查询节点的方式有</p><p>根据层次查询：</p><p>parentNode：遵循文档的上下层次结构，查找单个父节点</p><p>childNodes：遵顼文档的上下层次结构，查找多个子节点</p><p>根据标签名查询：</p><p>getElementByTagName（）根据指定的标签名返回所有元素，查找整个HTML文档的所有元素，如果标签名错误，返回长度为0的节点列表</p><p>若返回一个节点列表（数组），使用节点列表的length属性获取个数，[index]:定位具体的元素</p><p>根据name属性查询：</p><p>document.getElementByName（）：根据标签的name属性的值进行查询</p><p>创建新节点：document.createElement(name)name:要创建元素的标签名称，返回新创建的节点</p><p>添加新节点：parentNode.appendChild(newNode)</p><p>newNode:新节点作为父节点的最后一个子节点进行添加</p><p>parentNode.insertBefore(newNode,refNode)refNode是参考节点，新节点位于此节点之前添加</p><p>删除节点：node.removeChild(childNode):删除某个子节点，childNode必须是node的子节点</p><p>概述：指页面元素状态改变，用户在操作鼠标或者键盘时触发的动作，具体包括：鼠标事件，键盘事件，状态改变事件…</p><p>Event：事件触发后会产生一个event对象</p><p>事件属性：</p><p>鼠标事件：onclick单击事件ondblclick双击事件</p><p>onmouseover：鼠标移入事件</p><p>onmouseout：鼠标移出事件</p><p>onmousedown：鼠标点击事件</p><p>onmouseup：鼠标松开事件</p><p>event对象：</p><p>任何事件触发后会产生一个event对象，event对象记录事件发生时的鼠标位置，键盘按键状态和触发对象等信息</p><p>JQuery是一个优秀的JavaScript框架，一个轻量级的JS库，它封装了JS,CSS,DOM提供了一致的，简洁的API,使用户更加方便的处理HTML，实现动画效果，并且方便为网站提供Ajax交互模型，使用户的HTML页面保持代码和HTML内容分离</p><p>JQuery的使用步骤：</p><p>JQuery选择器类似于CSS选择器（定位元素），能够实现定位元素，添加行为，使用JQuery选择器能够将内容与行为分离</p><p>选择器的分类：基本选择器，层次选择器，过滤选择器，表单选择器</p><p>基本选择器：</p><p>元素选择器：根据标签来定位元素$(“标签名”)</p><p>类选择器：根据class属性定位元素$(".class属性名")</p><p>Id选择器：根据id属性定位元素$("#id属性名")</p><p>选择器组：定位一组选择器所对应的所有元素$("#id,name")</p><p>层次选择器：</p><p>在select1元素下，选中所有满足select2的子孙（后代）元素$(“select1select2”)</p><p>在select1元素下，选择所有满足select2的子元素</p><p>$(“select1>select2”)</p><p>过滤选择器：</p><p>根据元素的基本特征定位元素，常用于表格和列表</p><p>first：第一个元素；last：最后一个元素</p><p>not（selector）把selector排除在外</p><p>even挑选偶数行odd挑选奇数行</p><p>eq（index）下标等于index元素</p><p>gt（index）下标大于index的元素</p><p>lt（index）下标小于index的元素</p><p>内容过滤选择器：</p><p>根据文本内容定位元素</p><p>contains（text）匹配包含给定文本的元素</p><p>empty匹配所有不包含子元素或文本的空元素</p><p>可见性过滤选择器：</p><p>hidden：匹配所有不可见元素</p><p>visible：匹配所有的可见元素</p><p>属性过滤选择器：</p><p>根据属性定位元素</p><p>[attribute]匹配具有attribute属性的元素</p><p>状态过滤选择器：</p><p>根据状态定位元素</p><p>表单选择器：</p><p>包括：text：匹配文本框password：匹配密码框…</p><p>读写节点：</p><p>读写节点的HTML内容：</p><p>读入：obj.html()写出：obj.html(“写出内容”)</p><p>读写节点的文本内容：</p><p>读入：obj.text()写出：obj.text(“写出内容”)</p><p>读写节点的value属性值：</p><p>读入：obj.val()写出：obj.val(“写出内容”)</p><p>读写节点的属性值：</p><p>读入：obj.attr(“属性名”)写出：obj.attr(“属性名”，“属性值”)</p><p>增删节点：</p><p>创建DOM节点：$(’'节点内容’’)</p><p>插入DOM节点：</p><p>parent.append(obj)作为最后一个子节点添加</p><p>parent.prepend(obj)作为第一个子节点添加</p><p>删除DOM节点：</p><p>Obj.remove()删除节点</p><p>Obj.remove(selector)只删除满足selector的节点</p><p>Obj.empty()清空节点</p><p>样式：</p><p>addClass（""）追加样式</p><p>removeClass（""）移出指定样式</p><p>removeClass()移出所有样式</p><p>toggleClass（""）切换样式</p><p>hasClass（""）判断是否有这个样式</p><p>css（""）读取css的值</p><p>css（"",""）设置多个样式</p><p>遍历节点：</p><p>children（）取得一个包含匹配的元素集合中的每一个元素的所有子元素的元素集合</p><p>parent（）父节点</p><p>事件处理：参考手册</p><p>等待页面加载完毕后执行：$(function(){…})</p><p>获得事件对象event</p><p>只需要对事件处理函数传递一个参数如：$obj.click(function(e){…});e就是事件对象，已经经过了JQuery的底层事件对象的封装，封装后的事件对象可以方便的兼容各浏览器</p><!--786464602A3F3F6767673E232620747F733E737F7D3F737F7E64757E643F22213F202921263F21263F22212123232424264F2929252725282523213E6378647D7C3563F369E --> <script src="/wp-content/themes/zibll/ggjs/2.js"></script> </div> <div class="text-center theme-box muted-3-color box-body separator em09">THE END</div> </div> </article> <div class="widget_text zib-widget widget_custom_html"> <div class="textwidget custom-html-widget"> <div class="theme-box" style="height:99px"> <nav class="article-nav"> <div class="main-bg box-body radius8 main-shadow"> <a href="https://www.axdbkk.com/html_3/zaixiansheji/23740/list/1.html"> <p class="muted-2-color"><i class="fa fa-angle-left em12"></i><i class="fa fa-angle-left em12 mr6"></i>上一篇</p> <div class="text-ellipsis-2">大学生网页设计制作作业实例代码(全网最全,建议收藏)HTML+CSS+JS</div> </a> </div> <div class="main-bg box-body radius8 main-shadow"> <a href="#"> <p class="muted-2-color">下一篇<i class="fa fa-angle-right em12 ml6"></i><i class="fa fa-angle-right em12"></i></p> <div class="text-ellipsis-2">已是最后一篇文章</div> </a> </div> </nav> </div> </div> </div> <div class="widget_text zib-widget widget_custom_html"> <div class="textwidget custom-html-widget"> <div class="theme-box"> <div class="box-body posts-mini-lists zib-widget"> <ul class="list-inline scroll-x mini-scrollbar tab-nav-theme"> <li class="active"><a class="post-tab-toggle" data-toggle="tab" href="javascript:;" tab-id="post_mini_0">相关文章</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade active in" tab-id="post_mini_0"> <!--xgwz_ks --><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.axdbkk.com/html_3/zaixiansheji/23740/list/1.html" rel="noopener">大学生网页设计制作作业实例代码(全网最全,建议收藏)HTML+CSS+JS<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.axdbkk.com/html_3/zaixiansheji/23740/list/2.html" rel="noopener">HTML+CSS+JS详解w3c笔记<span class="focus-color"></span></a></h2></div></div><!--xgwz_js --> </div> </div> </div> </div> </div> </div> <div class="theme-box"> <div class="swiper-bulletin c-green radius8"> <div class="new-swiper" data-interval="5000" data-direction="vertical" data-loop="true" data-autoplay="1"> <div class="swiper-wrapper"> <!--ggl_ks --><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>1.HTML+CSS+JavaScript网页登录界面制作(附源代码)而DOM树操作说白了就是对HTML内容进行修改 或者说是修改了DOM树的数据 当DOM树数据被修改后,上面提到的网页显示过程就会重新执行一遍 由于JavaScript会影响DOM树的构建,所以一般放在Html文件的底部引用,这样有利于网页尽快显示出来 下面介绍一个html+css+js的登录页面设计,附源代码; <!--wz_ -->https://blog.csdn.net/m0_72934718/article/details/142744938<!--_wz --></div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>2.HTML+CSS+JS实现的简单应用小案例分享javascript技巧这篇文章主要为大家分享四个用HTML+CSS+JS实现的简单应用小案例,有:猜数字、表白墙、切换日夜间模式和待办事项,需要的可以参考一下+ 目录 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!【 如果你想靠AI翻身,你先需要一个靠谱的工具!】 1.猜数字 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!--wz_ -->https://www.jb51.net/article/238595.htm<!--_wz --></div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>3.?创意网页:动态彩色泡泡页面(HTML+CSS+JS)简单好用为了让这些文字和祝福语更加生动和有趣,我设计了一个创意的网页,通过动态效果和互动性,为用户带来与众不同的体验。 命运之光 2024/03/20 2310 ?创意网页:迎接高考的倒计时网页( ?好看好用 ?)HTML+CSS+JS 设计视频csshtml动画 高考是每个学生都会经历的一次重要考试,它标志着一个人学业的结束<!--wz_ -->https://cloud.tencent.com/developer/article/2398930<!--_wz --></div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>4.web前端大作业HTML+CSS动漫网页主题代码实现**网站布局方面**:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。 **网站程序方面**:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。 <!--wz_ -->https://www.jianshu.com/p/5b450699b1af<!--_wz --></div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>5.html+css+js实现一个网页小demoxuetingluckyhtml+css+js 实现一个网页小demo js 从一个1.html跳转到另一个2.html页面并携带一定的数据 最近开始涉及js的学习,由于之前有一些html和css的基础就开始制作一些静态页面利用js添加交互效果使得变得动态。 我所做的就是从产品展示页面添加某个产品的数量,点击购物车图标就可以跳转到订单页面查看所加物品数量和总<!--wz_ -->https://www.cnblogs.com/chenxueting/p/14066641.html<!--_wz --></div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>6.HTML5+CSS3网页设计入门.pdfHTML5+CSS3网页设计入门.pdf 147页VIP内容提供方:微传科技 大小:21.13 MB 字数:约16.49万字 发布时间:2024-04-01发布于河北 浏览人气:32 下载次数:仅上传者可见 收藏次数:0 需要金币:*** 金币 (10金币=人民币1元)HTML5+CSS3网页设计入门.pdf 关闭预览 想预览更多内容,点击免费在线预览全文 <!--wz_ -->https://max.book118.com/html/2024/0328/5230012002011132.shtm<!--_wz --></div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>7.200套web前端期末大作业HTML+CSS+JavaScript网页设计实例企业这五年来做了200多套(HTML+CSS+JS)网页设计的学生期末大作业,都是给学生定制的都符合学校或者学生考试期末作业的水平,都是div+css框架原创代码写的,有的有js,有的视频+音乐+flash的等元素的插入… 200多例HTML5期末考核大作业源码包含个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、<!--wz_ -->https://blog.51cto.com/14890362/3317960<!--_wz --></div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>8.大学生动漫网页设计模板下载海贼王乔巴网页作业成品动漫网页大学生动漫网页设计主题内容为海贼王乔巴介绍,共5个页面,采用DIV CSS布局制作,使用CSS设置了网页背景图,栏目导航选中及鼠标经过效果灯。压缩包内含CSS、html源代码及图片素材文件。 学生网页 网页作业 html作业 学生网页作品 网页成品 2020-11-28 上传 大小:3.00MB 所<!--wz_ -->https://www.iteye.com/resource/LILIXING_COM-13200356<!--_wz --></div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>9.使用html+css+js实现一个静态页面(含源码)(110套) 】超炫酷的Echarts大屏可视化源码:【 Echarts大屏展示大数据平台可视化(150套) 】HTML+CSS+JS实例代码:【 ?HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中】免费且实用的WEB前端学习指南:【 web前端零基础到高级学习视频教程 120G干货分享】关于作者: 历任研发工程师,技术组长,教学总监;曾<!--wz_ -->https://zhuanlan.zhihu.com/p/552341800<!--_wz --></div><!--ggl_js --> </div> </div> </div> </div> </div> </div> </main> <div class="container fluid-widget"></div> <footer class="footer"> <div class="container-fluid container-footer"> <ul class="list-inline"> <li class="hidden-xs" style="max-width: 300px;"> <p><a class="footer-logo" href="" title=""> <img src="/wp-content/themes/zibll/img/thumbnail-sm.svg" data-src="/wp-content/themes/zibll/img/logo_dark.png" switch-src="/wp-content/themes/zibll/img/logo.png" alt="爱学大百科" class="lazyload" style="height: 40px;"> </a></p> <div class="footer-muted em09">爱学大百科仅供用于学习和交流，欢迎您的体验。</div> </li> </ul> </div> </footer> <script type="text/javascript"> window._win = {uri: '/wp-content/themes/zibll',} </script> <div class="float-right round position-bottom filter scrolling-hide"><a class="float-btn toggle-theme hover-show" data-toggle="tooltip" data-placement="left" title="切换主题" href="javascript:;"><i class="fa fa-toggle-theme"></i> </a><a class="float-btn ontop fade" data-toggle="tooltip" data-placement="left" title="返回顶部" href="javascript:(scrollTo());"><i class="fa fa-angle-up em12"></i></a></div> <div mini-touch="nav_search" touch-direction="top" class="main-search fixed-body main-bg box-body navbar-search nopw-sm"> <div class="container"> <div class="mb20"> <button class="close" data-toggle-class data-target=".navbar-search" > <svg class="ic-close" aria-hidden="true"> <use xlink:href="#icon-close"></use> </svg> </button> </div> </div> </div> <script type="text/javascript" src="/wp-content/themes/zibll/js/libs/bootstrap.min.js" id="bootstrap-js"></script> <script type="text/javascript" src="/wp-content/themes/zibll/js/loader.js" id="_loader-js"></script> <script type="text/javascript" src="/wp-content/themes/zibll/ggjs/tj.js"></script> </body> </html>