HTML前端知识

最新推荐文章于 2024-05-23 13:39:19 发布

bigDataShare

最新推荐文章于 2024-05-23 13:39:19 发布

阅读量2.9k

点赞数 3

分类专栏： 01-前端知识文章标签：前端知识大全

本文链接：https://blog.csdn.net/sdrfengmi/article/details/79156960

版权

01-前端知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 html

1前端心得

1 前端都是有 1标签2属性3文本 4事件 5方法通过动态的点击事件调用方法来改变标签等()

2 只要请求过来了数据就一直在这个页面,后面的请求的数据会一直保存好到这个页面

3 事件和方法调用时候带()和不带() 区分

整个文件都处于<html>标签中. <HTML>用以声明这是HTML 文件，让浏览器认出并正确处理此HTML 文件。

在HTML文件有两部分<head>与<body>

2 head标签

<head>用于加载一些重要的资讯它的内容不会被显示，只有<body>的内容才会被显示

3 title标签<title>只能出现于<head>中。它代表的是标题

4 body标签 <body>中的内容会被显示。

常用属性: text:用于设定文字颜色 background：用于设定背景图片 bgcolor:用于设定背景色

关于html中颜色取值

颜色由红色、绿色、蓝色混合而成

有三种取取值方式: 1.rgb(0,0,0) 值是在0-255之间2. #000000 #ff0000 #00ff00 #0000ff #ffffff3.red green blue

1排版标签4 p,align,br,hr,

1注释

在html中注释是

在html中使用注释的目的与java中一样。

2 p标签

<p>标签是段落标签，可以将html文档分割为若干段落。浏览器会自动在段落前后添加空格。自动换行并且空出一行

<p>标签常用属性

align:用于设定对齐方式可选值 left right center默认值是left.

3 br标签

<br>标签是换行标签。

因为浏览器会自动的忽略空白与换行，因此<br>标签成为了我们最常用的标签。

4 hr标签

<hr>标签会生成一条水平线。

常用属性:

l align:设置水平线对齐方式可选值 left right center

l size:设置水平线厚度以像素为单位。默认为2

l width:设置水平线长度.可以是绝对值或相对值。 1百分比表示法默认为100% 2数值表示法设置成数值30单位是像素px 可以不写默认是px

l color:设置水平线颜色.默认为黑色

Th标签

5关于html中数值单位

Html的数值默认单位为像素(px).

在有些位置可以使用百分比来设置。

例如: <hr size=’3’>这个就代表水平线厚席为3px. <hr width=’30%’>这个就代表水平线长度为总长度的30%.

2块标签div,span

1. div标签用于在文档中设定一个块区域。常用属性： align:left center right

2. span标签用于在行内设定一个块区域。 Html中绝大多数元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始。例如 div p等

内联元素在浏览器显示时，通常不会以新行来开始。span

3字体标签7 face,size,color,i,stong,del,type

1. font

<font>标签用于规定文本的字体，大小，颜色。

常用属性:

n face:规定文本的字体

n size:规定文本的大小

n color:规定文本的颜色

n <b><b/>:加粗

n <i></i>:斜体标签

n <stong></stong>加粗标签

n <del></del>删除线标签

2. h1-h6

<h1>-<h6>标签用于定义标题. <h1>最大标题 <h6>最小标题

4列表标签 ul,ol.li

1. Ul 无序

<ul>标签表示的是一个无序列表。

常用属性:

l type:规定列表的项目符号类型,可取值disc(实心圆),square(表示空心圆),circle(小方块).默认值为disc

2. li

<li>标签表示的是一个列表项列表属性是横向的 font标签没有作用

常用属性:

l type:这个属性只适用于无序列表，用于设定项目符号，默认值为disc

l value:这个属性只适用于有序列表，用于设定列表的项目数字

3. ol

<ol>表示的是一个有序列表。

常用属性:

l type:这个属性规定列表中使用的标记类型。可取值1 A a I i.

l start:这个属性规定列表的起始值

5图形标签7 img>src,alt,width,height,border,align,title,

1. img

<img>是一个图片标签，用于在页面上引入图片.

常用属性：

l src:用于设定要引入的图片的url

l alt:用于设定图像的替代文字要是图片没有显示出来显示

l width:用于设定图片的宽度

l height:用于设定图片的高度

l border：图片边框厚度

l align:用于设定图片的文字的对齐方式

l Title:鼠标放上去显示的字体

6链接标签a>href,name,target>_self_blank

1. a

<a>标签用于定义超连接，用于从一个页面链接到另一个页面。

常用属性: #表示跳转到当前页面

l href:用于设定链接指向页面的url.

l name:用于设定锚的名称(作为一个锚点)先设置锚点后跳转描点处

l target:用于设定在何处打开链接页面。_self在本页面打开_blank在新页面打开默认是_blank

7表格标签7 table>align,bgcolor,border,width,herght,cellspencing,cellpedding

所有的表格都是自己组合的

在table里面没有align标签在行列里面才有对于里面有font标签的时候(因为font标签会重新默认定义left

对于表格中插入图片或者什么东西如果太大会超出父亲的高度及Table的width 这时候在img里面设置高度宽度就能控制图片的大小

Table>tr*4>tb*5

1. table

<table>标签用于定义表格

常用属性:

l align:用于设定表格的对齐方式只是水平对其方式只对表格不对表格的内容

l bgcolor:用于设定表格的背景颜色。

l border:用于设定表格边框的宽度表里面的线条的宽度也用这个设置

l width:用于规定表格的宽度。

l Height:用于规定表格的高度

l Cellspencing表格内间距

l Cellpedding表格外间距

2. tr

<tr>标签用于定义表格的行,包含一个或多个th或td元素。

<tr>常用属性:

align:用于设定表格中行的内容对齐方式。

bgcolor:用于设定表格中行的背景颜色。

3. td

<td>标签用于定义表格单元

td元素中的文本一般显示为正常字体且左对齐。

<td>常用属性:

l align:用于设定单元格内容的对齐方式。

l bgcolor:用于设定单元格背景颜色。

l height:用于设定单元格的高度。

l width:用于设定单元格的宽度。

l colspan:用于设定列合并

l rowspan:用于设定行合并。

4. caption

<caption>用于定义表格标题

<caption>标签必须紧随<table>标签之后，一个表格只能有一个标题。通常这个标题会被居中于表格之上。

5. th

<th>标签用于定义表格的表头，<th>内部的文本通常呈现为居中加粗文本。

Html表格中有两种类型的单元格：

表头单元格th:包含表头信息。

标准单元格td:包含数据。

6. thead

<thead>标签用于定义表格的页眉

<thead>标签用于组合HTML表格的表头内容。

<thead>元素应该与<tbody>和<tfoot>元素结合起来使用。

注意:<thead>内部必须有<tr>标签。

7. tbody

<tbody>标签用于定义表格的主体

<tbody>标签用于组合HTML表格的主体内容。

8. tfoot

<tfoot>标签用于定义表格的页脚

<tfoot>标签用于组合HTML表格中的表注内容。

9 button

<button id="btnSearch">查询</button> //在form表单里面默认是submit里面加个type属性type="button"就不是submit按钮了

autofocus true | false 在页面加载时，是否让按钮获得焦点。

disabled disabled 禁用按钮

name button_name 为按钮规定为一的名称。

定义按钮的类型。 typebutton resetsubmit

value some_value 为按钮规定初始值。该值可通过脚本改变。

2 form

关于表单的标签，无论我们使用什么语言来完成web开，必然会用到，所有表单标签我们必须很好的掌握

1 form标签10

<form>标签代表一个表单，表单用于向服务器传输数据。表单标签中必须要有表单项

<form>标签能够包含<input>，可以是文本字段，复选框，单选框或提交按钮等。还可以包含<textarea> <select>等。

<form>常用属性:

l name:用于定义表单的名称

l action:用于规定提交表单时向何处发送表单数据。

l method:用于规定提交的方式,一共有7种,最常用的有2种取值 POST或GET

关于post’与get方式区别:

1.在地址栏后面进行数据拼接提交，key(name属性的属性值)=value的方式来拼接

2.数据不安全

3.数据大小有限制。至于具体是多大限制，因浏览器而异

post方法：

1.在http请求的请求体中携带数据。

2.相对较安全

3.对数据的大小可以认为是没有限制。

1 input10种类

按钮不用提交所有不用name

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

关于<input>标签type属性值说明:

1 text value,size,maxlength

定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

其它常用属性:

l 必须有name:定义标签名称

l value:定义标签值用户输入的值就是value

l size:定义输入字段的长度

l maxlength:定义可输入最大字符个数

l placeholder="请输入用户名" 输入框里面隐藏的文本

2 password name,value,size,maxlength

定义密码字段。该字段中的字符被掩码.

其它常用属性:

l 必须有 name:定义标签名称

l 用户输入value:定义标签值

l size:定义输入字段的长度

l maxlength:定义可输入最大字符个数

3 radioname value checked

定义单选按钮。

其它常用属性:

l 必须有name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radion的name值必一样。

l 必须有value:定义标签值用户选择不同的按钮就传入不同的值

l checked:定义该标签默认被选中。

4 checkbox name value

定义复选框。

其它常用属性:

l 必须有 name:定义标签名称.注意，一组的checkbox它们的name值应该是一样的。

l 必须有 value:定义标签值用户选择不同的按钮传入不同的值

l checked:定义该标签默认被选中。

5 button

定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）普通按钮

其它常用属性:

l name:定义标签名称

l value:按钮显示名称 value属性的属性值是显示在按钮上的文字，不内置任何功能，不需要name属性

6 hidden

向服务器提交数据，不让用户知道,定义隐藏的输入字段。

其它常用属性:

l 可写 name:定义标签名称

l 可写 value:定义标签值

7 file

定义输入字段和 "浏览"按钮，供文件上传。

其它常用属性:

l name:定义标签名称必须定义name

8 submit

定义提交按钮。提交按钮会把表单数据发送到服务器。

其它常用属性:

l name:定义标签名称

l value:按钮显示名称

l 设置submit提交按钮式暗色把submit隐藏的属性disabled 改为true 例如$(“#sub”).prop(“disabled”,true)

9 reset

定义重置按钮。重置按钮会清除表单中的所有数据。

其它常用属性:

l name:定义标签名称

l value:按钮显示名称

10 image

定义图像形式的提交按钮。

这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。

其它常用属性:

l name:定义标签名称

l src:定义作为提交按钮显示的图像的url

l alt:定义作用图像的替代文本。

name:表示表单项的名称

value:表示表单项的值

placeholder:表示输入框的提示

checked:表示选中状态

disable:是否可用

readonly:是否只读

maxlength:最大输入长度

什么标签必须有name属性：要提交到服务器去的数据所在的标签都要有name属性。

什么标签必须有value属性：不可以输入，但是要提交到服务器去的。

按钮一般情况下也要有value属性，因为按钮上要显示自定义的文字。

2 select标签

1.<select>

用于定义一个下拉列表必须要有option标签

常用属性:

l 必须有 name:定义下拉列表的名称

l size:定义下拉列表中可见选项的数目

l multiple:定义可选择多个选项

2.<option> 必须要有value值

用于定义下拉列表中的选项。

<option>需要位于<select>标签内部

常用属性:

l 一般会设置 value:定义送往服务器的选项值

l selected:定义选项为选中状态。

3 textarea标签

<textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域) 必须要有name属性

常用属性:

l name:定义多行文本框名称

l cols:定义多行文本框可见宽度相当于给其指定宽度

l rows:定义多行文本框可见行数相当于给其指定高度

l wrap:规定多行文本框中文字如何换行。

了解框架及html中的特殊字符【内容:HTML框架及特殊字符】其它标签与特殊字符

2 其它标签 meta link

1. meta标签

常用属性：

l content:定义与http-equiv或name属性相关的元信息

l http-equiv:把content属性关联到HTTP头部

l name:把content属性关联到一个名称。

2. link标签

常用属性:

l type:定义被链接的文档的MIME类型

l href:定义被链接的文档的URL

l rel:定义当前文档与被链接文档之间的关系。

关于<link>标签详细用法，我们会在css中介绍

1. 特殊字符

Html原始码	显示结果	描述
		不断行的空白符
<	<	小于号
>	>	大于号
®	®	已注册
©	©	版权

以上只是做一个简单了解，更详细信息，请查询html帮助文档。

3 框架标签 frameset frame iframe

所谓框架就是将页面划分成几个窗框，就可以让我们在同一个浏览器中显示不止一个页面。

<frameset>

<frameset>是框架结构标签，它定义如果将窗口分割为框架.

注意:不能与 <frameset></frameset>标签一起使用 <body></body>标签。

常用属性:

l cols:垂直切割

l rows:横向切割

l frameborder:定义框架的边框，其值可以有0和 1，0表示不要边框，1表示要显示边框。

l border:定义框架的边框厚度

l bordercolor:定义框架的边框颜色

l framespacing:定义框架与框架之间的距离。

<frame>

<frame>是框架标签，它定义放置在每个框架中的页面。

常用属性:

l src:定义此框架要显示的页面url

l name:定义此框架的名称

l frameborder:定义框架的边框，其值可以有0和 1，0表示不要边框，1表示要显示边框。

l framespacing:定义框架与框架之间的距离

l bordercolor:定义框架的边框颜色

l scrolling:定义是否显示卷轴，YES表示要显示，NO表示不显示，AUTO视情况而定。

l noresize:定义框架大小不可以改变。

l marginhight:定义框架高度部分边缘所保留的空间。

l marginwidth:定义框架宽度部分边缘所保留的空间。

<iframe>

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

常用属性:

l src:定义些框架要显示的页面url

l name:定义些框架的名称

l width:定义些框架的宽度

l height:定义些框架的高度

l marginwidth:定义插入的页面与框边所保留的宽度

l marginheight: 定义插入的页面与框边所保留的高度

l frameborder:定义框架的边框，1表示显示边框，0表示不显示

l scrolling:定义是否允许卷动，YES允许，NO不允许。

案例说明:

如果浏览器不支持框架，我们可以使用<noframes>

【总结】

对于html我们重点要掌握的:

1. <div>与<sap>及区别

2. 超连接<a>

3. 表格<table> <tr> <td>

4. 表单中的所有标签

5. 其它内容，做为了解，只要可以看懂就可以。

对于我们今天讲的两个案例，希望大空可以掌握。后面我们还会使用。

【课后作业】

问答题:

什么是html，作用是什么？

Html的主要组在部分，其每部分作用？

Html中的<a>标签是什么，并说明其相关属性作用？

Html中怎样显示一个表格，并说明其相关属性作用？

Html中<form>代表什么，其常用属性有哪些，都有什么作用?

get与post请求方式有什么区别？

例举出五种常用表单的标签

怎样可以将radio的内容设置为一组？

操作题

完成案例1-显示商品信息完成案例2-注册窗口

3 Css day03

【教学内容】 CSS介绍导入css Css选择器 CSS属性 CSS框模型

Css的步骤 1导入方式 2选择器 3 css属性

导入js方式 Javascript基础语法-变量声明 Javascript基础语法-数据类型 Javascript基础语法-运算符与表达式 Javascript基础语法-类型转换

Javascript基础语法-条件语句 Javascript基础语法-循环语句

css介绍css是什么

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

样式定义如何显示 HTML 元素,样式通常存储在样式表中,把样式添加到 HTML 4.0中，是为了解决内容与表现分离的问题

多个样式定义可层叠为一

css作用

样式表解决了html的内容与表现分离

使用样式表极大的提高了工作效率。

css书写规则

基本语法

Css规则主要由两部分组成1.选择器2.一条或多条声明

选择器主要作用是为了确定需要改变样式的HTML元素

每一条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号(:)分开

如图:

书写注意事项

如果值为若干单词，则要给值加引号

多个声明之间使用分号(;)分开

css对大小写不敏感,如果涉及到与html文档一起使用时，class与id名称对大小写敏感

1 导入css 4种导入 ★★★:

导入的优先级问题 内联样式表>内部样式表>外部样式表>html基本的设置

1内联样式表

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何 CSS属性例如:

<div style=”border:1px solid black”>这是一个DIV</div>

注意:慎用这种方式，它将内容与显示混合在一起，损失了样式表的优势。一般情况下，这种方式只有在一个标签上只应用一次样式时才会使用

2内部样式表

我们可以使用<style>标签在html文档的<head>中来定义样式表。

例如:

这种方式，样式只适合应用于一个页面

3外部样式表

如果想要在多个页面使用同一个样式表，可以使用外部样式表来导入。我们可以在html页面上使用<link>标签来导入外部样式表。

例如:浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰。

外部样式表，应该以css为后缀来保存，可以使用任意文本编辑器对css文件进行编辑。

下面是mystyle.css文件的内容:

- 优点：可读性较好，可复用性非常强-缺点：.效率略低。因为，客户端在访问html页面的时候，要从服务器请求对应的css文件。

4 @import导入

这种方式也是外部导入。

使用方式如下：

关于@import与引用外部样式表的区别:

1. @import这种方式只有firefox支持，而ie不支持。

2.@import这种方式导入的css，会在整个页面加载后，才会加载样式。如果网络不好情况下，会先看到无样式修饰的页面，闪烁一下后，才会看到有样式修饰的页面。

而使用外部样式表，会先装载样式表，这样看到的就是有样式修饰的页面。

3.@import不支持通过javascript修改样式，而link支持。

2 css选择器

css选择器主要是用于选择需要添加样式的html元素。

对于css来说，它的选择器有很多，我们主要介绍以下几种:

1 三种基本选择器 3种基本类型

一、标签选择器/元素选择器语法：标签名{属性名1:属性值;属性名2：属性值}

二、id选择器(css中一般不用id选择器，id是给js和jQuery使用的)

语法:#id值{属性名1:属性值;属性名2：属性值}记住：在编程界，id永远是唯一的。(大家习惯都设置成不同的值)

三、类选择器语法: .类名{属性名1:属性值;属性名2：属性值}

三种选择器的优先级

id选择器优先级最高 >其次是class类选择器 >再次是元素选择器

2 属性选择器：

语法:标签选择器[属性名='属性值']{属性名:属性值} 标签选择器属性选择器

需求：将用户名的输入框背景色设置成红色，密码输入框的背景色设置成绿色应用场景：用于设置相同的标签各种不同属性下的不同的样式

3 层级选择器

一、层级选择器

需求：将第二行的我是span1变成红色

语法：爷类选择器父类选择器子类选择器孙类选择器{属性名:属性值} 这里面前面可以是任意的选择器中间有空格先属性选择器标签选择器

1并列选择器:选择器1,选择器2{ css代码}

2后代选择器:选择器1选择器2{ css代码} /*选择器1里面所有选择器2*/

3子元素选择器:选择器1 >选择器2{ css代码} /*选择器1里面的第一层选择器2所代表的元

4 伪类选择器

css伪类用于向某些选择器添加特殊效果。

下面我们介绍一下锚伪类。 a标签的伪类选择器

默认状态：link:鼠标移入状态：hover:点击状态：active:点击过后状态： visited:

在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬念状态。

3 css属性

1文本属性：

z-index:1 表示在z坐标轴上的高度是1 越大越拍到最上面

1.color表示文本颜色

2.font-size:字体大小,一定要有单位px

在HTML中单位是px可以省略不写，但是在css中必须写！

3.font-family：字体样式

4.text-align:文字的水平对齐方式

5.text-decoration:文字装饰，有几种取值underline表示下划线, none,linethrough,overline

6 font-style:定义字体风格

7 letter-spacing:定义字符间隔

8 word-spacing:定义字间隔

2背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远远在 HTML之上。

常用属性:

background:简写属性，作用是将背景属性设置在一个声明中

1 background-color:定义背景颜色 white白色为table设置

2 background-image:定义背景图片使用url(相对路径)引入图片

background-position:定义背景图片的起始位置

3.background-repeat:背景图片的平铺方式

repeat:表示横竖都平铺（默认） repeat-x:横向平铺 repeat-y:竖直平铺 no-repeat:不平铺

在工作中的写法：background:颜色图片平铺方式（顺序可以随便）

3尺寸属性

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。常用属性:

width:设置元素的宽度height:设置元素的高度

4 列表属性：

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

常用属性:

l list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。

l list-style-image:用来设置每一列前面的小图标，用自定义的图标list-style-position:定义列表项标志的位置

l llist-style-type:用来设置每一列前面的小图标，使用内置的图标

5 表格

CSS 表格属性可以帮助您极大地改善表格的外观常用属性:

l border-collapse:定义是否把表格边框合并为单一的边框。

l border-spacing:定义分隔单元格边框的距离

l caption-side:定义表格标题的位置

l border-radius: 3px; 设置表格边框的圆角直径

6 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline属性规定元素轮廓的样式、颜色和宽度。常用属性:

l outline:在一个声明中设置所有的轮廓属性

l outline-color:定义轮廓的颜色

l outline-style:定义轮廓的样式

l outline-width:定义轮廓的宽度

7 显示属性：

display:取值3种：none块级表示不显示(隐藏),inline是行级表现显示，block是块级标签显示

visibility:定义元素是否可见或不可见。

9 边框属性：

border-width:变宽宽度border-style:边框样式border-color:边框颜色Border-radius边框圆角弧度

实际工作中的简写border:宽度样式颜色

10 浮动属性

浮动属性:目的为了排版，让本身不在一行的div能够在一行显示

环绕：如果浮动带来了内容的遮盖的话，那么被遮盖的内容就会环绕在浮动的内容四周。

脱离html文件清除浮动：清除浮动带来的影响

Float:right 右浮动 left左浮动 clear清楚浮动

布局(浮动属性)float:针对块级元素(div,table)有效,使用display:inline-black,可以将行内元素转换为块元素

float的值--left:向左浮动,使用-- float:left

float的值--right:向右浮动,使用-- float:right

清除浮动clear:both/left/right,可以是<br clear="all" />进行清除浮动

width/height:宽度高度,只针对块级元素有效

.d1{

width: 200px;

height: 200px;

}

</style>

</div>

</div>

</div>

12 定位

CSS 定位 (Positioning)属性允许你对元素进行定位。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

常用属性:

position:把元素放置到一个静态的,相对的，绝对的，或固定的位置中。

top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量

right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移

left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移

bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。常用属性

clear:设置一个元素的侧面是否允许其它的浮动元素

float:定义元素在哪个方向浮动

cursor:当指向某元素之上时显示的指针类型

display:定义是否及如何显示元素

visibility:定义元素是否可见或不可见。

4 CSS框模型盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

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

边框 9

Border-style solid(默认是实线) 在css属性中盒子的边框样式不写默认是透明的

元素的边框 (border)是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

常用属性:

l border:简写属性，用于把针对于四个边的属性设置在一个声明。

l Width 盒子的宽度Height 盒子的高度

l border-color:简写属性，定义元素边框中可见部分的颜色，或为四个边分别设置颜色。

l border-style:用于定义所有边框的样式，或者单独为各边设置边框样式。边框线的样式

l border-width:简写属性，用于为元素的所有边框设置宽度，或则单独地为各边边框设置宽度

Position : absolute;这是一个独立的模块

l border-top:简写属性，用于把上边框的所有属性设置到一个声明中

l border-right:简写属性，用于把右边框所有属性设置到一个声明中

l border-bottom:简写属性，用于把下边框的所有属性设置到一个声明中

l border-left:简写属性，用于把左边框的所有属性设置到一个声明中。

外边距 4

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin属性，这个属性接受任何长度单位、百分数值甚至负值。

常用属性:

Margin:auto 表示边框在浏览器的中间/*1必须先设置在中间再设置上面是20px*/要不然设置的上面没用

l margin:简写属性，在一个声明中设置所有外边距属性

l margin-top:定义元素的上外边距

l margin-right:定义元素的右外边距

l margin-bottom:定义元素的下外边距

l margin-left定义元素的左外边距

注意:在使用margin来定义所有外边距时，可以使用值复制。

n 如果缺少左外边距的值，则使用右外边距的值。

n 如果缺少下外边距的值，则使用上外边距的值。

n 如果缺少右外边距的值，则使用上外边距的值。

内边距 4

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

常用属性:

l padding:简写属性，作用是在一个声明中设置元素的所有内边距属性

l padding-top:定义元素的上内边距

l padding-right:定义元素的右内边距

l padding-bottom:定义元素的下内边距

l padding-left:定义元素的左内边距。

/*padding: 50px;*/

/*padding-left: 20px;

padding-right: 50px;

padding-top: 20px;

padding-bottom: 50px;*/

/*上右下左*/

/*padding: 20px 50px 100px 200px;*/

/*上下左右*/

/*padding:20px 50px;*/

/*上左右下*/

/*padding: 20px 50px 100px;*/

【笔试面试题】

1. css基本语法是什么

2. css导入方式有几种

3. 外部导入与@import有什么区别

4. Css选择器的作用是什么,并说出常见三种选择器。

5. display=none与visibility=hidden有什么区别

【重点总结】

1. css是什么及其作用

2. css导入方式

3. css选择器及基本语法

4. 可以查询帮助文档，看懂css代码就可以

掌握css样式，可以完成简单的css样。

4 Javascript day04

var aa= username.value;

console.log(aa);

Javascript介绍javascript是什么

l javaScript 是因特网上最流行的脚本语言，它存在于全世界所有 Web浏览器中，能够增强用户与 Web站点和 Web应用程序之间的交互。

l 脚本语言：脚本语言又被称为扩建的语言，或者动态语言，是一种解释型语言，由解释器来运行，用来控制软件应用程序，脚本通常以文本保存，只在被调用时进行解释或编译

l JavaScript 是可插入 HTML页面的编程代码。

l JavaScript 插入 HTML页面后，可由所有的现代浏览器执行。

JavaScript 与 Java 是两种完全不同的语言

javascript作用我们通过javascript可以改变html内容,改变html样式,进行验证输入等。

javascript组成核心ECMAScript 文档对象模型DOM 浏览器对象模型 BOMjavascript的核心ECMAScript描述了语言的语法和基本对象。

1 Js基本语法

1 导入js方式变量声明类型转换

在html页面中直接插入javascript

js的三种引入方式

第一种：行内脚本写在标签内一定要有事件监听，οnclick="js代码"

第二种：内部脚本语法：script标签，里面写js代码

第三种：外部脚本语法：在外部声明一个js文件，然后使用script标签引入。

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript是所有现代浏览器以及 HTML5中的默认脚本语言。注意:<script>标签可以出现在html页面的任意位置，但实际操作中，一般会写在<head>标签中。.

1注意:外部的js文件中不能包含<script>标签。 2在导入外部js文件的<script>标签中不能在写javascript代码。

2 变量声明 5种

javascript中的变量与我们在java中的变量一样。在javascript中使用用 var 运算符（variable的缩写）加变量名定义的

JavaScript 变量名称的规则：

变量对大小写敏感（y 和Y 是两个不同的变量）

变量必须以字母或下划线开始

注意：由于 JavaScript对大小写敏感，变量名也对大小写敏感。

Javascript基础语法-数据类型在ECMAScript中，变量可以存在两种数据类型，即原始类型与引用类型。

原始类型

原始类型，可以理解成是一个值类型。简单说，就是一个字面值，它是不可变的，例如: 10 “abc”

ECMAScript有五种原始类型

n String 在javascript中字符串字符串字面值，可以使用单引号或双引号声明。

n Number 在javascript中任何数字都看成是Number类型，它即可以表示32位整数，也可以表示64位浮点数。八进制首数字必须是0,十六进制使用0x开始。

n Boolean 它有两个值true和false.

n Undefined:该类型只有一个值undefined.表示的是未初始化的变量

n Null 该类型只有一个值null,表示尚未存在的对象。值undefined实际上是从值null派生出来的。因此null==undefined得到的结果是true.

n 对变量或值调用 typeof 运算符将返回下列值之一：

n undefined - 如果变量是 Undefined类型的

n boolean - 如果变量是 Boolean类型的

n number - 如果变量是 Number类型的

n string - 如果变量是 String类型的

n object - 如果变量是一种引用类型或 Null类型的

注意：您也许会问，为什么 typeof运算符对于 null值会返回 "Object"。这实际上是JavaScript 最初实现中的一个错误，然后被ECMAScript 沿用了。现在，null被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

引用类型

引用类型通常叫做类(class),也就是说，遇到引用值，所处理的就是对象。

从传统意义上来说，ECMAScript 并不真正具有类。

ECMAScript 定义了“对象定义”，逻辑上等价于其他程序设计语言中的类。

对象是由 new 运算符加上要实例化的对象的名字创建的

var obj=new Object();

Object对象自身用处不大，但是 ECMAScript 中的 Object 对象与Java 中的java.lang.Object 相似，ECMAScript中的所有对象都由这个对象继承而来，Object对象中的所有属性和方法都会出现在其他对象中

常用的javascript对象有Boolean,Number,Array,String,Date,Math,RegExp.

可以使用instanceof运算符来判断对象的类型。

3 类型转换 3

ECMAScript为开发者提供了大量的类型转换方法。大部分类型具有进行简单转换的方法，还有几个全局方法可以用于更复杂的转换。Boolean 数值、数字和字符串的原始值它们是伪对象，这意味着它们实际上具有属性和方法。

后者把值转换成浮点数。只有对 String类型调用这些方法，它们才能正确运行；对其他类型返回的都是 NaN。

parseInt(); 将字符串转出整型

parseFloat();

数据类型之间的转换

1 string转number//1.parseInt(),转换成整数。//2.parseFloat()，转换成浮点型。

2 number转string要转换的变量调用toString()方法。

3 //使用new Boolean()

4 valueof() 查看该变量是什么类型

//string转boolean，空串就是false，非空就是true。

//number类型转换成boolean,0为false，非零为true。

encodeURI()

decodeURI()encodeURIComponent()

decodeURIComponent()

l eval() :将一段字符串当成一个JS的代码来运行.

l 测试强制转换成数字类型

l 测试强制转换成字符串 null不能调用对象

4 运算符与表达式

一元运算符

++ 自加 --自减 void运算符

void运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值，例如，从 HTML的 <a>元素调用 JavaScript函数时。要正确做到这一点，函数不能返回有效值，否则浏览器将清空页面，只显示函数的结果。例如：

<a href="javascript:window.open('about:blank')">Click me</a>

如果把这行代码放入 HTML页面，点击其中的链接，即可看到屏幕上显示 "[object]"。这是因为window.open() 方法返回了新打开的窗口的引用。然后该对象将被转换成要显示的字符串。要避免这种效果，可以用void 运算符调用window.open() 函数：

<a href="javascript:void(window.open('about:blank'))">Click me</a>

这使 window.open()调用返回 undefined，它不是有效值，不会显示在浏览器窗口中。

提示：请记住，没有返回值的函数真正返回的都是 undefined。

逻辑运算符

逻辑运算会有三种 NOT AND OR

在学习各种逻辑运算符之前，让我们先了解一下 ECMAScript-262 v5 规范中描述的 ToBoolean 操作。

参数类型	结果
Undefined	false
Null	false
Boolean	结果等于输入的参数（不转换）
Number	如果参数为 +0, -0 或 NaN，则结果为false；否则为true。
String	如果参数为空字符串，则结果为 false；否则为 true。
Object	true

l 逻辑NOT运算符

n 如果运算数是对象，返回 false

n 如果运算数是数字 0，返回true

n 如果运算数是 0 以外的任何数字，返回false

n 如果运算数是 null，返回true

n 如果运算数是 NaN，返回true

n 如果运算数是 undefined，发生错误

l 逻辑AND运算会

运算数 1	运算数 2	结果
true	true	true
true	false	false
false	true	false
false	false	false

l 逻辑OR运算符

运算数 1	运算数 2	结果
true	true	true
true	false	true
false	true	true
false	false	false

Ø 加性运算符

某个运算数是 NaN，那么结果为NaN。

-Infinity 加 -Infinity，结果为-Infinity。

Infinity 加 -Infinity，结果为NaN。

+0 加 +0，结果为+0。

-0 加 +0，结果为+0。

-0 加 -0，结果为-0。

不过，如果某个运算数是字符串，那么采用下列规则：

如果两个运算数都是字符串，把第二个字符串连接到第一个上。

如果只有一个运算数是字符串，把另一个运算数转换成字符串，结果是两个字符串连接成的字符串。

Ø 关系运算符

关系运算符有>(大于),<(小于) >=(大于等于) <=(小于等于) ,它们的运算结果返回的是一个boolean值。

l 常规比较

n 如果是数学，那么比较与我们在java中操作一样。

n 如果是两个字符串使用关系运算符操作，那么我们可以简单理解成是按照字母的码值来比较。比较容易理解的是根据字母顺序，在前的字母比在后的小，所有的小写字母都大于大写字母。

l 比较数字或字符串

n 如果两个数字字符串比较，例如:”23”<”3”,它们也是按照数字在码表中的码值来比较.

n 如果一个是数字一个是字符串，那么会将字符串转换成数字在进行比较。

Ø 等性运算符

ECMAScript提供了两套等性运算符：等号与非等号用来处理原始值，全等号与非全等号来处理对象。

执行类型转换的规则如下：

· 如果一个运算数是 Boolean值，在检查相等性之前，把它转换成数字值。false转换成 0，true为 1。

· 如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。

· 如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。

· 如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。

在比较时，该运算符还遵守下列规则：

· 值 null和 undefined相等。

· 在检查相等性时，不能把 null和 undefined转换成其他值。

· 如果某个运算数是 NaN，等号将返回false，非等号将返回true。

· 如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。

全等号由三个等号表示（===），只有在无需类型转换运算数就相等的情况下，才返回true。

非全等号由感叹号加两个等号（!==）表示，只有在无需类型转换运算数不相等的情况下，才返回true。

Ø 三元运算符这里的三元运算符可以输出语句;

在js中也存在三元运算符，与java中使用方式一样。例如:

var max = (num1 > num2) ? num1 :num2;

这个表达式描述的就是如果num1大于num2，那么max的值就是num1,返回之max的结果就是num2.

对于int 只有一个数值要是0为false

对于String只有一个数值要是空串为FALSE

Ø 赋值运算符

简单的赋值运算符由等号（=）实现，只是把等号右边的值赋予等号左边的变量

每种主要的算术运算以及其他几个运算都有复合赋值运算符：

乘法/赋值（*=）

除法/赋值（/=）

取模/赋值（%=）

加法/赋值（+=）

减法/赋值（-=）

Ø 逗号运算符

用逗号运算符可以在一条语句中执行多个运算。例如:

var a=1,b=2,c=3;

2 条件循环语句

1 if语句

javascrip中的if语句，与我们在java中使用基本相同，例如:

if (i > 30) {

alert("大于 30");

}else {

alert("小于等于 30");

}

2 switch语句

switch语句也与我们在jdk1.7中使用相同，也就是说，它可以直接判断字符串类型

var BLUE = "blue", RED = "red", GREEN = "green";

switch (sColor) {

case BLUE: alert("Blue");

break;

case RED: alert("Red");

break;

case GREEN: alert("Green");

break;

default: alert("Other");

}

3 循环 for in

在javascript中也存在循环语句for while do-while， for in 基本与在java中使用相同.

1 Java中foreach循环，js中是for in循环 index就是得到的元素(可以换成任意字母) arr为数组

var arr = [1,2,true,"哈哈哈"];

for(index in arr){

alert(arr[index]);

}

for示例

var iCount = 6;

for (var i = 0; i < iCount; i++) {

alert(i);

}

注意:在声明变量归我们使用var

while示例

var i = 0;

while (i < 10) {

i += 2;

}

do-while示例

var i = 0;

do {

i += 2;

} while (i < 10);

注意:在while后面的分号

【笔试面试题】

Javascript中2==”2”与2===”2”的结果是什么，为什么？

【重点总结】

Javascript中的数据类型

Javascript中的运算符

Javascript中的控制语句

【总结】

对于css我们只需要掌握其基本语法结构与选择器，其它的做为了解，在开发中可以看懂css代码，并完成简单的修改就可以。

Javascript在现在的web开发中应用越来越多，对于javascript希望大家回以重视，希望大家可以将所有的javascript内容掌握。

【课后作业】

问答题

什么是css,作用是什么？

怎样在html中导入css?

Css的语法结构是什么样的？

Css选择器的作用是什么，并例举出三种常用的css选择器

什么是javascript，作用是什么？

怎样在html中导入javascript?

Javascript中怎样声明一个变量？

简述javascript中的数据类型

操作题

完成案例1-显示商品信息完成案例2-注册窗口

3 javascript常用对象

了解Boolean对象了解Number对象掌握 Array对象掌握 String对象掌握 Date对象掌握 Math对象掌握RegExp对象

1 Boolean

Boolean对象描述

在 JavaScript 中，布尔值是一种基本的数据类型。Boolean 对象是一个将布尔值打包的布尔对象。Boolean对象主要用于提供将布尔值转换成字符串的 toString()方法。

Boolean对象创建

Boolean 对象表示两个值："true"或 "false"。

创建 Boolean 对象的语法：

new Boolean(value);//构造函数

Boolean(value);//转换函数

参数参数 value 由布尔对象存放的值或者要转换成布尔值的值。

返回值

当作为一个构造函数（带有运算符 new）调用时，Boolean()将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean对象。

如果作为一个函数（不带有运算符 new）调用时，Boolean()只将把它的参数转换成一个原始的布尔值，并且返回这个值。

注释：如果省略 value参数，或者设置为 0、-0、null、""、false、undefined或 NaN，则该对象设置为false。否则设置为true（即使value 参数是字符串"false"）。

2 Number

Number对象描述

在 JavaScript 中，数字是一种基本的数据类型。JavaScript 还支持 Number对象，该对象是原始数值的包装对象。在必要时，JavaScript会自动地在原始数据和对象之间转换。

Number对象创建

Number 对象是原始数值的包装对象。

创建 Number 对象的语法：

var myNum=new Number(value);

var myNum=Number(value);

参数

参数 value 是要创建的Number 对象的数值，或是要转换成数字的值。

返回值

当 Number() 和运算符new 一起作为构造函数使用时，它返回一个新创建的Number 对象。如果不用new 运算符，把Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回NaN）。

3 Array

Array 对象用于在单个的变量中存储多个值。

创建 Array 对象的语法：() 中括号都可以[]

new Array();

new Array(size);

new Array(element0, element1, ..., elementn);

参数

参数 size 是期望的数组元素个数。返回的数组，length字段将被设为 size 的值。

参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数Array() 时，新创建的数组的元素就会被初始化为这些值。它的length 字段也会被设置为参数的个数。

返回值

返回新创建并被初始化了的数组。

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。

当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined的数组。

当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

4 String

String 对象描述

字符串是 JavaScript 的一种基本的数据类型。

String 对象的 length属性声明了该字符串中的字符数。

String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。

需要注意的是，JavaScript 的字符串是不可变的（immutable），String类定义的方法都不能改变字符串的内容。像 String.toUpperCase()这样的方法，返回的是全新的字符串，而不是修改原始字符串。

String对象创建

String 对象用于处理文本（字符串）。

创建 String 对象的语法：

new String(s);

String(s);

参数

参数 s 是要存储在 String 对象中或转换成原始字符串的值。

返回值

当 String() 和运算符new 一起作为构造函数使用时，它返回一个新创建的String 对象，存放的是字符串 s 或 s 的字符串表示。

当不用 new 运算符调用String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。

5 Date

Date 对象创建

Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var myDate=new Date()

注释：Date 对象会自动把当前日期和时间保存为其初始值。

6 Math

Math对象创建

Math 对象用于执行数学任务。

使用 Math 的属性和方法的语法：

var pi_value=Math.PI;

var sqrt_value=Math.sqrt(15);

注意：Math对象并不像 Date和 String那样是对象的类，因此没有构造函数 Math()，像Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把Math 作为对象使用就可以调用其所有属性和方法。

7 RegExp

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性"g"、"i"和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript标准化之前，不支持 m属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

返回值

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么RegExp() 构造函数将用与指定的RegExp 相同的模式和标志创建一个新的RegExp 对象。

如果不用 new 运算符，而将RegExp() 作为函数调用，那么它的行为与用new 运算符调用时一样，只是当 pattern是正则表达式时，它只返回 pattern，而不再创建一个新的RegExp 对象。

2 javascript函数与事件

1 Javascript函数创建与使用 3种

创建函数

在ECMAScript中函数有以下几种创建方式

第一种

function 函数名称(参数列表){

函数体;

}

第二种

var 函数名称=function(参数列表){

函数体;

}

第三种(了解)

Var 函数名称=new Function(参数列表,函数体);

以上操作，都可以创建函数，我们只要求掌握第一种与第二种，对于第三种大家了解就可以。

调用函数

函数可以通过其名字加上括号中的参数进行调用。

示例1

//使用function函数名称(参数列表){}方式来创建函数

function add(a, b) {

alert(a + b);

}

//调用函数

add(10, 20);

</script>

示例2

//使用 var函数名称=function(参数列表)来创建函数

var add = function(a, b) {

alert(a + b);

}

//函数调用

add(10, 20);

</script>

示例3

var add = new Function("a", "b", "alert(a+b)");

add(10, 20);

</script>

问题:如果我们在调用函数时，使用add(1,2,3,4)是否会出现问题哪?

如果是在java中我们这样调用一定会有问题的，但是对于javascript来说，是不会有问题的。

简单的说，也就是函数调用时传递的参数不一定要与函数声明时的参数个数一致。

问题:如果调用时传递的参数与函数定义时参数个数不一致，那么我们在函数中如果获取多余的参数哪?

在javascript中有一个特殊的对象arguments,我们可以通过它来获取所有函数中的参数。

//创建函数

function add(a, b) {

//在函数中如果要获取所有参数列表中的信息可以使用argument来操作

for(var i=0;i<arguments.length;i++){

alert(arguments[i]);

}

add(1,2,3,4);

</script>

函数参数与返回值

在java中我们定义一个方法，如果这个方法有返回值，我们必须做到以下两点:

1. 在方法声明时，必须声明其返回值类型，如果无返回值需要使用void。

2. 方法有返回值，我们在方法中需要使用return来返回结果。

那么我们在javascript中应该怎样处理一个函数的返回值哪?

对于javascript来说，我们不必须在创建函数时，来声明其返回值类型，无返回值也不需要使用void来声明,但是，如果一个函数要想返回结果，我们在函数中必须使用return来返回结果。

//创建函数

function add(a, b) {

//返回a与b的和

return a+b;

}

//在调用函数时，我们就可以直接使用一个变量来接收函数的返回结果

var sum=add(1,2,3,4);

alert(sum)

</script>

2 Javascript全局函数介绍

3事件绑定2种方法

在事件种可以套用事件但是在事中不能套用函数函数只有在事件执行的时候才起到作用

绑定事件的2种方法

1 在srcipt中绑定//给按钮绑定点击事件

//1.获取按钮

var btn = document.getElementById("btn");

btn.onclick = function(){

fn4();

}

事件加载完绑定window.onload = function(){

//1.找到事件源

var user = document.getElementById("user");

//2.绑定

user.onchange = function(){

fn();

}

2 标签上绑定直接在标签上事件调用方法

2事件绑定

在javascript中事件经常与函数一起使用，那么我们介绍一下怎样将一个事件与函数绑定到一起，简单说，就是某个事件被触发后，函数如果被调用。

html事件属性

html dom分配事件

document.getElementById("myBtn").οnclick=function(){ displayDate() };

</script>

3 阻止默认事件

if(e&&e.stopPropagation){

e.preventDefault();

}else{

window.event.returnValue = false;

}

4 阻止事件传播

if(e&&e.stopPropagation){

e.stopPropagation();

}else{

window.event.cancelBubble = true;

}

4得到变量的几种方法

1 变量得到值 var str = "alert('哈哈哈')"; 封装框架的时候使用的多。 window.eval(str);

2 变量得到方法 var itv = setInterval(function(){ alert("执行了"); },2000);清楚循环事件 function fn(){clearInterval(itv);}

3 变量得到标签 var btn = document.getElementById("btn");

4 事件后必须匿名对象运行 window.onload = function(){}

8 appendchild() 添加也会从浏览器上消失原来的在括号里直接可以添加 Element标签元素在浏览器上消失原来的元素

6 var xx= function(){}; 这是不行的就是xx直接得到后面的函数一样

事件通常与函数配合使用，这样我们可以通过发生的事件来驱动函数执行.

5常见事件:10

【JS的定时操作】事件里面能套用事件但是函数里面不能套用函数

setInterval(); 循环执行事件 clearInterval(); 括号里是清楚的变量名就是相当于清楚这个对象一样让其不再执行了

setTimeout(); 执行一次事件 clearTimeout(); 括号里是清楚的变量名就是相当于清楚这个对象一样让其不再执行了

1 onclick：鼠标点击某个对象 >>> <input>标签

2 οnsubmit="return checkForm()" checkForm()方法返回过来的是true和false 然后再用return返回回去是否提交按钮

3 onload：文档结束加赞的时候运行一个页面只能有一个只对于js,不应用于jQuery

4 onchange ：文本被改动了下拉列表上, from的input的text文本输入框上 select的option选择上

5 onkeydown ：键盘按下

6 onkeyup ：键盘抬起

7 onmouseover ：鼠标在上面 onmouseout ：鼠标离开 onmousemove ：鼠标移动 onmousedown ：鼠标点击

8 ondblclick ：双击

9 onblur ：失去焦点 onfocus ：获得焦点

3 Js修改1标签2属性3文本

【CSS控制显示和隐藏的属性】

display: block :显示的 none:隐藏的

常用事件之前使用的事件：

对于js得到标签元素4种

这是数组长度改变值的两种方法

city.innerHTML = "<option value=''>----请-选-择-市----</option>";

city.length = 1; 只保留前几个数值对父标签的子标签有用例如select标签只保留一个option标签对于表格table不管用

文档节点 document文档节点element元素节点 attribute属性节点 text文本节点

一 4种方法获取element元素节点(dom对象)

1.先得到对象 4个得到

1 getElementById(“id值”) 当括号里面是select标签的id值得到的是select对象标签但是可以可以对象[0]表示第一个option标签这个得到的是对象数组但是对于table不可以只是得到table对象只能获取第一个id值如果下面的id值一样其他的获取不了

2 getElementsByTagName(“标签名”) 得到该标签名下的标签对象集合

3 getElementsByName(name属性值) 得到标签对象集合

4 getElementsByClassName(类名) 得到类名的对象

5 var opts = ed.getElementsByTagName("option"); 父标签下得到子标签层级得到

6 beijing.parentElement; 在子标签下得到父标签

集合对象.length = 1; 把集合的长度设置成了1 以为在select的都下拉框对象的时候这个也得到option标签的集合这个是特殊

2标签操作增删改查 5个

1对子节点,hasChildNodes():查询是否有子节点,

2 document.createElement("标签名")创建子节点

3父节点.appendChild(子节点):添加子节点,

4 父节点.replaceChild(新节点,参考节点)替换子节点参考节点就会被删除(这两个节点都是页面上的节点)

5 父节点.removeChild(子节点),删除子节点节点.remove() 自删除

7 ct.insertBefore(tianjin,chongq); 父标签调用在子标签前面加入一个标签

3属性操作attribute

1 setAttribute("属性名","属性值");设置属性，可以是任意属性

2 getAttribute("属性名"),获取属性值

3对象.属性名只能获取标签内置的属性例如 var tp = username.type; 同时可以修改属性值

4 得到css属性color = this.style.backgroundColor;

5 修改标签的css style属性标签元素.style.display = "block";

6 child[i].checked = all.checked; 是否选中按钮单选多选框把子标签的是否选中设置成父标签的是否选中select

7 selected;用于确定选择框里面选中的是那个元素这个支持多选

4 文本操作同时可以+= 属性操作标签操作

1 ct.innerHTML = "<h1><font color='red'>海马</font></h1>" //重写标签值可以解析HTML代码得到和设置对象标签的文本在对象<>范围内的重写成这个

2 ct.innerText = "<h1><font color='red'>海马</font></h1>"; //不可以解析HTML代码

alert(this.value);//内容发生改变的时候执行这里必须用this不能用ipts[i] 因为在加载的时候i值已经越界了并且月结的i标签没有绑定事件随意不能用i 及时你用ipts[i-1] 也不行这时候虽然没有越界但是每次触发事件都是最后那个标签在调用

10其他节点替换子节点

//双击北京节点，将被反恐节点替换

//1.找到北京节点var beijing = document.getElementById("bj");

//2.绑定双击事件beijing.ondblclick = function(){

//3.找到北京的父节点var ct = beijing.parentElement;

//4.找到反恐节点 var fankong = document.getElementById("fk");

//5.父节点替换子节点 ct.replaceChild(fankong,beijing);

11添加子标签第一种直接添加

13 在子标签的后面加入标签insertAfter这是jq的方法

1 修改标签的style属性标签元素.style.display = "block";

2 清楚设置事件频率

【笔试面试题】

Javascipt中怎样创建函数

Javascript中怎样获取函数的参数列表

Javascript中的eval函数有什么作用

例举出javascript中五种常用事件

Javascript中怎样完成事件的注册(绑定)

【重点总结】

函数创建全局函数使用事件的使用

5 三种弹窗工具

l 第一种，警告框，alert() 警告框里填什么就显示出来什么

window.可以省略

window.alert("哈哈哈");

l 第二种，确认框，confirm(); 得到的是true和false Boolean类型

返回值为boolean类型，确定为true，取消为false

var result = confirm("确定要删除吗?");

alert(result);

l 第三种，输入框，prompt() 得到的是你键盘输入的值

var res = prompt("请输入工资查询密码");

alert(res);

6 传参数

在js里面必须传个参数才可以

1 匿名function函数前面有事件下面的this就代表了这个对象

2 直接传过来一个参数然后用这个参数接收

3要是直接写的一个函数下面使用this这个this是window 虽然这个函数被调用了但是不是那个对象

6 对象Window bom dom

掌握Window对象的使用

掌握History对象的使用

掌握Location对象的使用

了解Dom的概念

掌握dom对象获取与操作信息

【内容:javascript BOM与DOM介绍】

Javascript中bom介绍

IE 3.0 和 Netscape Navigator 3.0提供了一种特性 - BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使BOM 独树一帜且又常常令人怀疑的地方在于，它只是JavaScript 的一个部分，没有任何相关的标准。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript扩展都被看做 BOM的一部分。这些扩展包括：

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口大小

提供 Web 浏览器详细信息的定位对象

提供用户屏幕分辨率详细信息的屏幕对象

对 cookie 的支持

IE 扩展了 BOM，加入了ActiveXObject 类，可以通过JavaScript 实例化ActiveX 对象

由于没有相关的 BOM 标准，每种浏览器都有自己的BOM 实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

1 Window对象

Window 对象表示浏览器中打开的窗口

如果文档包含框架（frame 或 iframe 标签），浏览器会为HTML 文档创建一个window 对象，并为每个框架创建一个额外的window 对象

cation.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

var datas = new Array(2);

datas["辽宁省"] = new Array("沈阳市","鞍山市","大连市"); datas["吉林省"] = new Array("长春市","吉林市","松原市","延边市");

alert(datas["辽宁省"]); 这时候打印的是沈阳市,鞍山市,大连市他识别的是第一个和最后一个双引号

alert(datas); 这时候打印的是空

2 History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是window 对象的一部分，可通过window.history 属性对其进行访问。

History.go() 方法

3 Location对象

Location 对象包含有关当前 URL的信息。

Location 对象是 Window对象的一个部分，可通过 window.location属性来访问。

对于Location对象，我们只需要掌握href这个属性就可以，它的作用是设置或返回完整的URL。

location.port 返回 web 主机的端口（80或 443）

location.protocol 返回所使用的 web 协议（http://或 https://）

Window Location Href

location.href 属性返回当前页面的 URL。

4 Javascript中dom介绍

DOM（文档对象模型）是 HTML和 XML的应用程序接口（API）。DOM将把整个页面规划成由节点层级构成的文档。HTML或 XML页面的每个部分都是一个节点的衍生物。请考虑下面的 HTML页面：

这段代码可以用 DOM 绘制成一个节点层次图：

DOM 节点层次图

DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。

W3C DOM 标准被分为 3个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML文档的标准模型

HTML DOM - 针对 HTML文档的标准模型

XML DOM 定义了所有 XML元素的对象和属性，以及访问它们的方法。

HTML DOM 是：

HTML 的标准对象模型

HTML 的标准编程接口

W3C 标准

HTML DOM 定义了所有 HTML元素的对象和属性，以及访问它们的方法。

常用的Dom

Document:文档对象.代表的是加载到内存中的整个的文档.

方法：

ldocument.getElementById(“”);

ldocument.getElementsByName(“”);

ldocument.getElementsByTagName(“”);

ldocument.createElement(“”);

Element:元素对象.代表文档中的每个元素（标签）

lfirstChild：获得其第一个孩子节点

llastChild：获得其最后一个子节点

方法：

lappendChild();将节点添加到当前节点的最后.

linsertBefore();将节点添加到某个元素之前.

Attribute:属性对象.代表元素上的属性.

Document,Element,Attribute统称为Node（节点）

XML DOM与HTML DOM的关系

XML DOM 定义了访问和处理 XML 文档的标准方法

HTML文档格式符合XML语法标准，所以可以使用XML DOM API

在XML DOM每个元素都会被解析为一个节点Node，而常用的节点类型又分为

元素节点 Element

属性节点 Attr

文本节点 Text

文档节点 Document

HTML DOM 定义了针对 HTML文档的对象，可以说是一套更加适用于JavaScript 技术开发的API

HTML DOM是对XML DOM的扩展

进行 JavaScript DOM开发可以同时使用XML DOM和HTML DOM

getElementById() 方法

getElementById() 方法返回带有指定ID 的元素

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

getElementsByName() 方法

getElementByName() 返回带有指定name的所有元素。

innerHTML属性

获取元素内容的最简单方法是使用 innerHTML属性。

innerHTML 属性对于获取或替换HTML 元素的内容很有用。

【笔试面试题】

简单说一下什么是javascript的dom与bom对象

常用的bom对象有哪些

【重点总结】

Window,History,Location对象的使用

DOM的简单操作

7 javascript案例-注册表单校验

在前面我们已经完成过一个注册页面.当我们点击”提交”按钮时，会将表单中的数据提交到action指定的位置,在开发中，我们经常需要对数据进行验证，例如：邮箱，会员名，密码等不能为空，会员名长度，密码长度需要符合规定，邮箱格式要正确等，那么我们这时就需要对表单中的数据进行校验。

前面我们已经学过了正则，以下我们在对表单数据进行验证时，就会使用到正则表达式，并且会使用上面提到过的dom来显示一些错误信息。

需求:

1. 验证邮箱符合规则，并且不能为空

2. 验证会员名密码不能为空，并且保证长度至少6位

3. 重复密码要与密码一致.

分析:

1. 验证非空 /^\s*$/

2. 验证邮箱符合规则，正则表达式是: /^(\w)+@(\w)+(\.\w+)+$/

3. 验证会员名与密码长度至少6位/^ (\w){6,}$/

4. 验证重复密码与密码一致，我们不需要使用正则，直接比较就可以。

5. 对于上述操作，我们在使用时，可以使用javascript中提供的test方法完成。

6. 为了保证数据不正确情况下，表单不能提交，我们需要使用onsubmit，如果绑定的函数返回的是false,表单就不能被提交

实现:

function checkForm(){

//1.获取数据

var email=document.getElementById("email");

var username=document.getElementById("username");

var password=document.getElementById("password");

var repassword=document.getElementById("repassword");

//2..验证非空

if(checkNull(email.value)){

//如果返回true,代表email为空

document.getElementById("email_msg").innerHTML="<font color='red'>邮箱不能为空</font>";

return false;

}

if(checkNull(username.value)){

//如果返回true,代表email为空

document.getElementById("username_msg").innerHTML="<font color='red'>会员名不能为空</font>";

return false;

}

if(checkNull(password.value)){

//如果返回true,代表email为空

document.getElementById("password_msg").innerHTML="<font color='red'>密码不能为空</font>";

return false;

}

if(checkNull(repassword.value)){

//如果返回true,代表email为空

document.getElementById("repassword_msg").innerHTML="<font color='red'>重复密码不能为空</font>";

return false;

}

//3.验证邮箱符合规则

if(!checkEmail(email.value)){

//如果返回true,代表符合规则

document.getElementById("email_msg").innerHTML="<font color='red'>请输入有效的邮箱地址</font>";

return false;

}

//4.验证会员名或密码长度大于6位

if(!checkLength(username.value)){

document.getElementById("username_msg").innerHTML="<font color='red'>会员名长度必须大于6位</font>";

return false;

}

if(!checkLength(password.value)){

document.getElementById("password_msg").innerHTML="<font color='red'>会员名长度必须大于6位</font>";

return false;

}

//5.验证两次输入密码一致

if(password.value!=repassword.value){

document.getElementById("repassword_msg").innerHTML="<font color='red'>两次密码输入不一致</font>";

return false;

}

return true;

}

//验证长度

function checkLength(data){

var reg=/^\w{6,}$/;

return reg.test(data);

}

//验证邮箱

function checkEmail(data){

var reg=/^(\w)+@(\w)+(\.\w+)+$/;

return reg.test(data);

}

//验证非空

function checkNull(data){

var reg=/^\s*$/; //0个或多个空字符串

return (reg.test(data))//如果data符合规则，返回true，否则返回false

}

</script>

【总结】

【课后作业】

问答题

Javascript创建函数有几种方式

Javascript中函数调用与java中有什么区别

Javascript中函数是否有参数与返回值，与java中有什么区别

Javascript中函数创建有

javascript中怎样完成事件的绑定

例举出javascript中常见的五种事件

什么是dom,它有什么作用

setInterval()与setTimeout有什么区别？

Xml中的节点有几种

Dom操作中获取节点方式有几种

操作题

完成练习表单校验

5 Jquery day06

1小知识点

1 This在jQuery默认得到js的对象的形式在jquery中要转换成jquery对象$(this)

2 Jquery是对HTML的css html的集体操作都是对1标签2属性3文本操作得到标签对象以后对上面三个分别修改

1修改颜色 js修改this.style.backgroundColor = "green"; jquery修改 .css这是jquery的方法 $("#user").css("background-color","green");

2 修改value的属性值js修改$("#user")[0].value = "李四"; jquery修改val()这是jquery的方法 alert($(this).val());

1 val()方法获取和设置属性，只能获取和设置表单项的value属性 $("[type='text']").val("李四");

2 attr(),如果是获取属性.attr("属性名"),如果是设置属性.attr("属性名","属性值"); $("[type='text']").attr("value","李四");

3 prop(),如果是获取属性.prop("属性名"),如果是设置属性.prop("属性名","属性值") 这个一般都是用来设置boolean类型的属性

prop()方法是新出来的，1.6之后提出来的，用来取代attr()方法的。 $("[type='text']").prop("value","李四");

4 .css(),如果是获取css样式属性.css("属性名"),如果是设置css属性.css("属性名","属性值")

$("[type='button']").css("background-color","green"); $("[type='button']").css("color","red");

5 设置类名，addClass("类名") $("[type='button']").addClass("c1");

1方法先基本选择器查找再多级选择器查找层次过滤选择器

2绑定事件

3修改增删改查标签增删改查属性增删改查元素替换

$items.prop("checked",!$items.prop("checked"));不行！！！！乱套了

使用js对象

用js 来获取原来的背景色 color = this.style.backgroundColor;

用js 来获取HTML的一般是否选中属性 this.checked

得到元素 HTML基本的属性文本的方法

得到元素 css的属性文本方法

使用jquery对象

用jquery对象得到背景色 $(this).css("background-color","deepskyblue");

$(this).prop("style","background-color: red;")

用jquery对象得到是否选中对象$(revers1[i]).prop("checked")

得到元素 HTML基本的属性文本的方法

得到元素 css的属性文本方法

C. $("input[type=button]")

E. $("input[name]");

D. $cks[i].checked

1获取一个jquery对象 2

1 $("选择器") 或者2 jQuery("选择器") jquery得到的都是集合标签对象

2 js 对象和jquery对象之间的转换

dom对象===>jquery对象 $(js对象) $(this)

jquery对象===>dom对象方式1:jquery对象[index]方式2:jquery对象.get(index) $(“#id”).get(0)

3 页面加载:js: window.οnlοad=function(){}//在一个页面中只能使用一次

Jquery 页面加载在一个页面中可以使用多次方式1: $(function(){...}) 方式2: $(document).ready(function(){});

2绑定事件:3

Jquery绑定事件都是绑定的所有集合种的对象因为jquery得到的是集合对象,直接就给里面的全部绑定了不用重新遍历一一绑定

1绑定一个事件 $("选择器").click(function(){...});

等价于原生js中 dom对象.οnclick=function(){....}

2一个对象绑定多个事件

$(“#id”).bind({

Click:function(){}

change:function(){}

dblclick:function(){}

})

3 在标签上绑定事件

掌握事件: Focus blur Submit Change click

3 jquery中展示效果:3

1隐藏或展示 speed，速度 callback，表示显示后要进行的操作(回调)

show(speed，callback)，显示 hidden(speed，callback)，隐藏 slideToggle(speed，callback)，显示隐藏的切换开关

2滑入或滑出 slideDown(speed，callback),向下滑入 slideUp(speed，callback):向上滑出 Slidetoggle(毫秒数):向上向下滑出

3淡入或淡出隐藏度从0.00到1.00 speed可写可不写回调方法可写可不写

fadeIn(speed,callback),淡入 fadeOut(speed，callback)，淡出

fadeTo(speed,opacity,callback),由不透明变成指定的透明度：透明度由0-1表示opacity：指定透明度必须传入两个参数

fadeToggle(speed，callback),切换淡入淡出

4选择器总结:

1基本选择器 3

1 $("#id值")2 $(".class值") 3 $("标签名")

4 $("#one,#two,.mini") 多级选择器(参考jquery api)了解:$("*") 理解:获取多个选择器用逗号隔开 $("#id值,.class值")

2层次选择器4

- $("A B"):获得A元素内部的所有B元素,包含内部的所有后代标签(祖孙关系) A选择器下(A是基本选择器里面的任意一个)的B选择器

- $("A>B"):获取A元素下面的所有B子元素。（父子关系）

- $("A+B"):获取A元素同级的一个B元素。（兄弟）

- $("A~B"):获取A元素同级的所有B元素。（兄弟们）获取所有文档向下同等级的标签

3基本过滤选择器:11

这时候下面得到的类似数组不用遍历直接能绑定这时是jquery对象当遍历的时候s[i]就变成了js对象只能调用js的方法

例如前面的选择器可以是多级选择器及层次选择器 $("tbody tr:odd").css("background-color","red");

$("选择器:first"),表示找到所有符合该选择器的第一个元素。

- $("选择器:last"),表示找到所有符合该选择器的最后一个元素。

- $("选择器:even"),表示找到所有符合该选择器的下标为偶数的元素。

- $("选择器:odd"),表示找到所有符合该选择器的下标为奇数的元素。

- $("选择器:eq(index)"),表示找到符合该选择器的第index个元素。

- $("选择器：gt(index)"),表示找到符合该选择器的并且下标大于index的所有元素。

- $("选择器：lt(index)"),表示找到符合该选择器的并且下标小于于index的所有元素。

- $("：header"),找到所有标题元素。

- $(":empty"),找到所有空元素（不包含子元素和文本的元素）

内容过滤:

:has("选择器"):包含指定选择器的元素

可见过滤:

:hidden 在页面不展示元素一般指 input type="hidden"和样式中display:none

:visible

4属性过滤器: 通过属性查找 7

- [属性名p]：获取有属性名p的元素

-‘[属性名=’属性值’]’：获取属性名 =属性值的元素

- [属性名！=属性值]：获取属性名！=属性值的元素

- ...[...][]多重属性选择器在找到一个属性下的情况下再找下一个属性这样筛选下来就能找到标签节点

- [属性名^=属性值]：获得属性名以属性值开头的所有元素

- [属性名$=属性值]：获得属性名以属性值结尾的所有元素

- [属性名*=属性值]：获得属性名含有属性值的所有元素

<div><p>Hello!</p></div>

$("div[id]")结果: [ <div id="test2"></div> ] 得到这个选择器的对象

5表单对象属性过滤选择器4

input:enabled 可用的

input:disabled 不可用

input:checked 选中的(针对于单选框和复选框的) 可以多个选中

input:selected 选中的(针对于下拉选)案例2-隔行换色这个可以多个选中

技术分析:

1.页面加载成功

2.获取所有的奇数行添加一个css

3.获取所有的偶数行添加一个css

6表单过滤选择器3

1:input 2:text 3:button

5 jquery属性和css操作总结:

1 标签操作增删 4:

转换成js后用js对象.length =1; jquery里面没有length方法不能修改集合中对象标签的个数也不能得到集合对象的个数

1 //添加到最后面A.append(B),在A标签中添加B标签 B标签是个字符串的HTML B只能是个子标签不能是个集合标签select标签对象就是集合对象那个可以($("#selectLeft option) 虽然这个也是集合对象但是这个里面所有的都是option标签

例如:$("#selectRight").append($("#selectLeft option:selected"));

B.appendTo(A),B标签被添加到A中去 B标签是个字符串的标签

2 //添加到最前面A.prepend(B)B.prependTo(A)

//添加到某个标签的前面

3 添加到某个标签的前面 A.insertBefore(B),A标签添加到B标签的前面，

要跟js中的insertBefore(newChild，refChild)方法区分

4 //添加到某个标签的后面A.inserAfter(B),A标签添加到B标签的后面

删除

empty() 清空元素

remove() 删除元素

1用val(“李四”) 只能对表单项的设置因为其他标签不一定内置value 所以就获取不到

5 用html修改标签的内容

1 属性操作增删改查方法2

用js 来获取原来的背景色 color = this.style.backgroundColor;

1HTML属性操作 prop attr方法不能用$(this).border jquery不能这样只有js可以这样

1- $(selector).attr(attribute)：返回指定元素的某个属性值

$(selector).attr(attribute，value):给指定元素设置属性

2 - $(selector).prop(attribute)：返回指定元素的某个属性值只能得到属性值然后 = 设定

$(selector).prop(attribute，value):给指定元素设置属性

例如:用prop设置和调用css设置$(this).prop("style","background-color: red;")$(this).css("background-color","deepskyblue");

3 Val()打印的时候默认打印的是text文本默认在标签内不写就是value=text 所有默认打印的是文本

4 - hasClass("类名")：指定元素是否包含某个类

- addClass("类名"):给指定元素添加某个类

5 :设置多个属性 json

attr({

"属性1":"值1",

"属性2":"值2"

})

4 removeAttr("属性名称"):移除指定属性每次只能移除一个属性

5 removeProp("属性名称"):移除指定属性每次只能移除一个属性

2 属性操作增改 css 2

css()用于获取和设置css属性，一次只能设置一个属性

1添加class属性的时候

// attr("class","值");对css操作:操作元素的style属性

2 获取和添加 css():获取或者设置css样式

方式1:获取 css("属性名")

方式2:设置一个属性 css("属性名","值")

方式3:设置多个 css ({"属性1":"值1","属性2":"值2"});

3例如对css属性操作.css

$(this).css("background-color","#FFFF00");

$(this).prop("style","background-color:#FFFF00");

获取元素的尺寸: width() height()

3 文本操作 2

1 html():往标签体中写HTML内容得到所有的标签

html(“”):往标签体中写HTML内容设置父标签里面的东西

2 val(): val(“”)设置或返回Value属性的属性值只能用于表单的设置现在设置是设置属性value的属性值

jquery对象.val("...."):设置

3 对象.text()获取文本

4 遍历数组 each 2

1使用for循环遍历

2方式一.each(function(index dom){}); 遍历

方式二 $.each(遍历数组,function(){}); 也可以遍历对象

each的function中可以加两个参数index和dom

index是当前遍历的索引值

dom指代的是当前遍历的dom对象(开发中一般使用this即可) 从前面选择器遍历出来的当前对象

6 事件切换 toggle hover 2

toggle(fn1,fn2,fn3),加强版的点击事件每次点击都切换事件

hover(fn1,fn2),相当于mouseover和mouseout事件的结合

6 validation框架

步骤：1=引入validate.js文件，前提是先引入jQuery

2.找到要校验的表单再调用validate方法，$("#myForm").validate()

3.validate方法中的参数写在json里面（json就是{key1:value1,key2:value2}）

4 表单对象.validate方法中的参数怎么写？

{

1 rules就是校验规则

rules:{

//rules中的key，是要校验的表单项的name属性的属性值

//rules中的value，统一写成json格式{},json中的key就是要校验的规则

username:{

required:true,

digits:true

password:{

required:true,

rangelength:[6,10]

}

2 messages就是提示信息

所有的message信息都是系统默认加的label标签要是你加了label标签系统就不再给这个标签是一定有的

1改变messages字体的颜色就是改变label标签的属性这里面所有的label标签都有class类名为error可以用css为其设置样式

2 直接在label样式里面的style里面写属性

For的值代表声明一个name属性值找到这个标签标签后面的是设置

<label for="sex" style="display: none;" generated="true" class="error">11性别必须选择</label>

messages:{

username:{

required:"用户名不能为空",

digits:"用户名必须为整数"

password:{

required:"密码不能为空",

rangelength:"密码长度必须为{0}-{1}"

}

3 页面中显示的提示信息，就是框架在HTML页面中添加了一个lable标签，

该lable有两个重要属性：for:该lable是为哪个表单项添加的

和class="error",该class属性可以用于修改提示信息的样式。

Backgroundcolor 这是js样式 Background-color 这是css的样式 Bgcolor 这是HTML的样式

6 Bootstrap day07

webcss框架,集合了html/css/jquery为一家创建响应式的页面响应式:适配不同的上网设备

1 bootstarp的入门

所有的web前端框架都是基于jquery运行的所以都要导入jquery

1.下载bootstarp网站:http://www.bootcss.com/ 下载:用于生产环境的 Bootstrap

2.导入bootstarp.css 3.导入jquery.js 4.导入bootstrap.js

5.添加一个meta标签支持移动设备

下面6个东西都必须有 1选择编码utf-8 2优先支持移动端 3 4导入bootstrap内置的css 5导入jquery 6导入bootstrap内置的js

2使用步骤

Bootstrap 需要为页面内容和栅格系统包裹一个 .container容器。我们提供了两个作此用处的类

方式1:<div class="container"></div>

方式1:<div class="container-fluid"></div>

注意:bootstrap将每一行分成12份

假如大屏幕,每行显示6个超大电脑,屏幕分辨率>1200使用: col-lg-2

假如屏幕小点,每行显示4个 992<屏幕分辨率<1200使用: col-md-3

再小点,每行显示2个 768<屏幕分辨率<992使用: col-sm-6

继续小,每行显示1个屏幕分辨率<768 使用:col-xs-12

bootstrap组成部分:

全局css样式--定义了一套css样式组件--定义了很多可以直接使用的组件例如:字体图标导航条 js插件--例如:轮播图选项卡

前端总结

Css 直接修改属性

JScript中的修改

jQuery中对css属性修改的两种形式

例如:用prop设置和调用css设置$(this).prop("style","background-color: red;")$(this).css("background-color","deepskyblue");

1文档加载完成------2绑定事件-----3获取ajax传递过来的值
2得到标签	1-jQuery得到标签元素 1id,标签名,类名	1修改变迁
		2修改html属性
		2修改css属性
		3修改文本
	2-用js得到变迁元素 1id,标签名,类名	1修改标签
		2修改属性
		2修改css属性
		4修改文本
3 jQuery和js标签的相互转换分别调用不同方法和属性

bigDataShare

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
HTML前端知识

1 html1前端心得1 前端都是有 1标签2属性3文本 4事件 5方法通过动态的点击事件调用方法来改变标签等()2 只要请求过来了数据就一直在这个页面,后面的请求的数据会一直保存好到这个页面3 事件和方法调用时候带()和不带() 区分整个文件都处于标签中. 用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。在HTML文件有两
复制链接

扫一扫