Web前端设计考试知识点

程序题：
实验二：排序
let flag = 1;
function init(){
    let parent = document.getElementById("pricesList");
    let domArr = [];
    for(let i = 0;i<parent.childNodes.length;i++){
        let obj  = {};
        if(parent.childNodes[i].nodeType ==1){
            obj.dom = parent.childNodes[i];
            obj.price = obj.dom.lastElementChild.innerHTML.trim().substring(3);
            domArr.push(obj);
        }
    }
    domArr.sort(function(a,b){
        return a.price - b.price;
    });
    return domArr;
}
let domArr;
window.onload = function(){
    domArr = init();
};
function sort(){
    let span = document.getElementsByTagName("span")[0];
    if(flag){
        flag = 0;
        span.className = "up";
        for(let i =0;i<domArr.length;i++){
            domArr[0].dom.parentNode.appendChild(domArr[i].dom);
        }
    }  else{
        flag =1;
        span.className = "down";
        for(let i = domArr.length-1;i>=0;i--){
            domArr[0].dom.parentNode.appendChild(domArr[i].dom);
        }
    }
}
实验四：ajax
$(function(){
    let i=1;

    $.ajax({
        url:"list.json",
        dataType:"json",
        success:function(list){
            let $item = $('<div><div class="icon"><img/></div><div></div></div>');
            list.forEach(json => {
                    $item.clone().find("img").attr("src",json.icon).end()
                    .children("div:last-child").html(json.nickname).end().appendTo($("aside"));

                }
            );
        }

    });

    $("nav").click(function(){

        if(i){
            $("aside").show();
            i = 0;
        }else{
            i = 1;
            $("aside").hide();
        }
        $(this).children("span").toggleClass("up");
    });
});

HTML:
<a>标签定义超链接，用于从一个页面链接到另一个页面
属性：
1、href：规定链接的目标URL
语法<a href="URL">
实例：<p>绝对路径 URL: <a href="//www.runoob.com/">菜鸟教程</a></p>
URL分绝对URL(指向另一个站点"http://www/...com/index.htm")、相对URL（指向站点内的某个文件"index.htm"）、锚URL（指向页面中的锚"#top"）

2、hreflang:规定目标URL的基准语言，仅在href属性存在时使用
语法：<a hreflang="language_code">
实例：<a hreflang="en" href="http://www.runoob.com/">菜鸟教程</a>

3、target:规定在何处打开目标URL，仅在href属性存在时使用
语法：<a target="_blank|_self|_parent|_top|framename">
属性值（前面四个更重要）：
_blank:在新窗口中打开被链接文档
_self:默认。在相同的框架中打开被链接文档
_parent:在父框架集中打开被链接文档
_top:在整个窗口中打开被链接文档
framename:在指定的框架中打开被链接文档
实例：<a href="http://www.runoob.com" target="_blank">访问菜鸟教程！</a>


<form>标签：用于创建供用户输入的HTML表单
属性：
1、action：规定当提交表单时向何处发送表单数据
语法：<form action="URL">
此处URL分为绝对URL和相对URL
实例：当提交表单时，发送表单数据到名为 "demo_form.html" 的文件（处理输入）：
<form action="demo_form.html" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

2、method:规定用于发送表单数据的HTTP方法
语法：<form method="get|post">
属性值：
get:默认。将表单数据以名称/值对的形式附加到URL中（URL的长度是有限的，大约3000字符；不可使用GET来发送敏感数据；可以加入书签；更适用于非安全数据）
post：以HTTP post事务的形式发送表单数据（将表单数据附加到HTTP请求的body内，不显示在URL中；没有长度限制；不能加入书签）

表单外观：书P69
表单域：多用于收集网站访问者的信息，主要包括文本框、密码框、隐藏框、多行文本框、单选按钮、复选框、列表选择框和和文件选择框
<input>标签：规定了用户可以在其中输入数据的输入字段，在<form>元素中使用，用来声明允许用户输入数据的input控件
注意：<input>元素是空的，只包含标签属性，可以使用<label>元素来定义<input>元素的标注
属性：
accept：规定通过文件上传来提交的文件的类型
alt：定义图像输入的替代文本（只针对type="image"）
checked:规定在页面加载时应该被预先选定的<input>元素（只针对type="checkbox"或者type="radio"）
disabled：规定应该禁用的<input>元素（被禁用的元素无法使用和点击）
size：规定以字符数计的<input>元素的可见宽度
maxlength：规定<input>元素中允许的最大字符数
max:规定<input>元素的最大值
value:指定<input>元素value的值
name：规定<input>元素的名称
readonly：规定输入字段是只读的
type：该属性是必需的，用来说明当前控件的类型。
语法：<input type="value">
默认类型是：text
属性值：
checkbox：定义复选框
color：定义拾色器
date：定于date空间（包括年月日，不包括时间）
datetime：定义date和time控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）
datetime-local：定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）
file：定义文件选择字段和“浏览...”按钮，供文件上传
hidden：定义隐藏输入字段
password：定义密码字段（字段中的字符会被遮蔽）
radio：定义单选按钮
reset：定义重置按钮（重置所有的表单值为默认值）
submit：定义提交按钮
button：定义可点击的按钮（普通按钮）
image：定义图像作为提交按钮
text：默认。定义一个单行的文本字段（默认宽度为20个字符）

实例：一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮：
<form action="demo_form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

<option>标签：定义选择列表中的选项
属性：
disabled：此选项应在首次加载时被禁用
label：当使用<optgroup>时所使用的标注
selected：规定选项表现出选中状态
value：定义送往服务器的选项值

CSS：
常用的选择器（书P98）：
标签选择器(p)：只能作用于同种类型的标签
例如：p{font-family:楷体；}

ID选择器：在HTML文档中，元素的ID要求是唯一的，通过ID来识别页面中的元素
#idValue{property1:value;...}
例如：#firstname{background-color:yellow}

类选择器：同一样式的元素定义为一类，在类名前有个点好（.）
.classname{property1:value;...}
例如：.intro{background-color:yellow;}

属性选择器：根据元素的属性及属性值来选择元素。分为以下七种（在IE8中运行，必须声明 <!DOCTYPE>）：
存在选择器：[attribute]选择所有带有指定属性和值的元素
用法：选择所有带有target属性的 <a>元素：
a[target]{background-color:yellow;}
相等选择器：[attribute=value]选择指定了属性和值的元素
用法：
选择所有使用target="_blank"的a元素：
a[target=_blank]{background-color:yellow;}
包含选择器：[attribute～=value]选择属性值包含一个指定单词的元素
用法：选择标题属性包含单词“flower”的所有元素：
[title～=flower]{background-color:yellow;}
连字符选择器：[attribute|=value]选择以指定值开头的属性值的元素
用法：选择lang属性等于en，或者以en-为开头的所有元素：
[lang|=en]{background-color:yellow;}
注意：该值是整个单词，无论是单独像lang=“en”或者像连字符-如lang=en-us都可以
前缀选择器：[attribute^=value]匹配元素属性值带指定值开始的元素
用法：设置class属性值以“test”开头的所有div元素的背景颜色：
div[class^="test"]{background:#ffff00;}
子串选择器：[attribute*=value]匹配元素属性值包含指定值的元素
用法：设置class属性值包含“test”的所有div元素的背景颜色：
div[class*="test"]{background:#ffff00;}
后缀选择器：[attribute$=value]匹配元素属性值带指定的值结尾的元素
用法：设置class属性值以“test”结尾的所有div元素的背景颜色：
div[class$="test"]{background:#ffff00;}

派生选择器：通过依据元素在其位置的上下文关系来定义样式
例如：你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong {
    font-style: italic;
    font-weight: normal;
  }
请注意标记为 <strong> 的蓝色代码的上下文关系：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>


层次选择器（书P101）：
后代选择器：选择某个元素的所有后代元素，后代选择器元素之间用空格隔开：
语法：selector1 selector2 ...{...}
用法：选择<div>元素内的所有<p>元素：
div p{background-color:yellow;}

多元素选择器：几个元素具有相同的样式，用逗号(,)分隔每个元素的名称
语法：selector1,selector2,...{...}
用法：选择所有<p>元素和<h1>元素：
h1,p{background-color:yellow;}

子代选择器：选取某个元素的直接子元素（间接子元素不适用）
语法：selector1>selector2>...{...}
用法：选择所有父级是<div>元素的<p>元素：
div>p{background-color:yellow;}

相邻兄弟选择器：选择紧接在某元素之后的兄弟元素
语法：selector1+selector2+...{...}
用法：选择所有紧接着<div>元素之后的第一个<p>元素：
div+p{background-color:yellow;}

普通兄弟选择器：选择拥有相同父元素的元素
语法：selector1～selector2～...{...}
用法：h3～p{background：#ccc;}
与<h3>标签同级的所有<p>标签背景颜色都会改变


字体：
font-family：规定文本字体
font-size：文本大小，可以是相对大小或绝对大小，默认：16px
font-style：指定斜体文本，三个值：normal（正常显示）、italic（斜体显示）、oblique（倾斜，支持较少）
font-weight：字体的粗细，bold是粗体

CSS属性：
margin：设置所有外边距属性，该属性可以有1-4个值（允许使用负值），默认值为0
四个：上、右、下、左（顺时针）
三个：上、右左、下
两个：上下、左右
一个：四个外边距都一样
水平自动居中：0 auto

z-index：设置元素的堆叠顺序（可以拥有负值）z-index仅能在定位元素position上奏效，默认值：auto
用法：设置图像的z-index：
img{
position:absolute;/绝对定位/
left:0px;
top:0px;/位于左上角/
z-index:-1;/为-1层，则在文本的后面出现/
}

伪类：定义元素的特殊状态
hover：悬浮
visited：已访问
link：未访问
active：点击
用法：
a:link{color:#ff0000;}/未访问的链接/
a:viisted{color:#00ff00;}/已访问的链接/
a:hover{color:#ff00ff;}/鼠标悬停的链接/
a:active{color:#0000ff;}/已选择的链接/

display：规定是否/如何显示元素，默认display值为inline
注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类
可能的值：
none：该元素不会被显示
block：块级元素，前后带有换行符
inline：内联元素，前后没有换行符
inline-block：行内块元素，结合行内和块级的优点，既可以设置长宽，可以让padding（内边距）和margin生效，又可以和其他元素并排



JavaScript：
弹出框：警告框alert、确认框confirm、提示框prompt
区别：
警告框，用于显示带有一个指定消息和一个“确定”按钮的警告框，无返回值，经常用于确保用户可以得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：window.alert("sometext");可以不带上window对象，直接使用aler（）方法。
确认框，常用于验证是否接受用户操作。当确认卡弹出时，用户可以点击“确认”或者“取消”来确定用户操作，当你点击“确认”，确认框返回true，如果点击“取消”，确认框返回false。
在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
语法：window.confirm("sometext");可以不带上window对象，直接使用comfirm（）方法
提示框，常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为null。
在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
语法： window.prompt("sometext","defaultvalue");可以不带上window对象，直接使用prompt()方法。

函数：
random（）：返回0（含）和1（不含）之间的随机数
语法：Math.random()
实例：返回1-10之间的随机数：Math.floor((Math.random()*10)+1);
返回-20-50的随机数：Math.floor((Math.random()*71)-20)
floor（）：向下舍入为最接近的整数
ceil（）：向上舍入为最接近的整数
round（）：舍入为最接近的整数 注意：对于+-0.5，将进行上舍入

Arry对象：用于在变量中存储多个值，第一个数组元素的索引值为0，第二个索引值为1，以此类推
sort（）方法：用于对数组的元素进行排序，默认排列顺序为按字母升序
语法：array.sort(sortfunction)；
注意：当数字是按字母顺序排列时"40"将排在"5"前面。
实例：
数字排序（数字和升序）：
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
输出结果：1，5，10，25，40，100

数字排序（数字和降序）：
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
输出结果：
100,40,25,10,5,1

数字排序 (字母和降序):
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
输出结果：
Orange,Mango,Banana,Apple

Document对象方法：
查找HTML元素：
1、getElementById:返回对拥有指定id的第一个对象的引用
2、getElementByClassName：返回带有指定类名的对象集合
3、getElementByName：返回带有指定名称的对象集合
4、getElementByTagName：返回带有指定标签名的对象集合

Dom reload（）方法（很重要）：用于重新加载当前文档，是bom对象刷新本页面的方法，该方法没有返回值
Location 对象包含有关当前 URL 的信息，是 Window 对象的一个部分，可通过 window.location 属性来访问。
语法：Location.reload(forceGet)
如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
replace() 方法用新的文档替换当前文档。



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进行遍历处理*/

ready与onload的区别：
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)

html（）和text（）
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
例如：
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");/<b>是粗体/
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });
});
</script>

JSON对象：{ "name":"runoob", "alexa":10000, "site":null }
JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。
可以使用点号（.）来访问对象的值x = myObj.name;，可以使用中括号（[]）来访问对象的值x = myObj["name"];

JSON数组：[ "Google", "Runoob", "Taobao" ]
JSON 数组在中括号中书写。
JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

JQuery事件：
1、表单事件
blur（）失焦事件
提示：该方法常与 focus() 方法一起使用。
语法：
为被选元素触发 blur 事件：
$(selector).blur()
添加函数到 blur 事件：
$(selector).blur(function)
focus-获取焦点
submit-提交表单
change-元素的值改变时

2、键盘事件
    keydown - 键按下的过程
    keypress - 键被按下
    keyup - 键被松开
3、鼠标事件
click-点击元素
dblclick-双击元素
mouseenter-鼠标指针穿过（进入）被选元素
mouseleave-鼠标指针离开被选元素
hover-鼠标指针悬停在被选元素上要运行的两个函数。方法触发 mouseenter 和 mouseleave 事件。
例如：$( selector ).hover( handlerIn, handlerOut )
等同如下方式：
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

4、文档/窗口事件
load-指定的元素已加载
unload-
    点击某个离开页面的链接
    在地址栏中键入了新的 URL
    使用前进或后退按钮
    关闭浏览器窗口
    重新加载页面
resize-调整浏览器窗口大小
scroll-用户滚动指定的元素



遍历方法：parent和parents
1、parents() 方法返回被选元素的所有祖先元素。祖先是父、祖父、曾祖父，依此类推。
语法：$(selector).parents(filter)
注意：如需返回多个祖先，请使用逗号分隔每个表达式。
该方法从父元素向上遍历 DOM 元素的祖先，直至文档根元素的所有路径（<html>）。
注意：如果 filter 参数为空，该方法将从直接父元素直至 <body> 和 <html> 的所有路径中选取元素集合中的所有祖先。因此传递一个缩小搜索结果范围的选择器表达式是非常有用的。
parents()
    从父元素开始
    沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先
    返回包含零个、一个或多个元素的 jQuery 对象
2、parent() 方法返回被选元素的直接父元素。该方法只沿着 DOM 树向上遍历单一层级。
语法：$(selector).parent(filter规定缩小搜索父元素范围的选择器表达式。)

ajax（）：用于执行AJAX（异步HTTP）请求
常用属性：
url:规定发送请求的URL，默认是当前页面
type：规定请求的类型（GET或POST）
timeout：设置本地的请求超时时间（以毫秒计）
async：布尔值，表示请求是否异步处理。默认是true
cache:布尔值，表示浏览器是否缓存被请求页面，默认值是true
data：规定要发送到服务器的数据
dataType：预期的服务器响应的数据类型
success：当请求成功时运行的函数
error：如果请求失败要运行的函数
method：

返回类型：
xml：返回XML文档，可用JQuery处理
html：返回纯文本HTML信息
json：json方式和html方式在请求和服务器中完全是一样，请求的返回值实际上都是String对象，
有两点不同，第一：html方式的时候并没有限制返回的字符串格式，而json方式的时候，必须符合json协议的规范。
第二：html方式请求完成之后没有做任何的操作直接回调sucuess，而json多了一步就是加了eval，执行返回的字符串，看看源码data = eval_r("(" + data + ")");返回json对象；(方法的返回值是Javabean时，在响应体中响应成json字符串格式)
text：返回纯文本字符串
json：返回纯文本JavaScript代码，不会自动缓存结果，除非设置了“cache”参数