WEB复习总结

PART1：HTML

1.     超链接 （a标签）

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

<a> 元素最重要的属性是 href 属性，它指定链接的目标。

 

 

效果：蓝色带下划线的字体，点击后从当前页面，跳转至其他页面

属性：href 指向跳转地址。可以使用相对、绝对、网络路径

       target  _self(默认值，在当前标签页打开),_blank（在新的标签页打开）

              _parent在父窗口或者包含来超链接引用的框架的框架集中打开链接。

              _top清除所有被包含的框架，并打开链接。

锚链接：先使用id属性定义一个标签，然后在超链接内使用#id名（url#id名），跳转至指定页面的某位置

 

2.表单（from）

作用：用来给服务器后台传递信息
 form：定义表单范围（只传递在form范围以内的表单元素的内容）

action：设置后台访问的地址，默认值是当前网页路径（静态网页可以看作是个超链接）

 method：设置信息传递的方式，默认值是get。get/post

<form action="form_action.asp" method="get">

 

• · GET - 从指定的资源请求数据。
• · POST - 向指定的资源提交要被处理的数据。

表单元素：

   input：常用的输入信息的元素

        type：指定input的显示和输入方式

            text：单行文本框

               password：密码框。隐藏输入的内容

               radio：单选按钮。在name相同的情况下，只能传递被选中的值

               checkbox：多选按钮。可以传多个name相同的值

               reset：将表单元素的值重置为页面的初始值

               button：按钮。主要为js提供点击事件的入口

               submit：提交按钮。向action指定的地址传递表单元素的信息

        name：设置传递信息的key

        value：传递信息的值。默认为“”，可以设置初始值

        checked：设置单选或多选按钮被选中

   textarea：文本域。用来传递大量文本内容，即标签内的文本。这里文本包含空格和其他字符，均视作纯文本

        name：设置传递信息的key

        cols：columns，设置列数

        rows：设置行数          

   select：下拉菜单。select设置下拉菜单的范围和name。子元素option设置显示内容和传递的值

   button：提交表单。能够设置name属性来传递标签包含的文本

   file:选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的 File API 对文件进行操作。

 

3.input

disabled	disabled	当input元素加载时禁用此元素
readonly	readonly	规定输入字段为只读

 disabled 指当input元素加载时禁用此元素，disabled=true时，无法修改内容，input内容不会随着表单被提交，此时表单不可编辑（既不能修改也不能提交）

readonly规定输入字段为只读，readonly=true时，页面上无法修改内容，但是可以通过JavaScript修改，input内容会随着表单提交（只是不能修改，但是可以提交）

 

PART2 ：CSS

4.选择器

1、基本选择器

  a.标签选择器：标签名，选择同一种标签。可以选中多个

eg.在这里，页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色：

p {
  text-align: center;
  color: red;
}

 

  b.类选择器：选择class属性相同的标签。可以选中多个

    概念：类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

   结构如下:

       .类名{}

      class属性的写法：class=“类名1 类名2 ……”

      eg.在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

.center {
  text-align: center;
  color: red;
}

   

  c.ID选择器：选中指定id值的标签。只能选中一个

    概念：id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

    要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

 结构如下:

      #id值{}         （id值全局唯一）

    eg.这条 CSS 规则将应用于 id="para1" 的 HTML 元素：

#para1 {
  text-align: center;
  color: red;
}

 

 基本选择器的优先级：id>类>标签

 

d.并集选择器：同时选中两个或多个不同的选择器

 结构如下:

      选择器1，选择器2……{}

eg.

h1,h2,p,.color,#one{
  color:blue;
  font-size:14px;
}

意义：可以“控制”<h1>,<h2>,<p>,color类和id为one的部分

 

e.交集选择器：选择多个选择器中，都涉及到的标签

  概念:  由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，其中第一必须是标记(标签)选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写。

 结构如下:

  选择器1选择器2……{}

特殊约定：有标签选择器的交集选择器，标签选择器放在最前面

 eg.

p.#A{
  color:blue;
  font-size:14px;
}

 意义：可以控制<p id=”A”>XXX</p>标签

 

f.通用选择器(全集选择器)（*）选择页面上的所有的 HTML 元素。

    结构如下: *{}

   eg.

* {
  text-align: center;
  color: blue;
}

 

2、层次选择器

    a.后代选择器：

   定义：多个选择器以空格分开，组合成从属关系，且右边的选择器从属于左边（即右边的选择器只能在左边的选择器范围内选择）

   结构：父 子{}

   eg.选择<div>元素内的所有<p>元素:

div p{
    background-color:yellow;
}

   b.子选择器：

   定义：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

   结构：父>子{}

   注意事项：如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）

   eg.选择只作为 h1 元素子元素的 strong 元素

h1 > strong {color:red;}

对此代码有效：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

对此代码无效：（strong是em的子元素，不是h1直接的子元素）

<h1>This is <em>really <strong>very</strong></em> important.</h1>

 

 c.相邻兄弟选择器：

 定义：和出发点紧邻的符合选择器的同级标签，可选择紧接在另一元素后的元素，且二者有相同父元素。

 结构：兄+弟{}

 eg1.增加紧接在 h1 元素后出现的段落的上边距

 h1 + p {margin-top:50px;}

 意义：选择紧接在 h1 元素后出现的一个段落，h1 和 p 元素拥有共同的父元素

eg2.

li + li {font-weight:bold;}

意义：此代码不会改变第一个li的样式，只能改变第二个（紧跟在第一个li后面的样式）

 

 d.通用兄弟选择器:

 定义：在出发点之后的符合选择器的同级标签，通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

结构：兄~弟{}

   eg.选择属于 <div> 元素的同级元素的所有 <p> 元素

div ~ p {
  background-color: yellow;
}

意义：此代码会将属于<div>元素且出现在<div>元素之后的<p>元素的背景改变成黄色。

 

5.font属性

 font-family：字体样式，可以写多个字体。后面的覆盖前面的，通常先写英文字体再写中文字体

             family-name:用于某个元素的字体族名称或/及类族名称的一个优先表。

 font-size：字体大小，单位有：px（像素），cm，mm，em（一个默认字体大小），rem（一个相对字体大小）

             smaller:把 font-size 设置为比父元素更小的尺寸 ; larger:把 font-size 设置为比父元素更大的尺寸

 font-style：字体风格，italic（斜体），normal（标准样式），oblique（倾斜），inherit（从父元素继承字体样式）

 font-weight：字体粗细，100-900。也可以用bold（700），boder，400等同于normol

 值顺序：风格、粗细、大小、字体。默认值是（inherit，500，16px，跟随浏览器）

 

6. 盒子模型

    盒子模型是将每一个元素看作是一个盒子。该盒子具备外边距，边框，内边距和内容。

margin：外边距

              margin-（top，right，bottom，left）可以单独设置某一边的外边距

              margin：统一设置4边的外边距。

                     4个值：按照上右下左的顺序设置

                     3个值：按照上，左右，下的顺序设置

                     2个值：按照上下，左右的顺序设置

                     1个值：4条边设置统一值

应用：外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1.必须是块级元素。

2.盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中

 

7.z-index

功能：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值。

           该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

Z-index 仅能在定位元素上奏效（例如 position:absolute;）！（z-index必须配合position定位来使用）

position：定位元素的位置。可以配置top，left，right，bottom调整偏移位置

              常用值：static、relative、absolute、fixed

              static：标准文档流，默认值。

              relative：相对定位。元素相对它本身的位置偏移，原位置仍占据标准文档流的空间，本身显示的内容上浮一层。

              absolute：绝对定位。元素相对离它最近的已经定位的祖先元素偏移。如果祖先元素没有定位，则相对body元素偏移。该元素脱离了标准文档流，上浮一层

              fixed：固定定位。元素相对屏幕偏移，不论内部其他内容如何滚动，该元素均保持在屏幕同一位置。

 

8.伪类

伪类用于定义元素的特殊状态。

作用：

•     设置鼠标悬停在元素上时的样式

•     为已访问和未访问链接设置不同的样式

•     设置元素获得焦点时的样式

注意：

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active（已选择） 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

:hover 选择器用于选择鼠标指针浮动在上面的元素。

:hover 选择器可用于所有元素，不只是链接。

:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

 

9. display

 ●常用值：block（块）、inline（行内）、inline-block（行内块级）、none（隐藏）

      块的特点：前后换行，可以设置宽高

      行内特点：前后不换行，宽高的css属性不生效

      行内块级特点：前后不换行，可以设置宽高

      隐藏特点：页面不显示，但源代码中存在

●inline-block与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

●如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

●inline-block与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

●display 的一种常见用法：inline-block 用于水平而不是垂直地显示列表项。可通过inline-block达成水平布局

 

PART3 JavaStrict

10. Js中的三种弹框命令（window对象）

1.警告消息框alert()：

作用：用于显示带有一条指定消息和一个 OK 按钮的警告框。

    alert 方法有一个参数，即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作

效果：

 

2.确认消息框confirm() ：

作用:用于显示一个带有指定消息和 OK 及取消按钮的对话框。

    如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

    在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

效果：

 

3.提示消息框prompt()：

作用:方法用于显示可提示用户进行输入的对话框。

    如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。

    在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

效果:

 

11.Document

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问，使用getElement系列方法可访问指定节点。

语法结构：

Document.getElementByXX()

a.getElementById()      返回对拥有指定 id 的第一个对象的引用。

查找文档中的一个特定的元素，最有效的方法是 getElementById()。

在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

 

b.getElementsByName()  可返回带有指定名称的对象的集合。

该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

 

c.getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

 

d.getElementsByClassName() 方法返回的是以当前元素为根节点，所有指定类名的子元素。

 

e.write() 向文档写 HTML 表达式 或 JavaScript 代码。

 

12.Math

Math 对象允许执行数学任务。Math 不是构造函数。Math 的所有属性/方法都可以通过使用 Math 作为对象来调用，而无需创建它,例如：

Math.PI

1.random() 返回 0（含）和 1（不含）之间的随机数

如何实现返回的整数范围为2~99？

var iNum=Math.floor(Math.random()*98+2);

2.ceil(x) 返回 x，向上舍入为最接近的整数

3.floor(x)  返回 x，向下舍入为最接近的整数

4.round(x)   将 x 舍入为最接近的整数

对于 0.5，该方法将进行上舍入。例如，3.5 将舍入为 4，而 -3.5 将舍入为 -3。

 

13.Array (Sort 方法)

Array 对象用于在单个变量中存储多个值：数组索引从零开始：数组中的第一个元素是 0，第二个元素是 1，依此类推。

sort() 方法对数组的项目进行排序。排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。对于字符串，按“字典序”排序。在对数字进行排序时会产生不正确的结果（按字典序而不是按照数字大小排序）。可以通过提供“比较函数”来解决此问题。

结构:

array.sort(compareFunction)

eg：对数组中的数字进行排序：

var A=[3,2,4,7] 
A.sort(function(a, b){return a-b}); //按升序排序，结果为 2 3 4 7 (最小值为A[0]==2)
A.sort(function(a, b){return b-a}); //按降序排序，结果为 7 4 2 3 (最大值为A[0]==7)

 

14. Location.reload()

Location 对象包含有关当前 URL 的信息，是 Window 对象的一个部分，可通过 window.location 属性来访问。

reload() 方法用于重新加载当前文档，是bom对象刷新本页面的方法

replace() 方法用新的文档替换当前文档。

 

PART4 :jquery

15.window.onload 与 Document.ready的区别

1.Onload

I.是Javastrict事件，最常用于 <body> 元素中，用于在网页完全加载所有内容（包括图像、脚本文件、CSS 文件等）后执行脚本。

II.只能执行一次，如果有多个，那么第一次的执行会被覆盖。

III.可用于检查访问者的浏览器类型和浏览器版本，并根据这些信息加载网页的正确版本。onload 事件也可用于处理 cookie

IV.语法：

<element onload="myScript">  //HTML
object.onload = function(){myScript};  //JavaStrict

2.ready

I.ready是jQuery事件, 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

II.该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。ready() 函数规定当 ready 事件发生时执行的代码。

III.不应与 <body onload=""> 一起使用。可以编写多个。

IV.仅能用于当前文档，因此无需选择器。

V.语法

$(document).ready(function)
$().ready(function)
$(function)

★二者之间的区别一览表

 

16. jquery的三大特征

工厂函数（“$”等同于“ jQuery ”）、链式操作、隐式迭代

 1.工厂函数：将DOM对象转化为jQuery对象

语法：

$(selector).action() ;
/* 
   选择器 selector：获取需要操作的DOM 元素 
   方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
*/

 "$等同于“jQuery”"

$(document).ready()=jQuery(document).ready()

$(function(){...})=jQuery (function(){...})

  2.链式操作：对一个对象进行多重操作，并将操作结果返回给该对象

$("h2").css("background-color","#ccffff").next().css("display","block");

 3.隐式迭代：

$(document).ready(function() { $("li").css({"font-weight":"bold","color":"red"}); });
/*对所有的li进行遍历处理*/

 

17.修改元素内容：.html()或.text()

html() 方法返回或设置被选元素的内容 (inner HTML)。如果该方法未设置参数，则返回被选元素的当前内容。

/*返回元素内容
当使用该方法返回一个值时，它会返回第一个匹配元素的内容。*/
$(selector).html()

/*设置元素内容
当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。*/
$(selector).text(content)

/*使用函数设置文本内容
使用函数设置所有被选元素的文本内容。*/
$(selector).text(function(index,oldcontent))

text() 方法设置或返回被选元素的文本内容。

/*返回文本内容
当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。*/
$(selector).text()

/*设置文本内容
当该方法用于设置值时，它会覆盖被选元素的所有内容。*/
$(selector).text(content)

/*使用函数设置文本内容
使用函数设置所有被选元素的文本内容。*/
$(selector).text(function(index,oldcontent))

html () 获取的是元素内部所有的内容，而 text () 获取的仅仅是文本内容。 

 

18.遍历前辈元素

parent()：获取元素的父级元素

   parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。

   如果给定一个表示 DOM 元素集合的 jQuery 对象，.parent() 方法允许我们在 DOM 树中搜索这些元素的父元素，并用匹配元素构造一个新的 jQuery 对象。

parents()：获取元素的祖先元素

  parents() 获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。

  如果给定一个表示 DOM 元素集合的 jQuery 对象，.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素，并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。元素是按照从最近的父元素向外的顺序被返回的。

 

19.表单验证事件和方法

a.失焦事件blur()

当元素失去焦点时发生 blur 事件。（比如鼠标点击其他地方）

blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。

*早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。

eg.当输入域失去焦点 (blur) 时改变其颜色：

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");//通过函数规定了当blur事件发生时执行的代码
});

b.聚焦事件 focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。

 

PART5:Ajax

20.使用jQuery实现Ajax

ajax() 方法通过 HTTP 请求加载远程数据。

语法：

$.ajax([settings]);

常用属性参数：

data：String 

         （发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。）

dataType：String   （预期服务器返回的数据类型。）

可用返回类型：

• "xml": 返回 XML 文档，可用 jQuery 处理。
• "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
• "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
• "json": 返回 JSON 数据 。
• "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
• "text": 返回纯文本字符串

其中，text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数。

如果指定为 html 类型，任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。类似地，指定 script 类型的话，也会先执行服务器端生成 JavaScript，然后再把脚本作为一个文本数据返回。

如果指定为 json 类型，则会把获取到的数据作为一个 JavaScript 对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，它首先尝试使用 JSON.parse()。如果浏览器不支持，则使用一个函数来构建。

如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用 jsonp 类型。

error：Function

        （默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
           有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
          如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。）

success：Function

          （请求成功后的回调函数。
             参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
             这是一个 Ajax 事件。）

type：String

            （默认值: "GET"。请求方式 ("POST" 或 "GET")， 默认为 "GET"。

               注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。）

url：String    （默认值: 当前页地址。发送请求的地址。）

   

可使用上述6个$.ajax（）方法实现发送异步请求

 

21.JSON

JSON对象{“属性1”:”值1”,”属性2”,”值2”……”属性n”:”值n”}，

JSON数组[obj1，obj2，……objn]