一.HTML概述
1.1 HTML是什么?
HTML(Hyper Text Markup Language): 超文本标记语言
超文本：超级文本（文本、图片、视频、音频等） 标记(标签/元素/节点)：就是由尖括号括起来的一组内容 <html> <div> <img>等 就是用于开发网页的最根底的语言对于HTML须要留神的是:
1) 通过HTML开发的网页文件通常是以 .htm 或 .html为后缀 2) 通过HTML开发的网页文件由浏览器负责解析并显示 3) HTML实质就是一个文档(txt,word,html,ppt)1.2 HTML的构造
1.2.1.例:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>网页</title> </head> <body> </body></html>1.2.2.HTML构造详解
(1)<!DOCTYPE html> 文档申明, 用来申明HTML文档所遵循的HTML标准和版本 下面是html5.0的申明, 也是目前最罕用的版本 (2) <html></html>根标签, 用于包裹所有的网页内容(除了文档申明) (2)<head></head> 头局部, 用来寄存HTML文档的根本属性信息, 比方网页的题目, 文档应用的编码等, 这部分信息会被浏览器优先加载. (3) <body></body>体局部, 用来寄存可视化的网页内容. 即真正的网页数据 (4)<title> </title>申明网页的题目 (5) <meta charset="utf-8">用来告诉浏览器应用哪一个编码来关上HTML文档, 这个编码肯定要和文件保留时的编码保持一致, 才不会呈现中文乱码问题.1.3 HTML语法(理解)
1.3.1、html标签
标签：也叫做标记、元素等，标签分为开始标签，例如：
<head>、<body>和完结标签，例如:
</head>、</body>开始标签和完结标签之间还能够蕴含其余内容。
<head> <titile>申明网页的题目</title> <meta charset="utf-8"></head>有些标签开始标签和完结标签之间没有内容要包裹，通常能够写成自闭标签，例如：
<br/> <hr/> <input/> <img/> <link/>等1.3.2、html属性
在标签上能够申明属性(属性不能独立存在,必须申明在标签上)
<div id="d1" class="c1" style="color:red;">这是一个div元素</div>标签上能够申明多个属性，多个属性之间用空格分隔
标签上的属性的值能够应用单引号或者双引号引起来
<meta charset="UTF-8" id="m1"><meta charset='UTF-8' id='m1'>1.3.3、html正文
格局: <!-- 正文内容 -->
正文的作用:
(1)为代码增加解释阐明
(2)将一些临时不须要执行的代码正文
浏览器对于html正文中的内容不会解析，也不会显示！
1.3.4、html空格和换行
在浏览器中，多个间断的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。那么：
如何在网页中做一个换行：能够应用 <br/> 标签做换行
如何在网页中做一个空格：能够应用 或 做空格
补充: HTML中是不辨别大小写的！
HTML中对语法要求十分不严格！（比方大小写混用，或者标签只有开始没有完结，或者标签的不合理嵌套），然而咱们在书写HTML时要依照标准来写。
2.HTML标签
2.1.图像标签:
<img src="指定图片的地址" alt="代替图片显示的文本" width="图片的宽度" height="图片的高度"/>留神: 不举荐写带盘符的绝对路径,因为未来我的项目公布,地位会扭转,到时还要批改图片的门路./ 示意当前目录(以后文件所在的目录)(可省略)../ 示意当前目录的上一级目录里(也就是当前目录的父目录)../../ 示意当前目录的上一级目录的上一级目录(也就是当前目录的父目录的父目 录)2.2.超链接标签:
超链接就是a标签，通过a标签能够在网页中创立指向另外一个文档的超链接 点击超链接能够跳转到另外一个网页(图片/下载门路等)
<a href="指定点击超链接后将会跳转到的地址" target="_self|_blank">这里能够包裹文本或图片</a>其中 href 属性用于指定点击超链接后将要跳转到的URL地址
target属性用于指定以何种形式关上超链接
_self：默认值, 示意在以后窗口中关上超链接
_blank：示意在新的窗口中关上超链接
2.3.表格标签:
table:定义一个表格
tr(table(表格) row(行)): 定义表格中的行td(table data cell): 定义表格中的单元格th(table header cell): 用于定义表头中的单元格,其中的文本默认加粗并居中2.4.表单标签
表单的作用:
用于向服务器提交数据, 此外在超链接或者url地址的前面拼接参数也能够向服务器提交数据!
向服务器提交数据的两种形式：
(1)通过表单向服务器提交数据
<form action="url地址" method="提交形式"></form>action属性:指定表单的提交地址method(办法)属性:指定提交办法,罕用的提交形式为GET和POST,若不指定提交形式,默认为GET形式.(2)通过超链接向服务器提交数据
http://www.baidu.com?username=张三&pwd=123&like=篮球<a href="http://www.baidu.com?username=张三&pwd=123&like=篮球" target="_blank">百度一下,你就不晓得!</a>在地址栏URL地址的前面通过问号(?)能够拼接参数，参数能够有多个，多个参数之间用&分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如:张三/123/篮球)，在回车后拜访百度服务器的同时，就能够将问号前面拼接的参数一并带给百度服务器。
2.5.表单项标签
1、input元素：
(1)一般文本输入框(比方:用户名/昵称/邮箱/验证码等)
<input type="text" name="username"/>(2)明码输入框(比方:明码/确认明码等)
input type="password" name="pwd"/>(3)单选框(比方:性别/部门等)
<input type="radio" name="gender"/>男(4)复选框/多选框(比方:喜好/岗位等)
<input type="checkbox" name="like"/>(5)一般按钮(比方:换一张图片)
<input type="button" value="换一张"/>一般按钮自身没有性能,但咱们能够通过js为按钮增加性能或增加行为~~~~(6)提交按钮(比方:提交/注册/登录)
<input type="submit" value="提交/注册/登录"/>提交按钮用于提交表单中的数据到服务器中!2、select、option标签：
<select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option selected="selected">广州</option> <option>深圳</option></select>select用于定义一个下拉选框
option用于定义下拉选框上的选项
selected设置以后option选项默认被选中
3、textarea多行文本输出区域：
<textarea name="description" cols="30" rows="5"placeholder="请输出形容信息..."></textarea>cols属性: 用于设置文本输入框的列数(宽度)
rows属性: 用于设置文本输入框的行数(高度)
placeholder属性: 设置输入框中的提醒音讯!
3.表单细节问题
3.1、提交表单时，表单中的数据为什么没有被提交？
对于表单中的表单项标签，只有是须要向服务器提交数据，该表单项上必须增加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会被疏忽。例如：
<input type="text" name="username"/><input type="password" name="psw"/>3.2、如何让多个单选框只能有一个被选中？
要求多个单选框必须具备雷同的name属性值，如果多个单选框name属性值雷同，则阐明是一个组的内容，一个组中的单选框只能抉择其中的一个！
<td>性别:</td><td> <input type="radio" name="gender"/>男 <input type="radio" name="gender"/>女</td>3.3、为什么单选框、复选框抉择某一项后提交的值都是on?
因为单选框、复选框只能抉择，不同于用户名、明码输入框，能够输出内容。
因而咱们须要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)，例如：
<input type="radio" name="gender" value="male"/>男<input type="radio" name="gender" value="female"/>女3.4、如何设置单选框或复选框默认选中某一项?
能够在单选框或复选框标签上增加一个checked="checked"属性，就能够让以后单选框或复选框默认被选中。例如：
<input type="radio" checked="checked" name="gender" value="male"/>男<input type="radio" name="gender" value="female"/>女<!-- 喜好复选框/多选框 --><input type="checkbox" name="like" value="basketball"/>篮球<input type="checkbox" checked="checked" name="like" value="football"/>足球<input type="checkbox" name="like" value="volleyball"/>排球3.5、如何设置下拉选框默认选中某一项?
在option标签上增加一个selected="selected"属性，能够让以后option选项默认被选中，例：
<select name="city"> <option>北京</option> <option>上海</option> <option selected="selected">广州</option> <option>深圳</option></select>3.6、下拉选框中option选项上的value属性的作用是什么？
如果某一个选项被选中，并且该选项上增加了value属性，在提交表单时，将会提交value属性的值。
如果某一个选项被选中，该选项上没有增加value属性，在提交表单时，将会提交标签中的内容
<select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option selected="selected">广州</option> <option>深圳</option></select>3.7、音频,视频标签
音频标签:
audio{ border-radius: 20px; 设置圆角边框}audio:focus{ /* 获取焦点audio元素 _//_ 设置元素的外围(包在边框外的线) */ outline: none; }<audio autoplay="autoplay" controls="controls" src="音频文件url地址"></audio>autoplay="autoplay" 页面加载结束后自动播放controls属性:为用户增加播放,暂停,音量控制等插件视频标签:
audio{ border-radius: 20px; 设置圆角边框}video:focus{ /* 获取焦点audio元素 _//_ 设置元素的外围(包在边框外的线) */ outline: none;}<video controls="controls" src="视频文件"></video>autoplay="autoplay" 页面加载结束后自动播放controls属性:为用户增加播放,暂停,音量控制等插件4.元素类型
div/span/p 都是一个容器标签，用于包裹其余内容（这些元素自身不具备太多的款式！）
p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）
div: 块级元素，默认独占一行，用于包裹其余内容，将款式设置在div上，就能够作用在div的内容上。
span：行内元素，默认能够和其余元素显示在同一行。 同是行内元素的还有:b,i,u,input,img(这两个能够设置宽高)
(1)块级元素（block）
默认状况下，块级元素独占一行
能够设置宽和高，如果设置了就是设置的宽和高
如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容撑持)
比方: div/p/h1~h6/form/table/div/p 等元素都是块级元素
(2)行内元素（inline）
默认状况下，多个行内元素能够处在同一行
不能设置宽和高
比方: span/input/img/i/b 等元素都是行内元素
(3)行内块元素（inline-block）
既具备行内元素的特色(能够同行显示)，还具备块级元素的特色(能够设置宽和高)
二.CSS
1.css概述?
CSS:层叠样式表,是用于丑化,渲染网页的一门语言和传统的html标签属性设置款式相比,应用CSS设置款式能够实线:将展现数据的html代码和设置款式的CSS代码进行拆散,能够加强网页的展现能力.
2.CSS的三大个性
2.1.层叠性
是指多种CSS款式的叠加,是浏览器解决抵触的一个能力,如果一个属性通过两个雷同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉.
个别状况下,如果呈现款式抵触,则会依照CSS书写的程序,以最初的款式为准.
1.款式抵触,遵循的准则是就近准则.那个款式离构造近,就执行那个款式.
2.款式不抵触,不会层叠
2.2.继承性
所谓的继承性是指书写CSS样式表时,子标签会集成父标签的某些款式.
留神:失当的应用继承能够简化代码,升高CSS款式的复杂性.子元素能够继承父元素的款式(text- , font- , line- 这些元素结尾的都能够继承,以及color属性)
2.3.优先级关系
定义CSS款式时,经常出现两个或更多规定利用在批准元素上,这时就会呈现优先级的问题.
优先级: !important>内联款式(1000)> id选择器(100)>class选择器(10)>元素名选择器(1)>通用选择器>继承(0)>默认 如果一个选择器中蕴含多个选择器类别,能够通过权重值相加,权重值大的优先级高如果权重值雷同,书写在前面的会笼罩后面的.
权重形同时,CSS遵循就近准则.也就是说凑近元素的款式具备最大的优先级,或者说排在最初面的款式优先级最大.
3.引入CSS
3.1.引入CSS形式一
在标签上增加一个style属性,在style属性外部,能够设置css款式,例如:
<div style="border:2px solid red;font-size:26px;background:pink;"> 这是一个div...</div>当css代码特地多时,容易造成页面构造的凌乱,而且代码无奈复用，不利于前期的扩大和保护。这种形式不举荐应用!
3.2.引入CSS形式二
在head标签外部增加一个style标签,在style标签外部能够增加CSS款式.
<head> <style> /* ****** CSS款式 ****** */ span{ /* 选中所有的span元素 */ border: 2px solid green; font-size: 30px; font-weight: bolder; } <style></head>这种形式没有把css款式代码间接写在标签上,而是写在一个style标签外部统 一治理,不会造成页面代码的凌乱. 而且这种形式实现了代码的复用!
不举荐大量应用!
3.3.引入CSS形式三
将所有的CSS代码写在一个 xxx.css 文件中,在须要应用这些款式的html中, 引入这个css文件即可!
<link rel="stylesheet" href="demo.css"/>这种形式是将所有的css代码放在一个css文件中对立进行治理,没有造成页面构造的凌乱,也实现了代码的复用.真正的实现了将css代码和html代码进行拆散!
4.CSS选择器
所谓的选择器,就是能够帮咱们在HTML中选中指定元素
4.1.元素名/标签名选择器
div{ } -- 选中所有的div元素并设置款式span{ } -- 选中所有的span元素并设置款式4.2.class/类选择器
.c1{ } -- 选中所有class值为c1的元素并为这些元素设置款式
<div class="c1 c2"></div><span class="c1"></span><p class="c1"></p>另外,一个标签能够设置多个class属性值(class="c1 c2"),多个class值之间用空格隔开示意以后标签同时属于多个分组,多个分组设置的款式也会同时作用在这个标签上.
4.3.id选择器
id值在整个html中应该是举世无双的!
#div1{ } -- 选中id值为div1的元素<div id="div1"></div>4.4.后辈选择器
span{ } -- 选中以后html中的所有span元素div span{ } -- 选中div外部的所有span元素div,span{ } -- 选中以后html中的所有的div元素以及所有的span元素<div> <span></span></div><span></span> 4.5.属性选择器 -- 依据元素的属性条件筛选/过滤元素
input[type='text']{ } -- 选中所有type='text'的input元素,也就是文本输入框input[type='checkbox']{ } -- 选中所有type='checkbox'的input元素,也就是复选框input[type='radio']{ } -- 选中所有type='checkbox'的input元素,也就是单选框div[id]{ } -- 选中所有具备id属性的div元素5.罕用属性总结：
5.1、文本/字体相干属性
1.text-align: 设置元素外部的文本程度排列形式
left: 默认值。左对齐right: 右对齐center: 居中对齐justify: 两端对齐2.text-indent: 5px 设置元素外部文本首行缩进,单位: 像素/百分比
3.text-decoration：设置文本的下划线款式，其罕用取值为:
underline: 有下划线none: 没有下划线4.letter-spacing：设置字符距离/间距，其罕用取值为:
normal:像素值5.text-shadow：设置字体暗影，其取值为:
text-shadow: 设置文本的暗影 5px 5px 5px #000; 第1个值:设置暗影的程度偏移地位(值越大向右) 第2个值:设置暗影的垂直偏移地位(值越大向下) 第3个值:设置暗影的扩散水平(值越大越含糊) 第4个值:设置暗影的色彩6.字体属性
font-size: 5px 设置字体大小font-weight: 设置字体粗细(100~900),默认是300,normal、bold、bolder font-family: 设置字体款式 微软雅黑,宋体,黑体...color: 设置字体色彩line-height: 设置行高5.2、背景相干属性
background-color: 设置背景色彩 background-image: 设置背景图片 background-repeat: 设置背景图片是否以及如何反复排列,repeat: 横向反复排列,纵向也反复排列(默认)repeat-x: 横向反复排列,纵向不反复排列repeat-y: 纵向反复排列,横向不反复排列no-repeat: 横向不反复排列,纵向也不反复排列background-position：15px 15px 设置或检索对象的背景图片地位 background-size: 80px 60px; 设置背景图片大小 background: 背景色彩 背景图片 背景图片是否反复 背景图片的地位 如:background: #FFF url(图片门路) no-repeat 14px(X轴:右) 14px(Y轴:下);5.3、边框属性(border)
border:2px solid red; -- 设置元素的边框(能够同时设置边框的宽度、款式、色彩) border属性能够拆分为如下设置:
border-width: 2px; -- 设置元素边框的宽度border-style: solid; -- 设置元素边框的款式border-color: red; -- 设置元素边框的色彩其中border-width、border-style、border-color也能够依照上右下左方向进行拆分，以border-width为例：
border-top-width: 2px; -- 设置上边框的宽度border-left-width: 2px; -- 设置左边框的宽度border-right-width: 2px; -- 设置左边框的宽度border-bottom-width: 2px; -- 设置下边框的宽度border-radius: 5px 设置圆角边框
5.4、其它属性
width: 设置元素的宽度
height: 设置元素的高度
margin: 设置元素的外边距
margin-top: 10px; -- 设置元素的上外边距为10px;margin-right: 20px; -- 设置元素的右外边距为20px;margin-bottom: 30px; -- 设置元素的下外边距为30px;margin-left: 40px; -- 设置元素的左外边距是40px;---------------------------------------------margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应margin: 10px 20px 30px; -- 上 左右 下margin: 10px 20px; -- 高低 左右margin: 10px; -- 上下左右都是10px;display: block/inline/inline-block 设置元素为块元素或者行内元素
1) block: 块级元素的默认值,比方: div,p,h1~h6,form,table,tr等都是块级元素. 块级元素默认独占一行(即不能和其它元素显示在同一行)2) inline: 行内元素的默认值,比方: span,img,input,b,i,u等. 多个行内元素能够显示在同一行(但行内元素不能够设置宽高)3) inline-block: 行内块元素, 特点是: 即能够设置宽高,有能够同一行显示.vertical-align: middle; /* 让同行内的元素中线对齐 */vertical-align: top; 让以后元素和行内最高元素的顶部对齐5.5、色彩设置
色彩取值形式常见的形式有三种:
形式一：设置色彩名，例如：red、green、blue、yellow、cyan、pink、white、black等形式二：设置#加上六位的十六进制数值#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等形式三：设置rgb色彩值 rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等（red） （green） （blue） （yellow） （cyan:青色）6.浏览器中的谬误
unknown property name 属性名写错invalid property value 像素写错三.JavaScript概述
1、什么是JS
全称JavaScript，简称JS
JS是由NetScape(网景)公司提供的一门嵌入在浏览器中执行的脚本语言。
次要作用是: 用于实现网页中的动画成果，或者实现表单校验等性能
JS能够运行在服务器端(Node.js)
2、JS的特点
（1）JS是一门直译式的语言（JS不须要编译，间接执行的就是源代码）
（2）JS是一门基于对象的语言(JS能够通过某些机制模仿面向对象)
（3）JS是一门弱类型的语言（JS中的变量不辨别类型，能够指向任意的数据）
3、JS的劣势
（1）良好的交互性（JS的呈现就会为了嵌入在浏览器中运行，能够用户进行交互，进步用户体验）
（2）肯定的安全性（JS只能在浏览器外部运行，不能拜访浏览器意外的资源）
（3）跨平台性（只有有浏览器，就能运行JS）
( JS语言是跨平台的，是因为有浏览器，但浏览器不跨平台Java语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )
4、JS的引入
4.1 间接写在html中的script标签外部
script标签能够放在head或body中
<script> console.log("引入JS的形式一"); alert("引入JS的形式一"); document.write("引入JS的形式一<br />");</script>4.2 通过script标签引入内部的JS文件
<script src="./js/demo.js"></script>须要留神的是: (1)在引入js文件的script标签外部,不要书写JS代码,因为无奈执行<script src="demo.js"> alert( 111 ); //这里的代码不会执行</script>(2)引入js文件的script标签最好不要自闭,可能会导致js文件引入失败<script src="demo.js" />4.3 间接将js代码写在html标签上
<button type="button" onclick="console.log('引入JS的办法三')">666</button><input type="button" value="6666" ondblclick="document.write('引入JS的办法三')"/>5.JS的语法
5.1.正文格局
// 单行正文内容/* 多行正文内容 */5.2.数据类型
5.2.1根本数据类型
（1）数值类型（number）：JS中所有的数值在底层都是浮点型 只不过在须要时，会主动的在整型和浮点型之间进行转换 .
NaN(Not a Number)非数值
Infinity(正无穷大)
-Infinity(负无穷大)
（2）字符串类型（string）：JS中字符串是根本数据类型，但JS中也提供的对应的包装对象 JS中的字符串能够应用单引号或者双引号引起来!
例如: var str1 = "Hello JS"; var str2 = 'Hello JS'; console.log( typeof str1 ); // string console.log( typeof str2 ); // string JS中提供了字符串的包装对象--String var str3 = new String("Hello JS"); console.log( typeof str3 ); // object str1和str2也能够当做对象应用,在应用时,和str3没有什么区别（4）undefined类型：申明了变量但没有为变量赋值，此时变量的值是undefined
如在console控制台中书写var x;alert(x); //x的值为undefined（5）null类型：示意空值，能够作为函数的返回值，示意函数返回的是一个空的对象
留神:undefined和null都不能调用属性,办法,否则会报错!!!
5.3.简单数据类型
次要指对象（JS内置对象、自定义对象、数组、函数）
5.4.变量的申明
JS中是严格辨别大小写的
JS中通过var关键字申明变量，申明的变量不辨别类型，能够指向任意的数据 var s1 = "Hello World"; s1 = 123; s1 = false; s1 = []; s1 = function(){} //函数JS有主动断句的性能，即便在一行代码之后，没有加分号，也不会报错,但倡议加上分号;JS中如果反复申明变量,也不会报错, 因为JS中申明一个已存在的变量不会失效;var x = "abc"; //var x; x = "abc";var x = 123; //var x; x = 123;alert(x); //x的值为123,仅仅更改了x的值5.5.JS的运算符
JS中的运算符和Java中的运算符大致相同
算术运算符: +，-，*，/，%，++，--赋值运算符: =，+=，-=，*=，/=，%=比拟运算符: ==，!=，>，>=，<，<=位运算符: & ， |逻辑运算符: && ，|| ( false && 表达式, true || 表达式 )前置逻辑运算符: ! (not)三元运算符: 表达式 ? 表达式1 : 表达式25.6.JS中的语句
JS中的语句和Java中的语句大致相同
5.6.1.if分支
if (条件 1){ 当条件 1 为 true 时执行的代码}else if (条件 2){ 当条件 2 为 true 时执行的代码}else{ 当条件 1 和 条件 2 都不为 true 时执行的代码}5.6.2.switch分支
应用 switch 语句来抉择要执行的多个代码块之一。语法结构如下：
switch(n){ case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; ... default: 与 case 1 和 case 2 不同时执行的代码}执行原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与构造中的每个case 的值做比拟。如果存在匹配，则与该 case 关联的代码块会被执行。请应用 break来阻止代码主动地向下一个 case 运行。
5.6.3.循环构造
for 循环的语法结构如下：
for (语句 1; 语句 2; 语句 3){ 被执行的代码块}while循环-- 在指定条件为真时循环执行代码块
while (条件){ 须要执行的代码}while 循环会在指定条件为真时循环执行代码块。
5.7.JS的数组
JS数组的申明形式一
//申明一个空数组,长度为零var arr1 = [];//申明一个数组，并为数组设置初始值var arr2 = ["Hello", 111, false, new Object() ];JS数组的申明形式二
//申明一个空数组，长度为零var arr3 = new Array();//申明一个数组，并为数组设置初始值var arr4 = new Array("Hello", 111, false, new Object());数组的特点:
(1)JS中的数组能够寄存任意类型的元素
(2)JS中的数组的长度能够被任意扭转
如：
var arr1 = [];console.log("此处数组的长度为: "+arr1.length ); // 0arr1.length = 5;console.log("此处数组的长度为: "+arr1.length ); // 5arr1[9] = "a";console.log("此处数组的长度为: "+arr1.length ); // 10arr1[99] = "b";console.log("此处数组的长度为: "+arr1.length ); // 1005.8.JS的函数
JS的函数相当于Java中的办法,就是一个具备性能的代码块,通过函数名能够重复执行!
function fn1( [形参1,形参2,...] ){ []示意参数可有可无 //函数体... }fn1([实参1,实参2]);var fn2 = function( [形参1,形参2,...] ){ //函数体... }fn2([实参1,实参2]);匿名函数,只执行一次(function( [形参1,形参2,...] ){ //函数体... })( [实参1,实参2,...] );调用函数: 函数名称([参数列表]);
6.JS中的事件
onclick: 点击事件ondblclick: 双击事件onchange: 扭转事件:元素扭转时,触发onmouseover: 鼠标悬停事件onmouseout: 鼠标来到事件onselect: 文本框内容被选中事件onfocus: 光标汇集onblur: 光标来到onload: 网页导入,当页面加载完所有的html元素后，立刻执行functiononunload: 敞开网页JS中设置事件
形式1:<script> function fn(){ alert("input按钮被点击了..."); }</script><body> <input onclick="fn()" type="button" value="点我~!" /></body>形式2:<script>//当页面加载完所有的html元素后，立刻执行function window.onload = function(){ //获取id为btn的元素 var btn = document.getElementById("btn"); btn.onclick = function(){ alert("input按钮被点击了..."); } }</script><body> <input id="btn" type="button" value="点我~!" /></body>7.JS的DOM操作
DOM: Document Object Model, 文档对象模型是JS专门为拜访html元素所提供的一套API
7.1.如何获取html元素
document是一个js对象，用于示意以后html网页。当浏览器加载残缺个html网页后，会用document对象示意整个html网页！
document.getElementById( id值 ) -- 通过元素的id值，获取一个元素。返回的是示意该元素的js对象。
<div id="div1">xxxx</div>//获取id为div1的元素var oDiv1 = document.getElementById("div1");//oDiv1是一个js对象,示意获取的div元素document.getElementsByTagName( 元素名 ) -- 通过元素名称获取以后文档中的所有指定名称的元素，返回的是一个数组，其中蕴含了所有指定名称的元素。
document.getElementsByclassName( 元素名 )-- 通过元素名称获取以后文档中的所有指定class名称的元素，返回的是一个数组，其中蕴含了所有指定名称的元素。
document.body -- 获取以后文档中的body元素
element.parentNode -- 获取以后元素的父元素。element示意以后元素 如:div.parentNode;
7.2.如何创立html元素
document.createElement(元素名/标签名) 返回一个JS对象 -- 依据标签名创立指定名称的标签,返回的是一个JS对象,示意新创建的这个元素
7.3.如何增加html元素
parent.appendChild( child ) -- 通过父元素(parent)调用appendChild办法增加子元素(child)
实例: 创立一个表格,并增加到body中 //创立table、tr、td元素 var oTab = document.createElement("table"); var oTr = document.createElement("tr"); var oTd = document.createElement("td"); //将td增加到tr中,将tr增加到table,将table增加到body中 oTr.appendChild( oTd ); oTab.appendChild( oTr ); document.body.appendChild( oTab );7.4.如何删除html元素
parent.removeChild( child )-- 通过父元素删除子元素，其中parent示意父元素，child示意子元素
7.5.如何获取或设置(增加,批改)元素的内容
element.innerHTML -- 获取以后元素的所有内容 element.innerHTML = xxx; -- 为以后元素设置内容(原内容会被新内容笼罩)
<div id="div1"> 这是一个div元素... <span>这是一个span元素</span></div>//获取div元素var oDiv1 = document.getElementById("div1");oDiv1.innerHTML;//获取div元素的内容7.6.如何删除input中的value值
value:仅表单项有value
var inp=document.getElementById("user");//inp.value="刘备"; //批改inp的value值为 刘备inp.value="";<input id="user" type="text" value="常山赵子龙"/>8.补充
8.1.JS中主动转换值
"abc" --主动转数值--> NaN"89" --主动转数值--> 89"" --主动转数值--> 08.2.函数
alert() 弹出框
prompt() 显示可提醒用户进行输出的对话框
prompt(text,defaultText)text:可选,在对话框中显示的纯文本defaultText:可选,默认的输出文本.也能够不输出值,如果不输出值,则返回null如:var socue=prompt("请输出问题",0);其中"请输出问题"显示在对话框上0显示在输入框内8.3.JS提供文档就绪事件函数
window.onload=function(){ alert("以后html中的所有元素都曾经加载实现!");}8.4.JS中设置CSS属性
tr.style.background="pink";tr.className="xxx"; xxx==css中class的值四.jQuery
1.什么是jQuery
jQuery: JavaScript Query jQuery是一门轻量的、收费开源的JS函数库(JS文件) 其实就是一个JS的框架 jQuery能够极大的简化JS代码 核心思想：“写的更少、但做的更多”
轻量的：是指一个技术或框架对代码或程序的侵入水平是比拟低的。 或者说代码对该技术依赖水平越低，这个技术越轻。对该技术的依赖水平越高，这个技术越重。
_jQuery实质就是一个蕴含了很多函数的JS文件，如果要在某一个HTML中应用这个JS文件中的函数，就必须得将JS文件引入到HTML中_（想应用jQuery，就得引入jQuery的函数库文件，就是一个JS文件）
2.jQuery的劣势
(1) 能够极大的简化JS代码
(2) 能够像CSS选择器一样获取html元素
css中获取所有的div,给div增加款式:
div{ css属性... }jQuery中获取所有div,给div增加边框款式:
$("div").css("border", "2px solid red");JS获取id为div1的元素: document.getElementById("div1")jQuery获取id为div1的元素: $("#div1")(3) 能够通过批改css属性管制页面的成果
4) 能够兼容罕用的浏览器
比方: JS中的innerText属性、removeNode()函数、replaceNode( )函数 这些函数在某些浏览器中是无奈应用的。
jQuery中提供了相应的函数（ text函数、remove函数、replaceWith函数 ）
罕用浏览器：谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器等
3.jQuery引入
jQuery的函数库文件就是一个一般的JS文件，引入jQuery和引入JS文件的形式一样
<!-- 在应用jQuery之前，必须先引入jQuery的函数库文件 --><script src="js/jquery-1.8.3.js"></script>在引入jQuery函数库文件时，如果文件引入门路谬误，则会导致文件引入失败,如
Uncaught ReferenceError: $ is not definedat问题剖析:引入门路有问题
4.文档就绪事件函数
jQuery提供的文档就绪事件函数 jQuery==$<script>$(function(){ //jQuery==$ //在浏览器加载完所有元素后立刻执行 alert("以后html中的所有元素都曾经加载实现!");});</script>其残缺写法为:
<script> $(document).ready(function(){ //在浏览器加载残缺个html网页后立刻执行 });</script>什么时候该应用文档就绪事件函数?
如果在获取元素时，获取元素的代码执行的机会，比元素自身加载的工夫还要早，如果元素还没有加载就获取，必然是获取不到的。
能够将获取元素的代码放在文档就绪事件函数中，等浏览器加载残缺个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载了，再获取任何元素都能获取到！
5.jQuery选择器
5.1.根本选择器
(1)元素名选择器$("div") -- 选中所有的div元素$("span") -- 选中所有的span元素(2)class/类选择器$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)$("span.s1") -- 选中所有class值为s1的span元素(3)id选择器$("#one") -- 选中id为one的元素(4)多元素选择器$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素5.2.层级选择器
$("div span") -- 选中所有div外部的所有span元素$("div").find("span") -- 选中所有div外部的所有span元素$("#one span") -- 选中id为one的元素外部的所有span元素相邻兄弟选择器$("#two+span") -- 选中id为two的元素前面紧邻的span兄弟元素$("#two").next("span") -- 选中id为two的元素前面紧邻的span兄弟元素$("#two").prev("span") -- 选中id为two的元素后面紧邻的span兄弟元素$("#two~span") -- 选中id为two的元素前面所有的span兄弟元素$("#two").nextAll("span") -- 选中id为two的元素前面所有的span兄弟元素$("#two").prevAll("span") -- 选中id为two的元素后面所有的span兄弟元素$("#two").nextAll() -- 选中id为two的元素前面所有的兄弟元素$("#two").prevAll() -- 选中id为two的元素后面所有的兄弟元素$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素parent() -- 获取以后元素的父元素, 相似于js中的 parentNode属性parents() -- 获取以后元素的所有的先人元素$(":checked").parent().parent(); -- 获取所有被被选中的父类元素的先人元素$(":checked").parents("tr") -- 获取所有被选中的先人元素5.3.根本过滤选择器
(1) 选中第一个div元素$("div:first")$("div:eq(0)")$("div").eq(0)(2) 选中最初一个div元素$("div:last")$("div:eq(-1)")$("div").eq(-1)(3) 选中第一个div元素以及选中最初一个div元素$("div:first,div:last")(4) 选中第n+1个div元素(n是下标从零开始)$("div:eq(n)")$("div").eq(n)(5) 获取所有div下标值大于3的元素$("div:gt(3)") 获取所有div下标值小于4的元素$("div:lt(3)")5.4.表单选择器
$(":input") -- 匹配所有的表单项元素(包含input、select、textarea、button)$(":text") -- 匹配所有一般文本输入框$(":password") -- 匹配所有明码输入框$(":radio") -- 匹配所有单选框$(":checkbox") -- 匹配所有复选框$(":checked") -- 匹配所有被选中的单选框,复选框,option选项$(":radio:checked") -- 匹配所有被选中的单选框$(":checkbox:checked") -- 匹配所有被选中的复选框6.jQuery中html元素操作
6.1.创立元素
$("<div></div>") -- 创立一个div元素，返回的是一个jQuery对象,示意创立的div元素$("<div>xxxx</div>") -- 创立一个蕴含内容的div元素，返回的是一个jQuery对象,示意创立的div元素6.2.增加子元素
$parent.append( $child ) -- 父元素调用办法增加子元素$("body").append( "<div>我是新来的...</div>" ); -- 往body元素外部追加一个div子元素tr.append("<td>"+id+"</td>"); -- 向tr中增加带有值的td标签6.3.删除元素
$("div").remove() -- 删除所有的div元素JS删除所有div元素：//获取所有的div元素(返回的是所有div组成的数组)var divArr = document.getElementsByTagName("div"); //div数组//遍历div数组,顺次删除每一个div元素var len = divArr.length;for(var i=0;i<len;i++){ //通过以后元素的父元素删除以后元素(始终删除第一个) divArr[0].parentNode.removeChild( divArr[0] );}6.4.替换元素
能够替换暗藏的元素$("div").replaceWith("<p>我是来替换的…</p>")6.5.html元素内容和值的操作
<div> 这是一个div11元素 <span>这是一个span元素</span> 这是一个div1111元素</div><input type="text" name="user"/>1、html()函数 (相似于js中的innerHTML属性)
-- 用于获取或设置元素的内容，比方为div、span、p、h1~h6、table、tr、td、form等元素设置内容
$("div").html() -- 获取所有div中的第一个div的内容$("div").html("xxxx") -- 为所有div设置内容,原内容会被笼罩$("div").html("<h1>xxx</h1>") 设置的内容能够是标签2、text()函数 (相似于js中的innerText属性，innerText在局部浏览器中不兼容)
-- 用于获取或设置元素的文本内容
$("div").text() -- 获取所有div中的所有文本内容$("div").text("xxxx") -- 为所有div设置文本内容3、val()函数 (相似于js中的value属性)
-- 获取或设置表单项元素的value值(input/select/option/textarea)
$("input").val() -- 获取所有input元素中的第一个input元素的value值$("input").val(值) -- 为所有的input元素设置value值6.6.元素属性和css属性操作
<input type="text" name="username" id="inp"/>1、prop()函数 -- 用于获取或设置元素的属性值
在jQuery1.6版本之后才有这个函数，1.6之前版本的jQuery能够应用attr()函数
$("input[type='checkbox']").prop("checked")// 获取input复选框的选中状态, 返回true示意复选框为选中状态,返回false示意复选框为勾销选中状态$("input[type='checkbox']").prop("checked", true)// 设置所匹配的复选框元素为选中状态$("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme$("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成user2、css()函数 -- 用于获取或设置元素的css属性值
$("#div1").css("width") -- 获取id为div1元素的宽度$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px$("#div1").css({ "width" : "200px", "height" : "150px", "border" : "5px solid red", "background" : "pink"}); // 为id为div1的元素设置宽度为200px、高度为150px、边框以及背景色彩等款式7.其余函数
1、each() 函数
$(selector).each(function( index,element ){})// each()函数能够遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)// function中的index -- 示意遍历的元素的下标// function中的element -- 示意以后正在遍历的元素(也能够通过this获取)示例：
$("table tr").each(function(){ //从以后行中获取第二个单元格的内容(以后行的id值) var tempId = $(this).find("td").eq(1).html(); //拿着用户输出的id 和 每一行中的id值进行比拟 if( id == tempId ){ alert("增加失败，id已存在！"); flag = true; //id存在，更新flag的值，true示意已存在！ }});动画函数
2、show()/hide() 函数
show() -- 设置元素由暗藏变为显示
$("div").show(1000) -- 设置所有的div元素为显示,1000示意1000ms=1s -- 示意在1s内实现操作等价于:
$("div").css("display", "block");hide() -- 设置元素由显示变为暗藏
$("div").hide() -- 设置所有的div元素为暗藏等价于:
$("div").css("display", "none");2、toggle()/slideToggle()
toggle() -- 切换元素的显示状态, 如果元素是显示的, 则切换为暗藏, 否则切换为显示
$("div").toggle() -- 设置所有的div元素的状态转换slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为暗藏，否则切换为显示，切换为显示为下拉状态，暗藏为膨胀状态。
8.jQuery为元素绑定点击事件
<script>$(function(){ //当点击btn按钮时,触发点击事件执行其中的函数 $("#btn").click( function(){ alert("input按钮被点击了..."); });});</script><body> <input id="btn" type="button" value="点我~!" /></body>9.js对象和jQuery对象的相互转换
通过JS的形式获取元素，返回的是JS对象，JS对象只能调用JS的属性或函数
通过jQuery选择器获取元素，返回的是jQuery对象（构造像一个汇合），jQuery对象只能调用jQuery的属性或函数。
如果现有JS对象，但咱们须要调用jQuery的属性或函数，能够将JS对象转成jQuery对象；
如果现有jQuery对象，但咱们须要调用JS的属性或函数，能够将jQuery对象转成JS对象；
js对象转成jQuery对象: $(js对象)jQuery对象转成js对象: jQuery对象[下标]