前端小记 HTML 网络传输的三大基石 URL,HTTP协议,HTML
URL就是统一资源定位符是www的统一资源定位标志，就是指网络地址
HTTP协议：http是一个简单的请求响应协议，它通常运行在TCP上，它指定了客户端可能发送给服务器什么样的信息以及的到什么响应。请求和响应的消息头以及ASCII码形式给出，而消息内容则具有一个类似MIME的格式，这个简单模型是早期Web成功的原因。
HTML：超文本标记语言（是一种描述网页的语言）
总结：学习HTML就是学习各种各样的标签 ，然后组成一个页面，这个页面可以被浏览器解析，解析完以后可以在浏览器中将页面进行展示。
HTML的标准结构 1 2 3 4 5 6 <html > <head > </head > <body > this is my first html.... </body > </html >
html_head_body html标签 定义html文档，这个元素我们浏览器看到后就明白这是html文档了，所一你的其他元素要包裹在他里面，标签限定了文档的开始点和结束点，在他们之间是文档的头部和主体
head标签 head标签里面放的是页面的配置信息
head标签用于定义文档的头部，他是所有头部元素的容器。
head中的元岁可以引用脚本、只是浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包含文档的标题、在web中的位置以及和其他文档的关系等。绝大多数的文档头部包含的数据都不会真正作为内容都显示给读者
下面这些标签可以用在head部分：
body标签 body元素是定义文档的主题。body元素是包含文档的所有内容（比如文本、超链接、图像、表格和列表等）body是用在网页中的一种html标签，标签是用在网页中的一种html标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本，图片，音频，视频等各种内容
模仿一下别人的页面也是很好的学习方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE html > <html > <head > <title > 百度一下，你就知道</title > <meta name ="author" content ="2925886492@qq.com" /> <meta name ="keywords" content ="欧猫子;前端;学习笔记" /> <meta name = "description" content ="欧猫子前端学习笔记" /> <meta charset ="utf-8" /> <link rel ="shortcut icon" herf ="https://www.baidu.com/favicon.ico" type ="image/x-icon" /> </head > <body > 你好 </body > </html >
body中可用的标签 文本标签 h1-h6标签
1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 文本标签</title > </head > <body > <h1 > 学习前端</h1 > <h2 > 学习前端</h2 > </body > </html >
显示效果
hr横线标签 width设置宽度，align设置位置
1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 文本标签</title > </head > <body > <hr width ="300px" align ="center" /> <hr width ="30%" align ="center" /> </body > </html >
p标签设置段落
 （还有很多类似的实体字符，需要的在网上搜索）谁设置tab效果
b标签加粗
i标签倾斜
u标签下划线
del标签删除效果
pre标签：预编译标签在页面上显示原样效果
br换行标签
font标签字体标签
标签就是带<>这样的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html > <head > <title > 标题</title > <meta name ="author" content ="oyy0v0@163.com" /> <meta name ="keywords" content ="oyy0v0;oyy;学习笔记" /> <meta name ="description" content ="学习起那段笔记" /> <meta charset ="UTF-8" /> </head > <body > <hr width ="300px" align ="left" /> <i > this is i</i > <br /> <b > this is b</b > <br /> <u > this is u</u > <br /> <del > this is del</del > <br /> <font > </font > this is my first </body > </html >
多媒体标签 img标签中的src引入图片位置，可以使本地也可以是网络,width设置宽度,height设置高度,title设置鼠标悬浮在图片上的时候提示语，alt设置图片加载失败的提示语
embed标签是音频标签 src引入音频位置
embed也是视频标签src引入视频位置,width设置宽度,height设置高度
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html > <head > <title > 标题</title > <meta name ="author" content ="oyy0v0@163.com" /> <meta name ="keywords" content ="oyy0v0;oyy;学习笔记" /> <meta name ="description" content ="学习起那段笔记" /> <meta charset ="UTF-8" /> </head > <body > <img src ="./img/1.png" width ="500px" height ="500px" title ="test" alt ="失败提示语" > </body > </html >
超链接标签 a标签中的href设置跳转的目标位置,target=“_self”在自身页面打开,target=“_blank”在空白页面打开
a标签中可以写一些文字或者图片等作为超链接的样子
1 2 3 4 5 6 7 8 9 10 11 12 13 <html > <head > <title > 标题test02</title > <meta charset ="UTF-8" > <meta name ="author" content ="oyy0v0@163.com" /> </head > <body > <a href ="./test01.html" target ="_self" > 跳到test01</a > <a href ="./test01.html" target ="_blank" > 跳转到test01</a > </body > </html >
设置锚点 当一个页面太长的时候，就需要设置锚点，然后可以在一个页面的不同位置之间进行跳转
先在a标签中设置锚点的名字name
然后在某个位置开始超链接
如果在不同页面也可以设置锚点
1 <a href ="设置锚点.html#1F" > 设置锚点的一楼</a >
列表标签 无序列表
ul标签里面有type可以设置列标签图标的样式 type=“squre”
如果想更换图标的样式需要借助css技术
ul标签里面需要再加一个li标签来展示无序列的每一项
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html > <head > <title > test04</title > <meta name ="author" content ="oyy0v0@163.com" /> <meta charset ="UTF-8" /> </head > <body > <h1 > 起床要做的事情</h1 > <ul type ="squre" > <li > 刷牙</li > <li > 洗脸</li > </ul > </body > </html >
有序列表
ol标签里面可以设置type可以设置列表的标号,start可以设置 /
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html > <head > <title > test04</title > <meta name ="author" content ="oyy0v0@163.com" /> <meta charset ="UTF-8" /> </head > <body > <h1 > 起床要做的事情</h1 > <ul type ="squre" > <li > 刷牙</li > <li > 洗脸</li > </ul > <ol type ="1" start ="3" > <li > 学习编程</li > <li > 学习前端</li > </ol > </body > </html >
表格标签 在页面布局很规整的时候，可以利用表格
table标签首先可以设置属性：默认是没有边框的，border设置边框大小,cellspacing设置单元格和边框之间的空隙
align设置居中那些,background设置背景图片，bgcolor设置背景颜色,rowspan行合并，colspan列合并
然后里面还有
tr标签用来表示行，
td表示单元格,
th标签用来表示特殊的单元格（比如带颜色之类的）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <html > <head > <title > test05</title > <meta name ="author" content ="oyy0v0@163.com" > <meta charset ="UTF-8" > </head > <body > <table border ="1px" bgcolor ="darkseagreen" cellspacing ="0px" width ="400px" height ="400px" > <tr align ="center" bgcolor ="bisque" > <th > 学号</th > <th > 姓名</th > <th > 年级</th > <th > 成绩</th > </tr > <tr align ="center" > <td > 1001</td > <td > 丽丽</td > <td > 19</td > <td rowspan ="3" align ="center" > 90.5</td > </tr > <tr align ="center" > <td colspan ="2" > 2006</td > <td > 30</td > </tr > <tr > <td > 3007</td > <td > 小明</td > <td > 18</td > </tr > </table > </body > </html >
框架 内嵌框架 内嵌框架式用于在网页中嵌入一个网页并让他在网页中显示
添加内嵌框架的语法：
1 <iframe src ="URL" > </iframe >
URL指定独立网页的路径
在iframe中用src指定路径，height设定网页高度，width设定宽度
1 2 3 4 5 6 7 8 9 10 <html > <head > <title > test06</title > <meta name ="author" content ="oyy0v0@163.com" > <meta charset ="UTF-8" > </head > <body > <iframe src ="./test02.html" width ="500px" height ="500px" > </iframe > </body > </html >
框架集合 frameset元素可以定义一织多个窗口（框架）。每个框架有独立的文档。在其中最简单的应用中，frameset要还俗仅仅会规定在框架集中存在多少列或多上行。你必须使用cols和rows属性
框架集合和body是并列的概念，不要将集合框架集合放在body中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <html > <head > <title > test07</title > <meta name ="author" content ="oyy0v0@163.com" /> <meta charset ="UTF-8" /> </head > <frameset rows ="20%,*,30%" > <frame /> <frameset cols ="30%,40%,*" > <frame > <body > <h1 > haowuliao</h1 > <h1 > haowuliao</h1 > <h1 > haowuliao</h1 > <h1 > haowuliao</h1 > <h1 > haowuliao</h1 > <h1 > haowuliao</h1 > </body > </frame > <frame src ="index.html" /> <frame > aaaaa</frame > </frameset > <frameset cols ="50%,*" > <frame /> <frame /> </frameset > </frameset > </html >
效果，这东西被废弃了有些浏览器识别不出来了。
表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，是网页具有交互功能。一般表单设计在一个Html文本当中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到浏览器上，经过平服务器上处理后，再讲用户所需要的信息传送回克浏览器上，这样网页就具有了交互性。
一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框，按钮，叫做控件，表单很像容器，它能够容纳各种各样的控件。
1 <form action ＝"url " method =get|post name ="myform" > </form >
-name：表单提交时的名称
在form表单中可以有
input标签，属性是type=“text”文本框 name=“wd”
input标签，属性是type=“submit”提交按钮 value=“百度一下”
表单元素 form 表单中可以发入的标签就是表单元素
input标签很广泛，通过type属性的不同值，来表现不同的形态。
readonly属性只读
disabled禁用属性，完全不用，不能正常提交
type=“password” 密码框效果是录入的信息不可见
单选按钮type=“radio”
同一组单选的必须通过name属性来控制，就是说同一组的单选题，名字一定要相同，然后value一定要不同，这样后台就知道你选了什么了，默认选中就是check=“check”
多选按钮就是
type=“checkbox”也是同一组多选题必须用同样的name，也是要不同的value
当多个选项提交的时候键值对是用&连接的（实际状况是这样的）
type=“file”就是文件
type=“hidden”就是隐藏域，在隐藏域中会放一些默认提交的值之类的
type=“button”普通按钮就是可以点击，没什么别的效果了，学了js后可以加入事件
type=“reset”重置按钮，可以将页面恢复到初始状态
type=“image”特殊按钮，图片按钮
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <html > <head > <title > test08</title > <meta name ="author" content ="oyy0v0@163.com" /> <meta charset ="UTF-8" /> </head > <body > <form action ="url" method ="get" > <input type ="text" name ="username" > <br /> <input type ="password" name ="password" > <br > <input type ="submit" value ="提交" /> <br > <input type ="radio" name ="option1" value ="苹果" /> 苹果 <input type ="radio" name ="option1" value ="橙子" /> 橙子<br /> <input type ="checkbox" name ="option2" value ="1" /> 健身 <input type ="checkbox" name ="option2" value ="2" /> 跑步 <input type ="checkbox" name ="option2" value ="3" /> 做操<br /> <input type ="reset" value ="重置" /> </form > <h1 > nihao </h1 > </body > </html >
下拉列表
select标签首先有name属性其次有selected和multiple属性选择，一个是默认选中一个是多选
多行文本框利用css样式来控制大小不可变
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <html > <head > <title > test09</title > <meta name ="author" content ="oyy0v0@163.com" > <meta charset ="UTF-8" > </head > <body > <label for ="sport" > 运动</label > <select name ="sports" id ="sport" > <option value ="吃饭" > 吃饭</option > <option value ="运动" > 运动</option > <option value ="听音乐" > 听音乐</option > </select > </body > </html >
testarea标签 style属性来控制多行文本的大小style=“resize: none;”
用rows和cols属性来控制行和列
lable标签一般会在想要获取焦点（也就是鼠标选中的效果）的标签上加入的一个id属性，然后label中的for属性跟id配合使用
1 <lable for "uname "> 用户名：</lable > <input type ="text" name ="username" id ="uname" />
type=“email”
type=“url”
type=“color”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <input type ="number" min ="1" max ="10" step ="3" value ="4" /> 1<input type ="range" min ="1" max ="10" name ="range" step ="3" /> 10 <input type ="date" /> <input type ="month" /> <input type ="week" /> <input type ="submit" />
html5新增属性 1 2 3 4 5 6 7 8 9 <input type ="text" autofocus ="autofocus" /> <input type ="text" required ="required" />
CSS css做到了样式和元素分离的效果
css用来修饰页面，降低代码的耦合性
css的书写方式 1、内联样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > </title > </head > <body > <h1 style ="color: deeppink;font-family: '宋体';" > 这是一个h1标题</h1 > </body > </html >
2、内部样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > </title > <style type ="text/css" > h1 { color : royalblue; font-family : 宋体; } </style > </head > <body > <h1 > 这是一个标题</h1 > </body > </html >
3、外部样式 首先创建一个css文件
1 2 3 4 h1 { color :red; font-family :宋体; }
在创建html
1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > </title > <link rel ="stylesheet" type ="text/css" href ="css/mystyle.css" /> </head > <body > <h1 > 这是一个标题</h1 > </body > </html >
实际开发中用的是外部样式，优先级也是就近原则
选择器 基本选择器:元素选择器 基本选择器：元素选择器
通过元素的名字进行定位，他会获取页面上所有这个原色，无论藏的多深都能能获取到
格式：
元素名字{
css样式；
}
1 2 3 4 5 6 h1 { color :red; } i { color :blue; }
基本选择器：类选择器 不同类型的标签使用相同的类型（就是不同class的使用相同的类型）
基本选择器：id选择器 应用场合可以定位唯一的一个元素
不同的标签确实可以使用相同的id，但是一般我们会进行人为控制，让id是可以唯一定位到一个元素
1 2 3 4 5 6 7 8 9 <!DOCTYPE html > <html > <head > <link rel ="stylesheet" type ="text/css" href ="css/mycss.css" /> </head > <body > <h1 id ="myid" > 这是一个标题</h1 > </body > </html >
1 2 3 #myid { color : yellow; }
关系选择器：div和span div可以理解为一个塑料袋，div属于块级元素，span属于行内元素，没有换行效果，span里面的内容占多大，span包裹的区域就有多大
div和span用于页面布局
div
关系选择器 关系选择器：后代选择器：只要是这个元素的后代，样式都会发生变化
就比如
这样的话div下面的所有h1标签样式都会改变
关系选择器：子代选择器
只改变子标签的样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > </title > <style type ="text/css" > div >h1 { color : royalblue; } span >h1 { color : yellow; } </style > </head > <body > <div > <h1 > 这是标题</h1 > <span > <h1 > 这是标题</h1 > </span > </div > </body > </html >
这样的话div>h1就只会将div的h1变成蓝色
属性选择器 属性选择器顾名思义就是根据type的类型使用同样的样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > </title > <style type ="text/css" > input [type="password" ] { background-color : red; } input [type="text" ] [value="oyy" ] { background-color : yellow; } </style > </head > <body > <form > 用户名：<input type ="text" value ="oyy" /> 用户名2：<input type ="text" value ="oyy" /> 密码：<input type ="password" value ="123123" /> <input type ="submit" value ="登录" /> </form > </body > </html >
伪类选择器 目的是向某些选择器添加特殊效果
一般伪类选择器都用在超链接上
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > </title > <style type ="text/css" > .mycls :hover { color : red; } </style > </head > <body > <h1 class ="mycls" > 我是标题</h1 > </body > </html >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > </title > <style type ="text/css" > a :link { color : yellow; } a :hover { color : red; } a :active { color : blue; } a :visited { color : green; } </style > </head > <body > <a href ="index.html" > 超链接</a > </body > </html >
浮动 浮动设计的初衷是为了解决文字环绕图片问题，浮动后一定不会将文字挡住。
CSS的浮动使元素脱离文档，按照指定的方向（左或者右发生移动），知道他的边缘碰到包含狂或者另一个浮动框的边框为止
脱离文档流
文档流式文档中可显示对象在排列时所占用的位置、空间，而脱离文档流就是在页面中不占位置了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > </title > <style type ="text/css" > img { float : left; } </style > </head > <body > <img src ="img/java核心技术.jpg" /> 浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。 </body > </html >
浮动原理： 当把框1向右浮动使，它脱离文档流并且向右移动，知道他的右边缘碰到包含框的右边缘：
当再次把狂医向左浮动时，它脱离文档流向左移动，直到它的左边框包含框的左边框，这个时候因为框1不处于文档流，所以它不占据空间，实际上覆盖住框2，令框2 从视图中消失
如果浮动元素的高度不同，那么就有可能在浮动的时候会被其他浮动的元素“卡住”
浮动的语法 在css中float属性设置不同的值会有不同的效果
left值就是元素向左浮动
right值就是元素向右浮动
none默认值就是不移动
效果：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 文本标签</title > </head > <body > <div style ="background-color: pink;" > <div style ="width: 100px;height: 100px;background-color: cadetblue;" > 11</div > <div style ="width: 200px;height: 200px;background-color: coral;" > 22</div > <div style ="width: 300px;height: 300px;background-color: aqua;" > 33</div > </div > </body > </html >
所以用浮动的时候要考虑是否对其他的元素有浮动的影响
消除浮动的影响 方式1：给浮动的父节点加入一个属性overflow:hidden
方式2：给父节点加一个高度，让粉色div”撑起来“
方式3：被影响的div加入一个属性clear:both
定位 position属性指定了元素的定位类型 ，
不同的值会产生不同的效果
absolute:生成绝对 定位的元素，相对于static定位以外的第一个父元素进行定位。元素通过“left”,”top”,”right”以及“bottom”属性进行规定
fixed:生成绝对 定位的元素，相对于浏览器窗口进行定位。元素通过“left”,”top”,”right”以及“bottom”属性进行规定。
relative：生成相对 定位的元素，相对于其他正常位置进行定位，因此“left:20”会向元素的left位置增加20个像素。
static：默认值，没有定位，元素会出现在正常的流中
静态定位(static) 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 文本标签</title > </head > <body > <img src ="img/18.jpg" style ="position: static;" /> </body > </html >
相对定位（relative) 用之前：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 文本标签</title > </head > <body > <div style ="width: 500px;height: 500px;background-color: pink;" > <div style ="width: 100px;height: 100px;background-color: bisque;" > </div > <div style ="width: 100px;height: 100px;background-color: green;" > </div > </div > </body > </html >
用之后：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 文本标签</title > </head > <body > <div style ="width: 500px;height: 500px;background-color: pink;" > <div style ="width: 100px;height: 100px;background-color: bisque;position: relative;bottom: 10px;right: 20px;" > </div > <div style ="width: 100px;height: 100px;background-color: green;" > </div > </div > </body > </html >
绝对定位（absolute） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style type ="text/css" > #outer { width : 500px ; height : 500px ; background-color :pink; margin-left :300px ; } #div01 { width : 100px ; height : 100px ; background-color : cornflowerblue; position :absolute; left :30px ; top :50px ; } #div02 { width :100px ; height :100px ; background-color : coral; } </style > </head > <body > <div id ="outer" > <div id ="div01" > 111</div > <div id ="div02" > 222</div > </div > </body > </html >
效果：
看到的效果：蓝色div相对body产生的唯一，相对body进行位置的改变，然后蓝色div发生位移以后，原位置得到了释放。橙色移动上去了！
原本蓝色应该在下面的。
实际开发中，我们往往让蓝色div在粉色div中发生位移效果“
配合定位来使用：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style type ="text/css" > #outer { width : 500px ; height : 500px ; background-color :pink; margin-left :300px ; position : relative;//设置一个相对定位 } #div01 { width : 100px ; height : 100px ; background-color : cornflowerblue; position :absolute; left :30px ; top :50px ; } #div02 { width :100px ; height :100px ; background-color : coral; } </style > </head > <body > <div id ="outer" > <div id ="div01" > 111</div > <div id ="div02" > 222</div > </div > </body > </html >
当给一个元素设置了绝对定位的时候，它相对谁变化呢？
他会向上一级找到父节点是否有定位，如果找到了body也没有定位，那么就相对body进行变化，如果父级节点有定位（绝对定位，相对定位，固定定位），但是一般我们会配合使用父级为相对定位，当前元素绝对定位，这样元素就会相对父级位置产生变化，无论上面的哪一种，都会释放原来的位置，然后其他元素会占用那个位置。
开发中建议使用：父级节点relative定位，子级节点使用绝对定位。
固定定位 (fixed) 应用场合：在页面过长的时候，将某个元素固定在浏览器的某个位置上，当拉动滚动条的时候，这个位置不动。
代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style type ="text/css" > #mydiv { width :50px ; height :400px ; background-color : black; position : fixed; right :0px ; top :300px ; } </style > </head > <body > <div id ="mydiv" > </div > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > <p > 你好</p > </body > </html >
盒子模型 页面上有很多元素，元素之间的布局、设计 依靠盒子模型：
所有HTML元素可以看做盒子，在CSS中，box model这一术语是用来设计和布局时使用的。
CSS模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容。
盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。
Margin（外边距）：清除边框外的区域，外边距是透明的
Border（边框）：围绕在内边距和内容外的边框
Padding(内边距)：清除内容周围的区域，内边距是透明的
Content（内容）：盒子的内容，显示文本和图像
没有盒子模型 ：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style type ="text/css" > div { width :100px ; height : 100px ; background-color : antiquewhite; margin-left : 100px ; border : 4px red solid; } </style > </head > <body > <div > 我是div</div > </body > </html >
使用了盒子模型：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style type ="text/css" > *{ margin : 0px ; border : 0px ; padding : 0px ; } #outer { width : 440px ; height : 450px ; background-color : lightblue; margin-left : 100px ; margin-top : 100px ; padding-left : 60px ; padding-top : 50px ; } #mydiv { width : 170px ; height : 150px ; background-color : pink; padding-top : 50px ; padding-left : 30px ; } </style > </head > <body > <div id ="outer" > <div id = "mydiv" > 我是div</div > </div > </body > </html >
JS 引入 JavaScript是 一种由Netscape（网景）de LiveScript发展而来的原型化继承的面向对象的动态 类型的区分大小写的客户端 脚本语言
主要目的是为了解决服务器端语言。
JavaScript的组成包含ECMAScript、DOM、BOM。
JS是一种运行于浏览器端上的小脚本语言，可以实现网页如文本内容动，数据动态变化和动画特效等。
特点 JS是运行在浏览器上的一种脚本语言
脚本语言
脚本语言是一种简单的程序，规模小，不需要运行，运行快 ，是由一些ASCLL字符构成，可以使用任何一种文本编辑器编写。脚本语言是指在web浏览器内有解释器执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。一些程序语言如C,C++,JAVA等必须经过编译，将源代码翻译成二进制的可执行文件之后才能进行，而脚本语言不需要实现编译，只要一个和它相适应的解释器就行
基于对象的语言
面向对象有封装继承多态这三个特点。而“基于对象”是使用对象 ，但是无法利用现有的对象模版产生新的对象类型，也就是说“基于对象”没有继承特点，也就没了多态。
事件驱动
在网页中 执行了某种操作的动作，被称为“事件”，比如按下鼠标，移动窗口，选择菜单都可以被视为事件。当事件发生后，可能会引起相应的事件响应。
简单性
变量类型是采用的是弱类型，并未使用严格的数据类型。
var a,b,c; a=123;b=“asd”;c=b;
安全性
JS不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互
跨平台性
JS依赖于浏览器本身和操作平台无关，只要计算机安装了支持JS的浏览器，JS就能正常运行。
JS的引入方式 内嵌式引入方式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > function fun1 ( alert ("你好" ) } </script > </head > <body > <input type ="button" value ="点我呀" onclick ="fun1()" /> </body > </html >
这种缺点：
我们定义的JS代码只能在当前一个页面中使用，代码复用度低，可维护性低
JS和HTML混在一个文件中，可阅读性差
链接式引入 将JS代码放在外部JS文件中，利用script引入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" src ="js/myjs.js" > </script > <script type ="text/javascript" > function fun1 ( alert ("你好" ) } </script > </head > <body > <input type ="button" value ="点我呀" onclick ="fun1()" /> <input type ="button" value ="点我呀" onclick ="fun2()" /> </body > </html >
这样代码复用性高，更易于维护代码
在一个页面上可以同时引入多个文件，每个文件的引入都要使用一个独立的script标签，内嵌式和链接式引入不能使用同一标签。
JS的数据类型和运算符 JS的数值类型 1 数值型：
number整数和浮点数统称为数值。
2 字符串型：
String由0,1个或者多个字符组成的序列。
3 空（null）值：
表示没有值，用于定义空或者不存在的引用。
4 逻辑值
boolean用true或者false表示
5 未定义（undefined）值
它是一个保留字，表示变量虽然已经声明，但是没有赋值
6 JS除了上述五中基本数据类型之外，JS还支持复合数据类型Object,复合数据类型包括对象和数组两种。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > var i = [1 ,2 ,3 ]; alert (i); alert (typeof i); </script > </head > <body > </body > </html >
JS中的运算符号 JS中的运算符号大部分和JAVA相同，在这里说一下特殊的运算符号
关于 / 和% JS中，数字类型都是number,除法结果如果没有小数位，直接就是一个整数，如果有小数位，才是浮点数
JS中如果出现除0那么结果是infinity，而不是报错
JS取余数运算对于浮点数仍然有效，如果和0取余数，结果是NaN(not a number)
关于+ +同时也是连接运算符，看两端的变量类型，如果都是number那么就是算数中的加法，如果有字符串，那额就是连接符号，如果是布尔类型和number相加，那么就会将true转化为1 false转化为0
关于== 先比较类型，如果类型一致，在比较内容，如果类型不一致，会强制转换成number在比较内容
关于===等同符 数据类型不同直接返回false，如果类型相同 才会比较内容
JS中的流程控制 JS中的流程控制和java中是一样的，也是if else switch while for do-while都是一样的
JS中的函数的使用 类似于java中的方法，JS也可以定义一些函数，JS中主要以function作为函数关键字，具备函数名和参数列表，但是没有访问修饰符，也没有返回值类型关键字和异常列表。
函数定定义的三种方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > function fun1 ( alert ("你好" ); } var fun2 = function ( alert ("你真的很好" ); } var fun3 = new Function ("alert('你真的非常好');" ); fun1 (); fun2 (); fun3 (); </script > </head > <body > </body > </html >
函数参数和返回值 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > function fun1 (a,b,c ){ alert ("a:" +a); alert ("b:" +b); alert ("c:" +c); } fun1 (1 ,2 ); </script > </head > <body > </body > </html >
JS中数组的使用 JS数组创建的四种方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > var arr = new Array (); arr[0 ] = 1 ; console .log (arr); var arr2 = new Array (5 ); arr2[0 ]=12 ; arr2[1 ]='true' ; console .log (arr2); var arr3 = new Array ("asdf" ,10 ,20.3 ,true ); console .log (arr3); var arr4 = ("asdf" ,10 ,20.3 ,true ); console .log (arr4); </script > </head > <body > </body > </html >
JS中数组元素和长度使用时的特征 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > var arr =[11 ,22 ,33 ]; console .log (arr); console .log (arr[0 ]); console .log (arr.length ); arr.length =5 ; console .log (arr); arr[9 ]=99 ; console .log (arr); </script > </head > <body > </body > </html >
数组的遍历方式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > var arr = [3 ,2 ,425 ,52 ,54 ,43 ,1 ,21 ]; for (var i =0 ;i<arr.length ;i++){ console .log (arr[i]); } for (var i in arr){ console .log (arr[i]); } </script > </head > <body > </body > </html >
数组的常用方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > var arr = [12 ,2 ,2 ,3 ,23 ,221 ,24 ,5 ,536 ]; var index = arr.indexOf (2 ); console .log (index); var arr1 = ['sdf' ,'saw' ,'fafa' ]; var arr2 = ['asdf' ,'sdvg' ,'fdsfg' ]; var arr3 = arr1.concat (arr2); console .log (arr3); var arr4 = arr1.concat (arr2,arr3); console .log (arr4); var string = ['sed' ,'sdf' ,'ffdg' ]; var string1= string.join (); console .log (string1); var string2 = string.pop (); console .log (string2); string.push ('app' ); console .log (string2); string.reverse (); console .log (string); var ss = string.shift (); console .log (ss); string.unshift ('add' ); console .log (string); var son = string.slice (1 ,3 ); console .log (son); var son1 = string.splice (1 ,3 ); console .log (son1); string.splice (1 ,0 ,12 ); console .log (string); </script > </head > <body > </body > </html >
数组的排序 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > var arr = ['sda' ,'dfs' ,'fdsf' ,'few' ]; arr.sort (); console .log (arr); var numbers = [12 ,23 ,3412 ,13 ,31 ,23 ]; numbers.sort (); console .log (function (a,b ){ return b-a; }); console .log (numbers); </script > </head > <body > </body > </html >
JS中的对象 JS的常用对象 JS是基于对象的脚本语言，但是没有封装，继承，多态，JS中有一些浏览器直接识别并使用的对象，常见的对象有Array,String对象，Math对象，Number对象，Date对象等等。
String和java中的String很类似，
方法：
方法
描述
charAt()
返回在指定位置的字符
charCodeAt()
返回在指定的位置的字符的Unicode编码
concat()
连接两个或更多字符串，并返回新的字符串
fromCharCode()
将Unicode编码转为字符
indexOf()
返回某个指定的字符串值在字符串中首次出现的位置
includes()
查找字符串中是否包含指定的子字符串
lastIndexOf()
从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置
match()
查找找到一个或多个正则表达式的匹配
repeat()
复制字符串的指定次数，并将他们连接在一起返回
replace()
在字符串中查找匹配的字符串，并替换与正则表达式匹配的字符串
search()
查找与正则表达式相匹配的值
slice()
提取字符串的片段，并在新的字符串中返回被提取的部分
split()
把字符串分割为字符串数组
substr()
从起始索引号提取字符串中返回被提取的部分
substring()
提取字符串中两个指定的索引号之间的字符
valueOf()
返回某个字符串对象的原始值
toString()
返回一个字符串
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > var str = "hello js" ; var c = str.charAt (6 ); console .log (c); var a = "hi" ; var b = "good" ; var c = "China" ; var d =c.concat (a,b); console .log (d); var e = "asdf" ; var f = e.repeat (3 ) console .log (f); var g = "hellotll" ; var h = g.substr (1 ,5 ); console .log (h); console .log (h.length ); var testStr = "var x = 10" ; eval (testStr); console .log (x); </script > </head > <body > </body > </html >
Number的常用属性和方法（包装类）
属性
属性
描述
Number.MAX_VALUE
最大值
Number.MIN_VALUE
最小值
Number.NaN
非数字
Number.NEGATIVE_INFINITY
负无穷，在溢出时返回
Number.POSTIVE_INFINITY
正无穷，在溢出时返回
Number.EPSILON
表示1和比最接近1且大于1的最小Number之间的差别
数字方法
方法
描述
Number.parseFloat()
将字符串转化为浮点数，和全局方法parseFloat()作用一致
Number.parseInt()
将字符串转换成整形数字，和全局方法parseInt()作用一致
Number.isFinite()
判断传递的参数是否为有限数字
Number.isInteger()
Number.isNaN()
Number.isSafeInteger()
Math对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > console .log (Math .round (3.54 )); console .log (Math .max (1 ,2.3 ,5.6 )); console .log (Math .min (1 ,2 ,3 )); console .log (Math .random ()); console .log (Math .sqrt (16 )); console .log (Math .floor (3.14 )); console .log (Math .ceil (3.01 )); var start = 10 ; var end = 16 ; var result = Math .floor (Math .random ()*(end-start+1 )+start); console .log (result); </script > </head > <body > </body > </html >
Date对象
Date对象用于处理日期与时间
创建Date对象：new Date()
以下四种方法同样可以创建Date对象
1 2 3 4 var d = new Date(); var d = new Date(milliseconds); var d = new Date(dateString); var d = new Date(year,month,hours,minutes,seconds,milliseconds);
其他方法
方法名
方法描述
getDate()
从Date对象返回一个月中的某一天（1~31）
getDay()
从Date对象返回一周中的某一天（0~6）
getFullYear()
从Date对象以四位数字返回年份
getHours()
返回Date对象的小时（0~23）
getMilliseconds()
返回Date对象的毫秒（0~999）
getMinutes()
返回Date对象的分钟（0~59）
getMonth()
返回Date对象返回月份（0~11）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > var today = new Date (); var d1 = new Date ("October 13,2004 11:12:00" ); var d2 = new Date (79.5 ,24 ); console .log (today) console .log (d1); console .log (d2); var d5 = new Date (2048 ,0 ,13 ,16 ,51 ,20 ,123 ); console .log (d5); console .log (d5.getYear ()); console .log (d5.getFullYear ()); Date .prototype format = function (fmt ){ var o = { "M+" :this .getMonth ()+1 , "d+" :this .getDate (), "h+" :this .getHours (), "m+" :this .getMinutes (), "s+" :this .getSeconds (), "q+" :Math .floor ((this .getMonth ()+3 )/3 ), "S" :this .getmilliseconds () }; } </script > </head > <body > </body > </html >
JS中自定义对象 JS除了一些常用方法和类以外，允许我们自定义对象，在JS中自定义对象有三种可用的语法格式，分别为：
1、调用系统的构造函数创建对象
2、自定义构造函数创建对象
3、字面量的方式创建对象
第一种语法：调用系统的构造函数创建对象（Object)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > var obj = new Object (); obj.name ="oyy" ; obj.age =12 ; obj.gender ="男" ; obj.eat =function (food ){ console .log (this .name +"正在吃" +food) } console .log (obj.name ); obj.eat ("蛋糕" ); </script > </head > <body > </body > </html >
第二种语法：自定义构造函数创建对象（function）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > function Person (pname,page ){ this .pname =pname; this .page =page; this .eat =function (food ){ console .log (this .page +"岁的" +this .pname +"正在吃" +food); } } var p1 = new Person ('oyy' ,12 ); console .log (p1.page ); p1.eat ('蛋糕' ); </script > </head > <body > </body > </html >
第三种语法：字面量的方式创建对象（JSON）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > var person={ name :"随便" , gender :"男" , eat :function (food ){ console .log (this .name +"正在吃" +food) } } console .log (person.name ); console .log (person.gender ); person.eat ("馒头" ) </script > </head > <body > </body > </html >
JS中原型的使用 当我们用构造方法创建一个类时，在内存内会预先调用构造方法创建一个对象，
这对象我们称之为原型对象，
构造方法对象中有一个prototype属性指向该对象，原型对象中有一个constructor属性指向构造方法，获得一个类的原型对象可以通过类名.prototype的方式获得。
构造方法和原型的关系
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" > function Person (pname,page ){ this .pname =pname; this .page =page; this .eat =function (food ){ console .log (this .pname +"正在吃" +food); } } console .log (Person ); console .log (Person .prototype </script > </head > <body > </body > </html >
当前类对象和原型的关系
当前类的每一个对象内部有一个 proto 的一个属性，指向他的原型，当我们用对象获取属性和调用方法时，如果当前对象中没有，那么他就会去所对应的原型对象中去找，也就是说，我们通过对原型的操作可以实现为一个类所有的对象添加属性和方法 。
合理：因为所有的对象都来自于原型对象。
JS中的原型链 一个类的原型是一个Object类的对象，也就是说，原型也有一个proto 属性，指向Object的原型对象，也就是说
现在有一个Person类，然后还有一个Person类的原型对象，然后这个原型对象又指向了Object然后这个 Object又指向了Object的构造器
但是在Object里面就算没有添加属性和方法没有prototype属性也会继续指向Obect的原型构造器
JS中的事件 什么是事件
可以被浏览器侦测到的人为或者浏览器的行为，人对浏览器或者浏览器对网页做了什么事情，JS可以根据不同行为，绑定一些不同相应代码处理，来让浏览器和人的行为之间有一个交互
事件的绑定和触发
给页面上的元素先绑定事件，然后通过行为触发
常见的事件
属性
描述
DOM
onclick
当用户点击某个对象时调用的事件语句
2
oncontextmenu
当用户点击鼠标右键打开上下文菜单时触发
ondblclick
当用户双击某个对象时调用的事件句柄
2
onmousedown
鼠标按钮被按下
2
onmouseenter
当鼠标指针移动到元素上触发
2
onmouseleave
当鼠标指针移出元素时触发
2
onmousemove
鼠标被移动
2
onmouseover
鼠标移到某元素上
2
oumouseout
鼠标从某元素移开
2
oumouseup
鼠标按键被松开
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style > .d1 { height : 100px ; width : 100px ; background-color : aqua; } </style > <script > function fun1 ( console .log ("双击" ); } function fun2 ( console .log ("鼠标按下" ); } function fun3 ( console .log ("鼠标抬起" ); } function fun4 ( console .log ("鼠标进入" ); } function fun5 ( console .log ("鼠标离开" ); } function fun6 ( console .log ("鼠标移动" ) } </script > </head > <body > <div class ="d1" ondblclick ="fun1()" onmousedown ="fun2()" onmouseup ="fun3()" onmouseenter ="fun4()" onmouseleave ="fun5()" onmousemove ="fun6()" > </div > </body > </html >
键盘事件
属性
描述
DOM
onkeydown
某个键盘按键被按下
2
onkeypress
某个键盘按键被按下并松开
2
onkeyup
某个键盘按键被松开
2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > function fun1 ( console .log ("按钮按下" ) } function fun2 ( console .log ("按钮抬起" ) } function fun3 ( console .log ("按钮按下并抬起" ) } </script > </head > <body > <input type ="text" onkeydown ="fun1()" onkeypress ="fun3()" onkeyup ="fun2()" /> </body > </html >
表单事件
属性
描述
DOM
onblur
元素失去焦点时触发
2
onchange
该事件在表单元素的内容改变时触发（input,keygen,select和textarea）
2
onfocus
元素获取焦点时触发
2
onfocusin
元素即将获取焦点时触发
2
onfocusout
元素即将失去焦点时触发
2
oninput
元素获取用户输入时触发
3
onreset
表单重置时触发
2
onsearch
用户向搜索域输入文本时触发()
onselect
用户选取文本时触发（input和textarea)
2
onsubmit
表单提交时触发
2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > function fun1 ( console .log ("获取焦点" ); } function fun2 ( console .log ("失去焦点" ); } function fun3 ( console .log ("正在输入" ); } function fun4 ( console .log ("内容改变" ); } function fun5 (sel ){ console .log ("内容发生了改变" +sel.value ); } function fun6 ( alert ("发生了提交事件" ); return true ; } function fun7 ( console .log ("发生了 重置事件" ); return true ; } </script > </head > <body > <form method ="get" action ="https://www.baidu.com" onsubmit ="return fun6()" onreset ="return fun7()" > <input name ="" value ="" type ="text" onfocus ="fun1()" onblur ="fun2()" oninput ="fun3()" onchange ="fun4()" /> <br /> <select name ="city" onchange ="fun5(this)" > <option selected > 请选择城市</optgroup > <option value ="1" > 北京</option > <option value ="2" > 广州</option > <option value ="3" > 重庆</option > <option value ="4" > 襄阳</option > </select > <br /> <input type ="submit" value ="提交数据" /> <input type ="reset" value ="重置数据 " /> </form > </body > </html >
页面加载事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > function testFun ( var in1= document .getElementById ("i1" ); var v1 = in1.value ; console .log (v1); } </script > </head > <body onload ="testFun()" > <input type ="text" value ="测试文字" id ="i1" /> </body > </html >
BOM编程 认识BOM和DOM 什么是BOM
BOM是Browser Object Model的简写，即浏览器对象模型。
BOM有一系列对象组成，是访问、控制、修改浏览器的属性的方法
BOM没有统一标准（每种客户端都可以自定标准）
BOM的顶层是window对象
什么是DOM
DOM是Document Obect Model的简写，即文档对象模型。
DOM用于XHTML，XML文档的应用程序接口(API)
DOM提供一种结构化的文档描述方法，从而使HTML内容使用结构化的方式显示。
DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法
DOM标准是由w3c制定和维护的。DOM是跨平台与跨语言的。
DOM的顶层是document对象
DOM和BOM的关系
DOM也是归BOM管的
BOM编程就是把整个浏览器抽象成一个对象（window），这个对象总有很多的属性和放发，访问这些属性或者调用这些放发就可以控制浏览器做出…行为
DOM编程就是把浏览器当前页面对应的文档抽象成一个对象（document），这个对象中有很多关于操作文档的一些属性和方法，访问这些属性和方法的时候，我们就可以通过代码动态控制页面上显示的内容
BOM是为了操作浏览器出现的API，window是其根对象。
DOM是为了操作文档出现的API，document是其根对象。
window对象及常用方法 什么事window对象
Window对象描述
Window对象简单理解就是把浏览器抽象成一个对象，它表示一个浏览器窗口或一个框架。在客户端JS中，window对象时全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法 ，可以把那个窗口的属性作为全局变量来使用 。例如，可以只写document，而不必写window.document。同样，可以把当前窗口对象的方法当做函数来使用，如只写alert(),而不必写Window.alert()。
除了上面列出的属性和方法，window对象还实现了核心JS所定义的所有全局属性和方法。Window对象的window属性和self属性引用的都是它自己。当你明确的引用当前窗口，而不仅仅是隐式的引用它，可以使用这两个属性。除了这两个属性外，parent属性、top属性以及frame[] 数组都引用了与当前Window对象相关的其他Window对象。
Window对象属性 （属性了解即可）
属性
描述
closed
返回窗口是否已被关闭
defaultStatus
设置或返回窗口状态栏中的默认文本
document
对Document对象的只读引用。
frames
返回窗口中所有命名的框架。该集合是Window对象的数组，每个Window对象在窗口中含有一个框架
history
对History对象的只读引用。
innerHeight
返回窗口文档显示区的高度
innerWidth
返回窗口文档显示区的宽度
localStorage
在浏览器中存储key/value对。没有过期时间
length
设置或返回窗口中的框架数量
location
用于窗口或框架的Location对象。
name
设置或返回窗口名称
navigator
对Navigator对象的只读引用，
opener
返回对创建此窗口的窗口引用
outerHeight
返回窗口的外部高度，包含工具和滚动条
outerWidth
返回窗口的外部宽度，包含工具和滚动条
pageXOffset
设置或返回当前页面相对于窗口显示区左上角的X的位置
pageYOffset
设置或返回当前页面相对于窗口显示区左上角的Y的位置
parent
返回父窗口
screen
对Screen对象的只读引用
screenLeft
返回相对于屏幕窗口的x坐标
screenTop
返回相对于屏幕窗口的y坐标
screenX
返回相对于屏幕窗口的x坐标
sessionStorage
在浏览器中存储key/value对。在关闭窗口或标签页之后将会删除这对数据
screenY
返回相对于屏幕窗口的y坐标
self
返回对当前窗口的引用。等价于Window属性
status
设置窗口状态栏的文本
top
返回最顶层的父窗口
Window对象方法 （常用）
方法
描述
alert()
显示带有一段消息和一个确认按钮的警告框
blur()
把键盘焦点从顶层窗口移开
clearInterval()
取消由setInterval()设置的timeout.
clearTimeout()
取消由setTimeout()方法设置的timeout
close()
关闭浏览器窗口
confirm()
显示一段消息以及确认按钮和取消按钮的对话框
createPopup()
创建一个pop_up窗口
focus()
把键盘焦点给予一个窗口
getComputedStyle()
返回一个Selection对象，表示用户选择的文本范围或光标的当前位置
matchMedia()
盖房发用来检查media query语句，他返回一个MediaQueryList对象
moveBy()
可相对窗口的当前坐标把他移动指定的像素
moveTO()
把窗口左上角移动到一个指定的坐标
open()
打开一个新的浏览器窗口或查找一个已命名的窗口
print()
打印当前窗口的内容
prompt()
显示可提供用户输入的对话框
resizeBy()
按照指定的像素调整窗口的大小
resizeTo()
把窗口的大小调整到指定的宽度和高度
scrollBy()
按照指定的像素来滚动内容
scrollTo()
把内容滚动到指定的坐标
setInterval()
按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout()
在指定的毫秒数后调用函数或计算表达式
stop()
停止页面载入
Window的三种弹窗方式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > function fun1 ( window .alert ("你好呀" ); var con = window .confirm ("确定删除***吗" ); console .log (con); var message = window .prompt ("请输入名字" ); console .log (message); } </script > </head > <body > <input type ="button" value ="测试按钮" onclick ="fun1()" /> </body > </html >
定时器的使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > var intervalIDS = new Array (); function startInterval ( var intervalID = window .setInterval ( function ( var today = new Date (); var hour = today.getHours (); var minutes = today.getMinutes (); var seconds = today.getSeconds (); var str = hour+"时" +minutes+"分" +seconds+"秒" ; var ta = document .getElementById ("timeArea" ); ta.value = str; }, 1000 ); intervalIDS.push (intervalID); } function stopInterval ( while (intervalIDS.length >0 ){ window .clearInterval (intervalIDS.shift ()); } } var timeoutIDS = new Array (); function startTimeout ( var timeoutID = window .setTimeout ( function ( var today = new Date (); var today = new Date (); var hour = today.getHours (); var minutes = today.getMinutes (); var seconds = today.getSeconds (); var str = hour+"点" +minutes+"分" +seconds+"秒" ; console .log (str) }, 5000 ); timeoutIDS.push (timeoutID); } function stopTimeout ( while (timeoutIDS.length >0 ){ window .clearTimeout (timeoutIDS.shift ()); } } </script > </head > <body > <input type ="text" id ="timeArea" /> <br /> <input type ="button" value ="开始" onclick ="startInterval()" /> <input type ="button" value ="结束" onclick ="stopInterval()" /> <input type ="button" value ="开始1" onclick ="startTimeout()" /> <input type ="button" value ="结束1" onclick ="stopTimeout()" /> </body > </html >
open和close方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > function fun1 ( window .open ("https://www.baidu.com" ); } function fun2 ( window .close (); } </script > </head > <body > <input type ="button" value ="开始" onclick ="fun1()" /> <input type ="button" value ="结束" onclick ="fun2()" /> </body > </html >
location对象 location对象，是window对象的一个属性，代表浏览器上URL地址栏，使用location对象可以操作地址栏
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > function fun1 ( console .log (location.host ); console .log (location.hostname ); console .log (location.port ); console .log (location.href ); location.href ="https://www.baidu.com" ; } </script > </head > <body > <input type ="button" value ="开始" onclick ="fun1()" /> </body > </html >
history对象
history对象是window对象的一个属性，代表浏览器访问历史记录，通过history的操作我们可以实现翻阅浏览器历史网页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > function fun1 ( window .history .forward (); } function fun2 ( history.back (); } function fun3 ( history.go (2 ); } </script > </head > <body > <a href ="a.html" target ="_self" > pageA</a > <input type ="button" value ="前" onclick ="fun1()" /> <input type ="button" value ="后" onclick ="fun2()" /> </body > </html >
screen和navigator
screen代表屏幕，navigator代表浏览器软件本身，通过这两个对象可以获得屏幕和浏览器软件的一些信息
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script > function fun1 ( console .info (window .screen .width ) console .info (window .screen .height ) console .info (navigator.userAgent ) console .info (navigator.appName ) } </script > </head > <body onload ="fun1()" > </body > </html >
DOM编程 什么是DOM编程
简单来说DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程
什么是document
document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在
document对象如何获取
document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document，根据html代码结构特点，document对象本身是一种属性结构的文档对象
DOM节点分类node
节点对象：Node,document对象中的每一个分支节点都是一个node对象，他有三个子类
元素节点Element 如
属性节点Attribute 如： href=“链接地址”
文本节点Text 如：我的链接
DOM操作的内容
1、查询元素（获取元素，进而操作元素，或者元素属性，文本（）
2、操作文本
3、操作属性
4、操作元素
5、操作CSS样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > 页面分析</title > </head > <body > x <div id ="d1" style ="width: 100px;height: 100px; border: 1px solid red;" > 1a <span > hello</span > 2b <span > thank you</span > 3c <span > thank you very much</span > 4d </div > y </body > </html >
树状结构图分析
画完这些树状图之后就能明白DOM编程是如何操作的了
Node节点常用的属性和方法
属性名称
类型
说明
nodeName
String
节点名称
nodeValue
String
节点值
nodeType
Number
节点类型
parentNode
Node
父节点
firstChild
Node
第一个子节点
lastChild
Node
最后一个子节点
childNodes
NodeList
所有子节点
previousSibling
Node
前一个节点
nextSibling
Node
后一个节点
ownerDocument
Document
获得该节点所属的文档对象
attributes
Map
代表一个节点的属性对象
Node节点的方法
方法名称
返回值
说明
hasChildNodes()
Boolean
当前节点是否有子节点
appendChild(node)
Node
往当前节点上添加子节点
removeChild(node)
Node
删除子节点
replaceChild(oldNode,newNode)
Node
替换子节点
insertBefore(newNode,Node)
Node
在指定节点的前面插入新节点
直接获取节点 直接获取节点的几种方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > 页面分析</title > <script > function fun1 ( var element1 = document .getElementById ("d1" ); console .log (element1); element1.innerText ="这是我的div" ; } function fun2 (className ){ var elements = document .getElementsByClassName (className); console .log (elements); for (var i =0 ;i<elements.length ;i++){ console .log (elements[i]); } } function fun3 ( var elements = document .getElementsByTagName ("input" ); console .log (elements); for (var i =0 ;i<elements.length ;i++){ console .log (elements[i]); } } function fun4 ( var elements = document .getElementsByName ("hobby" ); console .log (elements); for (var i =0 ;i<elements.length ;i++){ console .log (elements[i]); } } </script > </head > <body > <div id ="d1" class ="a" > 这是第一个div</div > <div id ="d2" class ="a" > 这是第二个div</div > <div id ="d3" class ="a" > 这是第三个div</div > <input id ='i1' class ="b" name ="name1" /> <div id ="d4" class ="b" > 这是第四个div</div > <div id ="d5" class ="b" > 这是第五个div</div > 爱好： <input type ="checkbox" name ="hobby" value ="1" /> 篮球 <input type ="checkbox" name ="hobby" value ="2" /> 足球 <input type ="checkbox" name ="hobby" value ="3" /> 羽毛球 <hr /> <input type ="button" value ="id值获取" onclick ="fun1()" /> <input type ="button" value ="class属性值获取" onclick ="fun2()" /> <input type ="button" value ="标签名获取" onclick ="fun3()" /> <input type ="button" value ="name属性值获取" onclick ="fun4()" /> </body > </html >
操作节点属性 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > 页面分析</title > <script > function fun1 ( var node = document .getElementById ("in1" ); console .log (node.type ); console .log (node.value ); node.type ="button" ; node.value ="你好水电费是的富商的 丰富沙发发as" ; console .log (node.getAttribute ("type" )); console .log (node.getAttribute ("value" )); node.setAttribute ("type" ,"button" ); node.setAttribute ("value" ,"大家好" ); } </script > </head > <body > <input type ="text" value ="你好呀" id ="in1" > <hr /> <input type ="button" value ="变" onclick ="fun1()" /> </body > </html >
操作节点样式 通过style.css样式名和通过设置class属性两种方式实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > 页面分析</title > <style > #div { width : 100px ; height : 100px ; border : 1px solid red; } .a { background-color : lightblue; color : blue; font-size : 40px ; } </style > <script > function fun1 ( var element = document .getElementById ("div1" ); element.style .width ="200px" ; element.setAttribute ("class" ,"a" ); } </script > </head > <body > <div id ="div1" > 你好呀 </div > <hr /> <input type ="button" value ="测试" onclick ="fun1()" /> </body > </html >
操作标签文本 innerHtml操作双标签中的HTML
innerText操作双标签中间的Text
value 操作表单标签值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > 页面分析</title > <style > div { border : 1px solid red; width : 200px ; height : 200px ; } </style > <script > function fun1 ( var element1 = document .getElementById ("d1" ); console .log ("innerText>>>" +element1.innerText ); console .log (element1.innerHTML ); var element2 = document .getElementById ("l1" ); console .log (element2.value ); } function fun2 ( var element1 = document .getElementById ("d1" ); element1.innerHTML ="<h1>一刻也不能分割</h1>" ; var element2 = document .getElementById ("l1" ); element2.value ="你好" ; } </script > </head > <body > <div id ="d1" > a <span > 文字</span > b </div > <input type ="text" value ="sb" id ="" l1 /> <input type ="button" value ="获取内容" onclick ="fun1()" /> <input type ="button" value ="修改内容" onclick ="fun2()" /> </body > </html >
增加删除节点 创建元素createElement()
增加元素appendChild()
删除元素removeChiild()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > 页面分析</title > <style > #d1 { border : 1px solid red; width : 80% ; height : 200px ; } </style > <script > function fun1 ( var div1=document .getElementById ("d1" ); var in1=document .createElement ("input" ); in1.setAttribute ("type" ,"text" ); in1.setAttribute ("value" ,"请输入内容" ); var in2 = document .createElement ("input" ); in2.setAttribute ("type" ,"password" ); in2.setAttribute ("value" ,"123456789" ); var in3 = document .createElement ("input" ); in3.setAttribute ("type" ,"button" ); in3.setAttribute ("value" ,"删除" ); var br = document .createElement ("br" ); in3.onclick =function ( div1.removeChild (in1); div1.removeChild (in2); div1.removeChild (in3); div1.removeChild (br); } div1.appendChild (in1); div1.appendChild (in2); div1.appendChild (in3); div1.appendChild (br); } </script > </head > <body > <div id ="d1" > </div > <input type ="button" value ="增加" onclick ="fun1()" /> </body > </html >
案例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > 页面分析</title > <style > #outerDiv { width : 200px ; height : 200px ; border : 1px solid gold; background-color : grey; text-align : center; margin-top : 200px ; margin-left : 200px ; } #outerDiv input { width : 50px ; height : 50px ; margin : 20px ; } </style > <script > function fun1 ( var outerDiv = document .getElementById ("outerDiv" ); var left = Math .floor (Math .random ()*1000 ); var top = Math .floor (Math .random ()*500 ); outerDiv.style .marginTop =top+"px" ; outerDiv.style .marginLeft =left+"px" ; } function fun2 ( alert ("congratulation" ) } </script > </head > <body > <div id ="outerDiv" > <h3 > do you love java?</h3 > <input type ="button" value ="是" onclick ="fun2()" /> <input type ="button" value ="否" onmouseover ="fun1()" /> </div > </body > </html >
echarts使用 认识Echarts
Echarts，一个使用JS实现的开源可视化库，可以流畅的运行在PC和移动设备商，兼容当前绝大部分浏览器
，底层以来矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表
Echarts的组件
echarts中各种内容，被抽象为“组件”。例如，echarts中至少有这些组件：
series(系列，一组数值以及他们映射成的图)
xAxis(直角坐标系x轴)
yAxis(直角坐标系y轴)
tooltip(提示框组件)
toolbox(工具栏组件)
title（标题）
legend(图例)
echarts快速使用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <!DOCTYPE html > <html style ="height: 100%;" > <head > <meta charset ="UTF-8" > <title > 页面分析</title > <script type ="text/javascript" src ="echarts-en.min.js" > </script > <script > function showdata ( var dom = document .getElementById ("container" ); var myChart = echarts.init (dom); var app={}; option=null ; option={ legend : {}, tooltip : {}, dataset : { source : [ ['product' ,'第一季度' ,'第二季度' ,'第三季度' ,'第四季度' ], ['茉莉' ,43.3 ,85.8 ,93.7 ,99.9 ], ['茉莉' ,43.3 ,85.8 ,93.7 ,99.9 ], ['茉莉' ,43.3 ,85.8 ,93.7 ,99.9 ], ['茉莉' ,43.3 ,85.8 ,93.7 ,99.9 ], ['茉莉' ,43.3 ,85.8 ,93.7 ,99.9 ] ] }, xAxis : {type : 'category' }, yAxis : {}, series : [ {type : 'bar' }, {type : 'bar' }, {type : 'bar' }, {type : 'bar' } ] }; ; if (option && typeof option === "object" ){ myChart.setOption (option,true ); } } </script > </head > <body style ="height: 100%; margin: 0;" > <div id ="container" style ="height: 300px;width: 800px;border: 1px solid red;margin: 0px auto;" > </div > <input type ="button" value ="显示数据" onclick ="showData()" /> </body > </html >
简单了解一下就可以了
jQuery jQuery简介 为什么使用jQuery因为JS的选择器功能弱，DOM操作繁琐，动画功能弱，浏览器兼容性不好
什么是jQuery
目前最流行的JS函数库之一，对JS进行了封装
jQuery下载
jQuery中文网
jQuery初次使用 jQuery如何引入？
实现各行变色的效果，在使用jQuery实现效果之前，先试用HTML中使用class属性直接标记，使用JS实现动态各行变色，然后在用jQuery来实现。
原生js实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style type ="text/css" > .a { background-color : greenyellow; } .b { background-color : yellowgreen; } .c { background-color : yellow; } </style > <script type ="text/javascript" > window .onload = function ( var arr = document .getElementsByTagName ("tr" ); for (var i = 0 ; i < arr.length ; i++) { if (i == 0 ) { arr[i].className = "a" ; } else if (i % 2 == 1 ) { arr[i].className = "b" ; } else { arr[i].className = "c" ; } } } </script > </head > <body > <table class ="datalist" > <tr > <th scope ="col" > Name</th > <th scope ="col" > Class</th > <th scope ="col" > Birthday</th > <th scope ="col" > Constellation</th > <th scope ="col" > Mobile</th > </tr > <tr > <td > isaac</td > <td > W13</td > <td > Jun 24th</td > <td > Can</td > <td > 1118159</td > </tr > <tr > <td > fresheggs</td > <td > W610</td > <td > Nov 5th</td > <td > Scorpio</td > <td > 1038818</td > </tr > <tr > <td > girlwing</td > <td > W210</td > <td > Sep 16th</td > <td > Virgo</td > <td > 1307994</td > </tr > <tr > <td > tastestory</td > <td > W15</td > <td > Nov 29th</td > <td > Sagittarius</td > <td > 1095245</td > </tr > </table > </body > </html >
使用jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script > $(function ( $("tr:odd" ).css ("backgroundColor" ,"yellowgreen" ) $("tr:even" ).css ("backgroundColor" ,"lightyellow" ) $("tr:first" ).css ("backgroundColor" ,"greenyellow" ) }) </script > </head > <body > <table class ="datalist" > <tr > <th scope ="col" > Name</th > <th scope ="col" > Class</th > <th scope ="col" > Birthday</th > <th scope ="col" > Constellation</th > <th scope ="col" > Mobile</th > </tr > <tr > <td > isaac</td > <td > W13</td > <td > Jun 24th</td > <td > Can</td > <td > 1118159</td > </tr > <tr > <td > fresheggs</td > <td > W610</td > <td > Nov 5th</td > <td > Scorpio</td > <td > 1038818</td > </tr > <tr > <td > girlwing</td > <td > W210</td > <td > Sep 16th</td > <td > Virgo</td > <td > 1307994</td > </tr > <tr > <td > tastestory</td > <td > W15</td > <td > Nov 29th</td > <td > Sagittarius</td > <td > 1095245</td > </tr > </table > </body > </html >
jQuery页面加载函数
页面加载函数式页面加载完毕事件绑定的函数，该函数在后面应用比较多，所以在此处强调一下jQuery中的页面加载函数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > </title > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script > $(function ( var domS1=document .getElementById ("s1" ); console .log (domS1.innerText ); }) $(function ( console .log ("第二个页面加载函数" ) }) $(function ( console .log ("第三个页面加载函数" ) }) </script > </head > <body > <span id ="s1" > 测试文字</span > </body > </html >
总结：jQuery的使用需要先导入jQuery的js文件，jQuery本身就是一个JS文件。
jQuery.min.js是jQuery文件的压缩版，生产环境下推荐压缩版。
$是jQuery使用最多的符号，它有多个作用。
1、页面加载函数
1 2 3 4 5 jQuery(document).ready(function(){})//和 $(document).ready(function(){})//简写为 $(function(){})//相当于window.onload=function(){}但是功能比window.onload更强大 window.onload一个页面只能写一个，但是可以写多个$()并不冲突，window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$()的执行时间要早
作用2：选择器标志$（selector）
选择器。jQuery具有强大的选择器功能，后面会有专门章节进行介绍
jQuery选择器 基本选择器 jQuery提供了丰富的选择器功能，这个是jQuery相比JS的一大优势。我们先来看一下jQuery API。可以看到提供了众多的选择器，可以非常方便简单的获取想要的内容。
JS是如何直接获取要选择的内容
1 2 3 getElementById();//返回一个节点对象 getElementsByName();//返回多个（节点数组） getElementsByTagName();//返回多个（节点数组）
jQuery的选择器功能要强大的多
基本选择器
1 2 3 4 5 6 7 8 9 10 标签选择器 $(“a”) ID选择器 $(“#id”) $("p#id") 类选择器$(".class") $("h2.class") 通配选择器$("*") 并集选择器$("elem1,elem2,elem3") 后代选择器$(ul li) 父子选择器$(ul>li) 后面第一个兄弟元素 prev + next 后面所有的兄弟元素 prev ~ next
这些选择器其实我们并不陌生，因为在讲解CSS样式中都有类似的选择器，并且含义也是一样的。不同的在CSS中是对选择的内容定义CSS样式，在jQuery中用来选择内容并后续进行更多的下步操作。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 基本选择器</title > <style type ="text/css" > .myClass { background-color : aqua; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script type ="text/javascript" > $(function ( }); </script > </head > <body > <h3 id ="h31" > JSP</h3 > <p > JSP全名为Java Server Pages，中文名叫java服务器页面， 其根本是一个简化的<span > Servlet</span > 设计， 它[1] 是 由Sun Microsystems公司倡导、许多公司参与一起建立的一种 动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网 页<em > <span > HTML</span > </em > （标准通用标记语言的子集） 文件(*.htm,*.html) 中插入Java程序段(Scriptlet)和JSP 标记(tag)，从而形成JSP文件，后缀名为(*.jsp)。 用JSP开发 的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系 统上运行。 </p > <h3 id ="h32" class ="red1" > Servlet</h3 > <p > Servlet（Server Applet）是Java Servlet的简称，是为小服 务程序或服务连接器，用Java编写的服务器端程序，主要功能在于 交互式地浏览和修改数据，生成动态Web内容。 </p > <p class ="red1" > 狭义的Servlet是指Java语言实现的一个接口，广义的Servlet 是指任何实现了这个Servlet接口的类，一般情况下，人们将 Servlet理解为后者。Servlet运行于支持Java的应用服务器中。 从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情 况下Servlet只用来扩展基于HTTP协议的Web服务器。 </p > <div > <p > div p</p > </div > <span > span</span > <p class ="red1" > 狭义的Servlet是指Java语言实现的一个接口，广义的Servlet 是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet 理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲， Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用 来扩展基于HTTP协议的Web服务器。 </p > </body > </html >
自己试试
属性选择器 1 2 3 4 5 6 7 8 [attribute]//匹配包含给定属性的元素 [attribute1][attribute2]//复合属性选择器，需要同时满足多个属性 [attribute=value]//匹配给定的属性是某个特定值的元素 [attribute！=value]//匹配所有属性不等于特定值的元素 [attribute^=value]//匹配给定的属性是以某些值开始的元素 [attribute$=value]//匹配给定的属性是以某些值结尾的元素 [attribute*=value]//匹配给定的属性是以包含某些值的元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 基本选择器</title > <style type ="text/css" > .myClass { background-color : aqua; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script type ="text/javascript" > $(function ( }) </script > </head > <body > <ul id ="oyy" > <li > <a href ="https://www.baidu.com1" > 百度</a > </li > <li > <a href ="https://www.baidu.com" > 百度</a > </li > <li > <a href ="https://www.baidu.com" > 百度</a > </li > <li > <a href ="https://www.baidu.com" > 百度</a > </li > <li > <a href ="https://www.baidu.com" > 百度</a > <ul id ="film" > <li > <a href ="https://www.baidu.com" > 随便</a > </li > <li > <a href ="https://www.baidu.com" > 随便</a > </li > <li > <a href ="https://www.baidu.com" > 随便</a > </li > <li > <a href ="https://www.baidu.com" > 随便</a > </li > </ul > </li > </ul > </body > </html >
位置选择器 针对整个页面而言的位置选择器
1 2 3 4 5 6 7 :first //获取第一个元素 :last //获取最后一个元素 :odd //匹配所有索引值为奇数的元素 从0开始 :even //匹配所有索引值为偶数的元素 从0开始 :eq(n) //匹配一个给定索引值的元素 :gt(n) //匹配所有大于给定索引值的元素 :lt(n) //匹配所有小于给定索引值的元素
针对上级标签而言的位置选择器
1 2 3 4 5 6 7 :first-child //匹配第一个子元素 :last-child //匹配最后一个子元素 :only-child //如果某个元素是父元素中唯一的子元素，将会被匹配 :nth-child(n) :nth-child(odd|even) :nth-child(xn+y) //匹配其父元素下的第N个子或奇偶元素 //注意nth-child()选择器编号是从1开始，而其他选择器从0开始
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 位置选择器</title > <style type ="text/css" > div { border : 1px solid red; } .myClass { background-color : aqua; } </style > <script src ="js/jquery.min.js" > </script > <script type ="text/javascript" > $(function ( }); </script > </head > <body > <div > <p > 1. JavaSE</p > <p > 2. Oracle</p > </div > <div > <p > 3. HTML/CSS/JS</p > <p > 4. jQuery/EasyUI</p > <p > 5. JSP/Servlet/Ajax</p > </div > <div > <p > 6. SSM</p > <p > 7. SpringBoot/SpringCloud/SpringData</p > <p > 8. Maven/Linux/p> <p > 9. Redis/Solr/Nginx</p > <p > 10. SpringBoot/SpringCloud/SpringData</p > <p > 11. SpringBoot/SpringCloud/SpringData</p > <p > 12. SpringBoot/SpringCloud/SpringData</p > </div > <div > <p > 13. 就业指导</p > </div > </body > </html >
表单选择器 关于表单选择器
1 2 :text :password :radio :checkbox :hidden :file :submit :input 匹配所有input,textarea,select和button元素
关于表单项状态的选择器
1 :select :checked :enabled :disabled :hidden :visible
注意(“input”) 和 $(“:input”)的区别
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 表单选择器</title > <style type ="text/css" > .myClass { background-color : aqua; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script type ="text/javascript" > $(function ( }); </script > </head > <body > <h3 > 注册用户</h3 > <form action ="" method ="get" > <table border ="1" width ="40%" > <tr > <td > 用户名</td > <td > <input type ="text" name ="username" value ="请输入姓名" /> <input type ="hidden" name ="username" id ="username" value ="请输入姓名" /> </td > </tr > <tr > <td > 密 码</td > <td > <input type ="password" name ="pwd" id ="pwd" disabled ="disabled" /> </td > </tr > <tr > <td > 确认密码</td > <td > <input type ="color" name ="repwd" id ="repwd" /> </td > </tr > <tr > <td > 性别</td > <td > <input type ="radio" name ="sex" value ="男" /> 男 <input type ="radio" name ="sex" checked ="checked" value ="女" /> 女 </td > </tr > <tr > <td > 年龄</td > <td > <input type ="text" min ="6" max ="30" name ="age" id ="age" value ="18" /> </td > </tr > <tr > <td > 电子邮箱</td > <td > <input type ="text" name ="email" id ="email" /> </td > </tr > <tr > <td > 籍贯</td > <td > <select name ="pro" > <option value ="1" > 京</option > <option value ="2" selected ="selected" > 津</option > <option value ="3" > 冀</option > </select > </td > </tr > <tr > <td > 自我介绍</td > <td > <textarea name ="intro" > </textarea > </td > </tr > <tr > <td colspan ="2" > <input type ="submit" /> <input type ="reset" /> </td > </tr > </table > </form > </body > </html >
jQuery完成DOM编程 jQuery操作属性和样式 操作属性
原生js中的通过元素.属性名或者元素.setAttribute()方式操作元素属性，jQuery给我们封装了attr()和removeAttr(),更加便捷的操作属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 表单选择器</title > <style type ="text/css" > .a { background-color : aqua; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script type ="text/javascript" > function fun1 ( console .log ($("#f1" ).attr ("color" )) console .log ($("#f1" ).attr ("id" )) console .log ($("#f1" ).attr ("size" )) } function fun2 ( $("#f1" ).attr ("color" ,"green" ); $("#f1" ).attr ("size" ,"5" ); } function fun3 ( $("#f1" ).removeAttr ("color" ); } function fun4 ( $("#f1" ).attr ("class" ,"a" ) } </script > </head > <body > <font id ='f1' color ="red" size ="7" > 胜多负少</font > <hr /> <input type ="button" value ="获取属性" onclick ="fun1()" /> <input type ="button" value ="修改属性" onclick ="fun2()" /> <input type ="button" value ="删除属性" onclick ="fun3()" /> <input type ="button" value ="添加属性" onclick ="fun4()" /> </body > </html >
操作样式
原生JS中的通过.style.样式名=‘样式值’ 的方式操作元素样式
jQuery给我们封装了css()方法，便于我们操作样式，多数情况样式选择器使用类选择器，所以jQuery针对这一情况，给我们封装了addClass removeClass toggleClass 三个方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 表单选择器</title > <style type ="text/css" > .a { width : 100px ; height : 100px ; background-color : pink; } .b { border : 10px solid green; border-radius : 20px ; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script type ="text/javascript" > function fun1 ( console .log ($("#d1" ).css ("width" )); console .log ($("#d1" ).css ("height" )); console .log ($("#d1" ).css ("background-color" )); $("#d1" ).css ("width" ,"200px" ); $("#d1" ).css ("height" ,"300px" ); $("#d1" ).css ("background-color" ,"yellow" ); } function fun2 ( $("#d2" ).addClass ("b" ); } function fun3 ( $("#d2" ).removeClass ("b" ); } function fun4 ( $("#d2" ).toggleClass ("b" ); } </script > </head > <body > <div id ="d1" class ="a" > </div > <input type ="button" value ="修改样式" onclick ="fun1()" /> <div id ="d2" class ="a" > d2 </div > <input type ="button" value ="添加class值" onclick ="fun2()" /> <input type ="button" value ="删除class值" onclick ="fun3()" /> <input type ="button" value ="切换class值" onclick ="fun4()" /> </body > </html >
jQuery操作文本和增删元素 操作文本
原生js中的通过元素.innerText和innerHTML和.value属性操作标签内部文本和内容，jQuery给我们封装了text(),heml()和val()三种方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 表单选择器</title > <style type ="text/css" > .a { width : 100px ; height : 100px ; background-color : pink; } .b { border : 10px solid green; border-radius : 20px ; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script type ="text/javascript" > function fun1 ( console .log ($("#d1" ).text ()); console .log ($("#d1" ).html ()); console .log ($("#il" ).val ()) } function fun2 ( $("#d1" ).html ("<h1>水电费</h1>" ); $("#il" ).val ("你好" ) } function fun3 ( $("#d1" ).empty (); $("#il" ).val ("" ); } </script > </head > <body > <input type ="text" value ="这里是文字" id ="il" / > <div id ="d1" > a <span > xxx</span > b </div > <input type ="button" value ="获得标签内容" onclick ="fun1()" /> <input type ="button" value ="修改标签内容" onclick ="fun2()" /> <input type ="button" value ="删除标签中的内容" onclick ="fun3()" /> </body > </html >
增删元素
原生js中的对于元素的创建，增加和删除代码比较繁琐，而jQuery从元素的创建到元素的增加和删除都给我们提供了更加便捷的方法
创建元素
追加元素
append() appendTo() 添加内部标签
before() insertBefore() 向前增加标签
after() insertAfter() 向后增加标签
删除元素
empty() 清空字标签
remove() 移除当前标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style > #d1 { width : 200px ; height : 200px ; border : 1px solid red; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script type ="text/javascript" > function fun1 ( var span1=$("<span></span>" ); span1.css ("color" ,"green" ); span1.css ("border" ,"1px solid blue" ); span1.css ("background-color" ,"lightgray" ) span1.text ("今天天气很好" ); $('#d1' ).append (span1) } function fun2 ( var h =$("<h3>测试文字</h3>" ).css ("color" ,"red" ).css ("border" ,"1px solid green" ) h.appendTo ($('#d1' )) } function fun3 ( var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>' ) $("#d1" ).before (span1); } function fun4 ( var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>' ) span1.insertBefore ($("#d1" )); } function fun5 ( var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>' ) $("#d1" ).after (span1); } function fun6 ( var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>' ) span1.insertAfter ($("#d1" )); } function fun7 ( $("#d1" ).empty () } function fun8 ( $("#d1" ).remove (); } </script > </head > <body > <div id ='d1' > </div > <input type ="button" value ="testAppend" onclick ="fun1()" /> <input type ="button" value ="testAppendTo" onclick ="fun2()" /> <input type ="button" value ="testbefore" onclick ="fun3()" /> <input type ="button" value ="testinsertBefore" onclick ="fun4()" /> <input type ="button" value ="testafter" onclick ="fun5()" /> <input type ="button" value ="testInsertAfter" onclick ="fun6()" /> <input type ="button" value ="empty" onclick ="fun7()" /> <input type ="button" value ="remove" onclick ="fun8()" /> </body > </html >
jQuery绑定和触发事件 jQuery操作事件
操作事件
无非就是绑定事件，出发时间，解绑定事件，原生js中的通过DOM编程和在标签上的事件属性绑定事件
jQuery中，我们可以使用
事件的绑定:bind(),live()(1.8及之前)，on()(1.9之后推荐使用),one(),
事件解除绑定 unbind()
事件的触发：行为触发 ,jQuery方法触发
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style > #d1 { width : 200px ; height : 200px ; border : 1px solid red; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script > function fun1 ( $("#d1" ).bind ('mouseover' ,function ( $("#d1" ).css ("background-color" ,"green" ) }); $("#d1" ).mouseleave (function ( $("#d1" ).css ("background-color" ,"yellow" ) }); } function fun2 ( $("#d1" ).unbind ("mouseleave" ); } function fun3 ( $("#i1" ).focus (); } function fun4 ( console .log ("获得焦点了" ); } </script > </head > <body > <div id ="d1" > <div > <input type ="button" value ="添加事件" onclick ="fun1()" /> <input type ="button" value ="解除绑定" onclick ="fun2()" /> <br /> <input type ="text" id ="i1" onfocus ="fun4()" /> <input type ="button" value ="触发事件" onclick ="fun3()" /> </div > </div > </body > </html >
jQuery对象和DOM对象的转换 使用原生JS方式获得的页面节点对象我们可以简称为DOM对象，使用jQuery核心函数获得的对象我们可以简称为jQuery对象，这两中方式获得的对象即使是页面上同一个元素，也是不一样的，二者之间的API是不通用的，而在某些状况下，我们往往无法选择接受对象，只能被动使用，那么这个时候我们可以让二者实现转换，已达到可以调用API实现功能的目的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style > #d1 { width : 200px ; height : 200px ; border : 1px solid red; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script > $(function ( var div1 = document .getElementById ("d1" ); var d2 = $("#d1" ); console .log (div1.innerText ); console .log (d2.text ()); console .log (div1); console .log (d2); console .log ($(div1).text ()); console .log (d2.get (0 ).innerText ); console .log (d2[0 ].innerText ); }) </script > </head > <body > <div id ="d1" > 测试文字</div > </body > </html >
注意：
使用原生JSDOM对象转换成jQuery对象方式是$(dom对象)，
jQuery对象转换成DOM对象时jQuery对象[0]/get(0)
jQuery中的迭代遍历方式 jQuery给我们组装了一个快捷遍历元素的方法，接下来我们就是用一下jQuery中新的遍历方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script > $(function ( var lis=$('li' ); console .info (lis); for (var i =0 ;i<lis.length ;i++){ console .info (lis[i].innerText ); } for (var i in lis){ console .info (lis[i].innerText ); } }) lis.each (function (i,e ){ console .info (i+">>>" $(e).text ()); }) $.each (lis,function (i,e ){ console .info (i+">>>" $(e).text ()); }) </script > </head > <body > <ul > <li > AI</li > <li > A</li > <li > I</li > <li > AIsdf</li > </ul > </body > </html >
jQuery动画效果的使用 显示和隐藏 实现简单显示动画效果show()
实现简单隐藏动画效果方法hide()
实现切换简单显示和隐藏动画效果方法toggle()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style type ="text/css" > #d1 { width : 300px ; height : 400px ; background-color : green; display : none; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script type ="text/javascript" > function fun1 ( $("#d1" ).show ('2000' ,'swing' ,function ( alert ('动画结束' ); }) } function fun2 ( $('#d1' ).hide ('3000' ); } function fun3 ( $('#d1' ).toggle ('4000' ); } </script > </head > <div id ="d1" > </div > <input type ="button" value ="show" onclick ="fun1()" /> <input type ="button" value ="hide" onclick ="fun2()" /> <input type ="button" value ="toggle" onclick ="fun3()" /> </html >
滑动动画效果 上滑效果slideUp
下滑效果slideDown
实现切换滑动效果slideToggle
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style type ="text/css" > #d1 { width : 300px ; height : 400px ; background-color : green; display : none; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script type ="text/javascript" > function fun1 ( $("#d1" ).slideUp (2000 ); } function fun2 ( $('#d1' ).slideDown (3000 ); } function fun3 ( $('#d1' ).slideToggle (4000 ); } </script > </head > <div id ="d1" > </div > <input type ="button" value ="show" onclick ="fun1()" /> <input type ="button" value ="hide" onclick ="fun2()" /> <input type ="button" value ="toggle" onclick ="fun3()" /> </html >
淡入淡出动画效果 淡入效果fadeIn()
淡出效果fadeOut()
淡入淡出切换效果fadeToggle()
实现淡入之后指定透明度的效果fadeTo(number,0.2)0~1制定一个
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style type ="text/css" > #d1 { width : 300px ; height : 400px ; background-color : green; display : none; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script type ="text/javascript" > function fun1 ( $("#d1" ).fadeIn (2000 ); } function fun2 ( $('#d1' ).fadeOut (3000 ); } function fun3 ( $('#d1' ).fadeToggle (4000 ); } function fun4 ( $("#d1" ).fadeTo (2000 ,0.2 ); } </script > </head > <div id ="d1" > </div > <input type ="button" value ="fadeIn" onclick ="fun1()" /> <input type ="button" value ="fadeOut" onclick ="fun2()" /> <input type ="button" value ="fadeToggle" onclick ="fun3()" /> <input type ="button" value ="fadeTo" onclick ="fun4()" /> </html >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <style > #d1 { width : 200px ; height : 200px ; background-color : yellow; } </style > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script > $(function ( $("#d1" ).animate ({ width :"100px" , height :"100px" , opcity :0.5 , borderRadius :"50px" },2000 ,function ( alert ("动画执行结束了" ) }) }) </script > </head > <body > <div id ="d1" > </div > </body > </html >
表单校验 基本的表单验证案例 验证要求
用户名不能为空
用户长度大于等于6
用户名中不能有数字
密码不少于5位
两次密码必须要一致
邮箱格式正确，必须要有@和.
实现效果
Cellspacing（也可以拼写为cellspacing）是在HTML表格中定义单元格之间的间距的属性。它用于在单元格之间创建水平和垂直的间隔，以增加表格的可读性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script > function checkUsername ( var username=$("#user" ).val (); if (username =="" ) { $("#usertip" ).html ("<font color='red'>不能为空</font>" ); return false ; } if (username.length >=6 ){ $("#usertip" ).html ("<font color='red'>用户名长度不能大于等于6</font>" ); return false ; } for (var i =0 ;i<username.length ;i++){ var c = username.charAt (i); if (c<='9' && c>='0' ){ $("#usertip" ).html ("<font color='red'>用户名中不能有数字</font>" ); return false ; } } $("#usertip" ).html ("<font color='red'>OK</font>" ); return true ; } function checkPassword ( var pwd = $("#pwd" ).val (); if (pwd.length <5 ){ $("#pwdtip" ).html ("<font color='red'>密码长度不少于5</font>" ); return false ; } $("#pwdtip" ).html ("<font color='red'>OK</font>" ); return true ; } function checkForm ( return checkUsername () && checkPassword (); } </script > </head > <body > <table id ="center" border ="0" cellspacing ="0" cellspadding ="0" > <form action ="http://www.baidu.com" method ="get" onsubmit ="return checkForm()" > <tr > <td > 你的姓名：</td > <td > <input id ="user" type ="text" name ="username" onblur ="checkUsername()" /> <div id ="usertip" style ="display: inline;" > </div > </td > </tr > <tr > <td > 输入密码：</td > <td > <input id ="pwd" name ="pwd" type ="password" onblur ="checkPassword()" /> <div id ="pwdtip" style ="display: inline;" > </div > </td > </tr > <tr > <td > 再输入一遍密码</td > <td > <input id ="repwd" type ="password" onblur ="checkRepwd()" /> <div id ="repwdtip" style ="display: inline;" > </div > </td > </tr > <tr > <td colspan ="2" > <input type ="submit" value ="注册" class ="rb1" /> </td > </tr > </form > </table > </body > </html >
总结
1、对于表单提交，要给form标签绑定onSubmit事件，而不是给submit按钮绑定onClick事件，onsubmit绑定的方法时要有return关键字，绑定的方法要返回false/true
2、表单内容不管输入字符串、字符、数字或其他接手后都是String类型
3、表单的验证和String对象有密切关系，length,charAt(i),indexOf(“@”)
4、如果表单内容为空，接收到的不是null,而是空字符串
5、验证出错要return false,正确要return true,并且onsubmit=“return checkForm()”
6、该例子的缺点就是严重依赖String的API代码比较繁琐所以就引入到后面可以利用正则表达式来进行验证
正则表达式 什么是正则表达式
Regular Expression ，在代码中常常写为regex，正则表达式使用单个字符串来表示，匹配一系列复合某个语法规则的字符串。很多文本编辑器里，正则表达式通常被用来检索、替换那些复合某个模式的文本。正则表达式是对字符串和特殊字符操作的一种逻辑公式，就是用实现定义好的一些特定字符、及这些特定字符的组合、组成一个规则字符串，这个规则字符串用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配一个或者多个字符串。
为什么使用正则表达式
正则表达式可以使文本的校验的代码更加简洁
正则表达式可以实现更加严谨细致的校验
正则表达式举例
匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
匹配腾讯QQ号：[1-9][0-9]{4,}
匹配中国邮政编码：\d{6}
匹配身份证：\d{15}|\d{18}
匹配由数字和26个英文字母组成的字符串 ^[A-Za-z0-9]+$
匹配Email地址：\w+([-+.]\w+)@\w+([-.]\w+) .\w+([-.]\w+)*
匹配中文字符的正则表达式： [\u4e00-\u9fa5] [a-zA-Z]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > </title > <script > var reg =/^\w?$/ var words ="a" ; console .log (reg.test (words)) var regex1 = /^\d{6}$/ ; var regex2 = /^1[3456789]\d{9}$/ ; var regex3 = /^\w{6,}@[0-9A-Za-z]{2,}(\.[a-zA-Z]{2,3}){1,2}$/ ; </script > </head > <body > </body > </html >
表单验证完善 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > </title > <script type ="text/javascript" src ="js/jquery.min.js" > </script > <script > function checkUsername ( var reg1=/^\D{6,}$/ var username =$("#user" ).val (); if (!reg1.test (username)){ $("#usertip" ).html ("<font color='red'>格式必须是至少六位的非数字</font>" ); return false ; } $("#usertip" ).html ("<font color='green'>OK</font>" ) return true ; } function checkPassword ( var reg2=/^\S{5,}$/ var pwd =$("#pwd" ).val (); if (!reg2.test (pwd)){ $("#pwdtip" ).html ("<font color='red'>至少为5位非空格</font>" ); return false ; } $("#pwdtip" ).html ("<font color='green'>OK</font>" ); return true ; } function checkRepwd ( var p1=$("#pwd" ).val (); var p2=$("#repwd" ).val (); if (p1.length < 5 || p1 != p2){ $("#repwdtip" ).html ("<font color='red'>两次密码不一致</font>" ); return false ; } $("#repwdtip" ).html ("<font color='green'>OK</font>" ); return true ; } function checkEmail ( var em=$("#email" ).val (); var regex3 = /^\w{6,}@[0-9A-Za-z]{2,}(\.[a-zA-Z]{2,3}){1,2}$/ ; if (!regex3.test (em) ){ $("#emailtip" ).html ("<font color='red'>邮箱格式有误</font>" ); return false ; } $("#emailtip" ).html ("<font color='green'>OK</font>" ); return true ; } function checkForm ( return checkUsername ()&&checkPassword ()&&checkRepwd ()&&checkEmail (); } </script > </head > <body > <table id ="center" border ="0" cellspacing ="0" cellpadding ="0" > <form action ="http://www.baidu.com" method ="get" onsubmit ="return checkForm()" > <tr > <td > 您的姓名：</td > <td > <input id ="user" type ="text" name ="username" onblur ="checkUsername()" /> <div id ="usertip" style ="display: inline;" > </div > </td > </tr > <tr > <td > 输入密码：</td > <td > <input id ="pwd" name ="pwd" type ="password" onblur ="checkPassword()" /> <div id ="pwdtip" style ="display: inline;" > </div > </td > </tr > <tr > <td > 再输入一遍密码：</td > <td > <input id ="repwd" type ="password" onblur ="checkRepwd()" /> <div id ="repwdtip" style ="display: inline;" > </div > </td > </tr > <tr > <td > 您的Email：</td > <td > <input id ="email" type ="text" onblur ="checkEmail()" /> <span id ="emailtip" > </span > </td > </tr > <tr > <td colspan ="2" > <input type ="submit" value ="注册" class ="rb1" /> </td > </tr > </form > </table > </body > </html >
bootstrap入门 bootstrap介绍 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
容易上手:
只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
快速开发:
bootstrap给我提供了大量的样式,布局解决方案和插件库,可以让程序员从基本的样式设计和调试上解放,快速搭建项目.同时bootstrap还给我们提供了大量的常用网页组件,可以让我们直接复制代码后,简单修改即可使用.ctrl-c ctrl-v
响应式设计：
Bootstrap的响应式 CSS 能够自适应于台式机、平板电脑和手机。
除此之外：
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。
bootstrap怎么用?
接下来我们下载bootstrap,认识一下它的目录结构,搭建一个使用bootstrap的项目
boostrap中文网:https://www.bootcss.com/
boostrap4下载地址:https://v4.bootcss.com/docs/getting-started/download/
生产环境下选择预编译的CSS和JS文件,这是压缩处理之后的文件,体积小,学习阶段可以选择源码文件,包含构建工具等,我们这里选择预编译即可
搭建bootstrap项目
创建项目,将bootstrap中的css下的文件复制进项目的css目录中,bootstrap js目录中的文件复制进入项目的js目录中,截图如下
创建HTML文件,在HTML文件中引入bootstrap中的css样式文件和JS文件
从boostrap中文网中,选择组件,将代码复制粘贴进入我们的网页即可
总结:
1 bootstrap是一款优秀的前端框架,它能够让我们快速搭建项目,现有大量样式库可以供我们使用,可以帮助我们实现快速开发,使用bootstrap的感受基本上就是ctrl+c然后ctrl+v ,修改一下就可以实现前端页面的快速开发
2 bootstrap在导入js文件时,要求顺序是先导入jQuery,然后是popper.js(包含于bootstrap.bundle.min.js中),最后是bootstrap.min.js
3 不同的版本对于jQuery版本的要求时不一致的,导入时要注意jQuery的版本
Bootstrap流容器和固定容器 什么是容器？
Bootstrap4需要一个容器元素来包裹网站的内容，说白了就是要用一些标签来装其他的标签，这样便于我们队网页做整体的布局设计，一般我们选择用div来做容器，对应的容器类有两个，一个是固定容器.container 一个是流容器.container-fluid
容器类
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于100%宽度，占据全部视口（viewport）的容器
展示效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <link rel ="stylesheet" href ="css/bootstrap.min.css" /> <script src ="js/jquery.min.js" > </script > <script src ="js/bootstrap.bundle.min.js" > </script > <script src ="js/bootstrap.min.js" > </script > </head > <body > <div class ="container" > <h1 style ="background-color: gainsboro;" > 我的第一个 Bootstrap 页面</h1 > <p > 这是一些文本。</p > </div > <div class ="container-fluid" > <h1 style ="background-color: gainsboro;" > 我的第一个 Bootstrap 页面</h1 > <p > 使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p > </div > </body > </html >
二者的区别：
固定容器的响应式布局规则是当窗口大小变化时，在指定的宽度范围内使用固定的宽度，
留容器的响应式布局规则是随着窗口大小的变化一同变化，横向全部占满。
Bootstrap栅格系统 Bootstrap提供了一套响应式，移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸增加，系统会自动分为最多12列。我们也可以根据自己需要定义列数
网格类
Bootstrap4网格系统有以下5类：
.col 针对所有设备
.col-sm 平板屏幕宽度等于或大于576px
.col-md 桌面显示屏 屏幕宽度等于或大于768px
.col-lg 大桌面显示器 屏幕宽度等于或大于992px
.col-xl 超大桌面显示器 屏幕宽度等于或大于 1200px
网格系统规则
Bootstrap4网格系统规则
1、网格每一行需要放在设置了.container(固定宽度)或者.container-flud（全屏宽度）类的容器中，这样就可以自动设置一些外边距和内边距
2、使用行来创建水平的列组 class=row
3、内容要防止在列中，并且只有列可以是行的直接子节点
4、预定义的类如.row和col-sm-4可用于快速制作网格布局
5、列通过填充创建列内容之间的间隙。这个间隙是通过.rows类上的付编剧设置第一行和最后一列的偏移。
6、网格是通过跨越指定的12列来创建。例如：设置三个相等的列，需要使用三个.col-sm-4来设置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > </title > <meta name ="viewpoint" content ="width=device-width, initial-scale=1,shrink-to-fit=no" /> <link rel ="stylesheet" href ="css/bootstrap.min.css" /> <script src ="js/jquery.min.js" > </script > <script src ="js/bootstrap.bundle.min.js" > </script > <script src ="js/bootstrap.min.js" > </script > </head > <body > <div class ="container" > <div class ="row" > <div class ="col-sm-2" style ="background-color: lavender;border: 1px solid #117A8B;" > One of three columns </div > <div class ="col-sm-8" style ="background-color: lavender;border: 1px solid #117A8B;" > One of three columns </div > <div class ="col-sm-2" style ="background-color: lavender;border: 1px solid #117A8B;" > One of three columns </div > </div > <div class ="row" > <div class ="col-sm-1 " style ="background-color: lavender;border: 1px solid #117A8B;" > One of three columns </div > <div class ="col-sm-4 " style ="background-color: lavender;border: 1px solid #117A8B;" > One of three columns </div > <div class ="col-sm-7 " style ="background-color: lavender;border: 1px solid #117A8B;" > One of three columns </div > </div > </div > </body > </html >
Bootstrap案例导航栏
模仿这里写
