现代软件工程_团队项目_阿尔法阶段_前端知识分享_2017.11.22

现代软件工程_团队项目_阿尔法阶段_前端知识分享

HTML基础（一）

本文参考了[http://www.w3school.com.cn/html/][6]

HTML简介

`什么是HTML`

HTML(Hyper Text Markup Language)是描述网页的语言

`HTML标签`

所有的内容都是放在标签内部的
用两个尖括号及其内部的标签名表示标签
<html> </html>
一般情况要有开始和结束标签

`编辑器`

记事本也可以写html，只要保存时选择.html的格式即可以
一般的编辑器都可以编写，好的编辑器可以自动补全

`固定格式`

基本上所有的html都是由以下主干扩充的

        <html>
            <head>

            </head>
            <body>

            </body>
        </html>

结束标签一定要写，虽然有的浏览器即使没有结束标签也能正常显示

基本元素

标题

        <h1>标题1最大</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6最小</h6>

段落

        <p>段落</p>

水平分割线
这是少有的没有结束符的（开始符合结束符在一起）的标签

        <hr />

注释

        <!-- 注释 -->

拆行

        <p>这是<br />分开的<br />段落</p>

样式

        <h2 style="样式=背景色：红色</h2>
        <h2 style="font-family:verdana">样式=字体：verdana</h2>
        <h2 style="font-size:10px">样式=大小：10像素</h2>
        <h2 style="color:red">样式=颜色：红色</h2>
        <h2 style="text-align:center">样式=对齐方式：居中</h2>
        <h2 style="font-size:10px;color:red">样式之间可以用分号隔开</h2>

文本格式化

        <b>文字加粗（以下均没有自动换行）</b>
        <br />
        <big>文字变大</big>
        <br />
        <small>文字变小</small>
        <br />
        <em>文字斜体</em>
        <br />
        可以单独写一个没有标签的文字
        <sub>下角标</sub>
        <sup>上角标</sup>

预格式文本

        <pre>
        预格式文本
            保留了    空格
        与换行
        很适合显示代码等文本
        </pre>

地址描述

        <address>
            Written by jbw<br />
            你要是非问他和普通的斜体有什么不同<br />
            我觉得应该是要规范要求吧<br />
            这里同样是不带自动回车的
        </address>

引用

        <p>长引用</p>
        <blockquote>这是一段长引用，长引用会自动形成一段，同时有首行缩进。这是一段长引用，长引用会自动形成一段，同时有首行缩进。</blockquote>

        <p>短引用</p>
        <q>短引用会自动被引号引起来</q>

删除文字与插入文字效果

        <p>正常文字 <del>中间有删除线的文字</del> <ins>有下划线的插入文字</ins> 正常文字</p>

缩写

        <abbr title="这是缩写的全称">这是缩写，下面带了一行小点点</abbr>
        <p title="这是缩写的全称">这是缩写</p>

超链接

        <a href="http://www.baidu.com">文字链接</a>
        <a href="http://www.baidu.com">右面的图片是链接<img border="0"src="C:\\Users\\bwjiang\\Desktop\\photo.jpg" /></a>

插入图片

        <img src="C:\\Users\\bwjiang\\Desktop\\photo.jpg" alt="当浏览器没有显示出图片时，显示本段文字"/>

HTML基础（二）

本文参考了[http://www.w3school.com.cn/html/][6]

HTML CSS

`什么是CSS`

层叠样式表，从HTML4.0之后的样式都建议从html文档中剥离样式，写到css文件中
例如描述文字大小、颜色、位置等的信息都写到css文件中去
在Chrome浏览器上按F12可以看到页面的源码
源码一般都是把样式剥离出来了
层叠样式表，从HTML4.0之后的样式都建议从html文档中剥离样式，写到css文件中
例如描述文字大小、颜色、位置等的信息都写到css文件中去
在Chrome浏览器上按F12可以看到页面的源码
源码一般都是把样式剥离出来了

1.外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

推荐使用外部样式表，在每一个页面的html中都可以使用css里面的样式
前面的rel规定当前文档与被链接文档之间的关系，stylesheet表示样式表
mystyle.css表示样式表和当前html在同一个目录下

2.内部样式表
在head标签里定义style标签，可以在本html文档中将css文件里的样式做继承
不建议使用

3.内联样式表
在某一个标签内部加入style，单独改变这个标签
不建议使用，建议全部采用外部样式表

（后面会对css进行专门的学习）

基本元素

链接

 <a herf="www.baidu.com">nihao</a>

链接里面也可以插入标签

<a herf="www.baidu.com"><img src="apple.jpg"></a>

链接不仅仅只能指向其他的网页，也可以指向本网页的其他的地方（锚
）
就像百度百科前面的目录一样

<a name="miao">miao</a>

<a herf="#miao">miao</a>

把name替换成id也可以

 <a herf="www.baidu.com" target="_blank">nihao</a>

在新窗口打开target=”_blank”
从根目录寻找网页target=”_top”

图片

<img src="/img/p.jpg">

body 可以加上background=”background.jpg”
width属性调整宽度
height属性调整高度

表格

 <table>
  <tr>
    <th>表头</th>
  </tr>
  <tr>
    <td>第一行第一列</td>
  </tr>    
</table>

列表

1.无序列表

<ul>
  <li>nihao</li>
  <li>zaijian</li>
</ul>

2.有序列表

<ol>
  <li>nihao</li>
  <li>zaijian</li>
</ol>

块级元素

<div>
</div>

内联元素
将文本分块

<span></span>

类
在css文件或者head中的style里
之后就可以在块中加入class=“left”

.left{
text-align: left
}

或者可以对已有的表现设置内部的类
然后在之后的p标签内部可以加入class=“left”

p.left{
text-align: left
}

布局
在css文件中用井号开头，在html的div中id=“”

响应式设计
这个要求有点高，有时间我再看

头部标签

<title>题目 必须要有
<base target="_blank" />新窗口打开
<meta>关键字 作者 描述
<link rel="stylesheet" type="text/css" href="mystyle.css" />链接外部资源
}

CSS基础（一）

本文参考了http://www.w3school.com.cn/css/

什么是CSS

层叠样式表 (Cascading Style Sheets)
可以独立与html文档，存在于.css文件中
可被应用到多个html文档中
可以使html文档专注的表示文档内容而不需要考虑样式

优先级

最高：内联样式，在标签内部声明
其次：内部样式，在head标签声明
再次：外部样式，在.css文件中声明
最后：浏览器的缺省设置

基本语法

selector{
    property1: value1;
    property2: value2;
}

selector可以多个同时赋值，用逗号隔开
属性后面一定要加冒号，习惯性加一个空格
值的后面加分号，如果是两个单词或以上要加引号

关于继承

不是每个浏览器都支持继承，一般来说规定了父标签之后，紧接着规定字标签的属性

派生选择器（上下文选择器）

规定某一标签在另一标签内部时的样式
selector2在selector1内部时属性满足如下条件

selector1 selector2{
    property1: value1;
    property2: value2;
}

id选择器

在标签中标记id，id在css文件中
css文件

#idname{
    property1: value1;
    property2: value2;
}

html文件

<html>
<head>
  <tittle>timu</tittle>
</head>
<body id="idname">
</body>
</html>

类选择器

在标签中标记class，class在css文件中
css文件

。classname{
    property1: value1;
    property2: value2;
}

html文件

<html>
<head>
  <tittle>timu</tittle>
</head>
<body class="classname">
</body>
</html>

也可以规定类内的标签样式

.classname p{
    property1: value1;
    property2: value2;
}

也可以规定标签内部的类

p.classname{
    property1: value1;
    property2: value2;
}

属性选择器

在标签中标记属性，属性在css文件中
css文件

[tittle]{
    property1: value1;
    property2: value2;
}

html文件

<html>
<head>
  <tittle>timu</tittle>
</head>
<body tittle="prop_name">
</body>
</html>

上面规定所有标签内部有 tittle=”“的都满足上述属性
在css文件中也可以这样定义
css文件

[tittle="big"]{
    property1: value1;
    property2: value2;
}

上面规定所有标签内部有 tittle=”big”的都满足上述属性

我觉得属性选择器相当于自己定义了一个类之类的东西
在input这样的不能用类的标签中就需要属性选择器了

CSS基础（二）

本文参考http://www.w3school.com.cn/css/index.asp

背景

可以设置任何标签的背景（包括整个页面）

background-color: grey; //背景色

background-image: url(); //背景图片，括号内部填写地址

//可以在.css文件中设置背景

padding: 20px; // 周围留下20px的边界

//如果不管是否重复，背景会自动复制填满整个标签内部

background-repeat: repeat-y; //只在y方向复制，同理有只在x方向复制

background-repeat: no-repeat; //不复制

background-position: center; //位置居中，同时还有top、bottom、left、right，也可以成对出现，还可以写成px和cm

background-position: 40% 60%; //x方向左数40%，y方向上数60% 

background-attachment: fixed; //背景的位置固定，不随着滑轮滚动而变

文本

color：red； //设置文本颜色

background-color: yellow; //设置文本的背景色

word-spacing： 5px; //字间距

letter-spacing: 10px; //字符间距

//标准的行高认为是字的110%-120%
//可以用百分比、像素值、数值等设置行高

line-height: 90%; //行间距为-10%

line-height: 200%; //行间距100%

text-align：center; //文本对齐方式设为居中，还有left、right

text-decoration: overline; //overline上划线、line-through中划线、underline下划线、blink（说是会一闪一闪，但是我没看到）、none去掉装饰（超链接的下划线可以去掉）

text-indent: 1cm; //首行缩进

text-transform: uppercase; //字母全部变大写，lowercase全部变小写，capitalize每个单词的首字母大写

字体

font-family//字体
font-style//风格 normal正常 italic斜体 oblique倾斜，后两个差不多
font-varitant: small-caos; //大写变小的大写
font-weight: normal;//bold加粗 500正常 100最细 900最粗
font-size: 20px//文本大小，也可以用em（16px），100%

链接

a:link {color:#FF0000;text-decoration:none;}        /* 未被访问的链接 */
a:visited {color:#00FF00;background-color:#B2FF99;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

JavaScript基础（一）

什么是JavaScript

基于页面的脚本语言
轻量级
可以插入到html中
基本上所有的浏览器都支持
和java完全不同

位置

这一段脚本习惯性放在head里或者body内部的下面
但是更多的还是单独放在一个文件里，然后将文件导入

<script src="myScript.js"></script>

寻找某一个id

javascript通过寻找html中的某一个id来确定具体的标签

document.getElementById("demo").innerHTML="我的第一段 JavaScript";

上面这句代码可以把demo标签的原始内容替换为”我的第一段 JavaScript”

document.write("<p>我的第一段 JavaScript</p>");

上面这句代码向屏幕上输出一个段落，注意！只能在页面刚刚加载的时候使用，如果加载过后使用则会覆盖页面

分局

分号对于javascrip而言是可选的

函数

函数前面需要加上function

function functionName(){

}

代码换行

建议不要使用，在字符串之间可以用 \换行

注释

和c的注释完全相同//或/* */

变量

用var来声明变量

数组

var a = new Arry('q', 'w', 'e', 'r')

面向对象

javascript是面向对象的语言，所有的变量都是对象

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
}

使用对象中的属性时建议

person.firstname

使用对象中的方法时建议

person.eat()

调用函数

很多标签都可以加上onclick=“myfunction()”
由此既可以调用函数

返回值

函数都可以返回，返回时不需要指定函数类型

运算符、比较符、逻辑运算符

+-*、%<>= == != >= <= && || !
各种符号的意义均与普通无异

基本语句

if(){}else{}
switch(){case1:break;default:break;}
for(;;)
while
break;continue;
try throw catch

表单验证

利用id把value读出来进一步验证
alert（）可以输出警告
console.log()可以打印日志

JavaScript基础（二）

Html DOM

DOM是文档对象模型（Document Object Model）
javascript可以通过寻找标签的id找到对应的标签
对找到的标签可以做很多操作
包括修改，删除
也可对实践做出反应

找到标签

id找标签
- x=document.getElementById(“demo”);
name找标签
- x=document.getElementByName(“demo”);
类名找标签（找到所有段落的）
- x.getElementsByTagName(“p”);

写入内容

写入到输出流
- document.write();
- (注意，如果要输出字符串，必须要有引号，输出变量和数字不用)
改变元素内容
- x.innerHTML=”new text”;
改变元素属性
- x.src = “newimg.jpg”;

改变样式

x.style.color = “blue”;
x.style.visibiliyu = “hidden”;//设为隐藏和不可见

本篇省去了很多深入的知识，只是适用于对javascrip的大体框架做一了解，更多详细的知识请查看w3school

对行为作出反应

点击
- onclick=“”（引号里面可以加一个语句或者一个函数）
页面加载
- onload=“”//加载成功时执行
- onunload=“”//加载失败时执行
- 由于不同浏览器对于一些函数的支持不同，这两个反应可以区分不同浏览器
鼠标悬停
- onmouseover=“”//鼠标在此标签上方悬停时执行
- onmouseout=“”//鼠标离开后执行
- 如果onmouseout的结果和一开始不同，离开后不会回到一开始的状态
改变
- onchange=“”//值改变后执行
按住和离开
- onmousedown=“”//鼠标按下不放
- onmouseup=“”//鼠标松开后
- 和鼠标悬停一样，如果松开后的效果和一开始不同，松开后不会回到一开始的状态
- 发现一个小bug，按下后把鼠标一直按下脱离标签区域再松开，发现标签会一直保持按下状态
聚焦
- onfocus=“”//一般只对input标签使用，点击输入框之后执行

增加新节点（标签）

创建新标签
- var para=document.createElement(“p”);
创建标签文本内容
- var node=document.createTextNode(“这是新段落。”);
为这个标签添加文本内容
- para.appendChild(node);
找到一个节点并加入
- var element=document.getElementById(“div1”);
- element.appendChild(para);

删除节点（标签）

找到要删除的节点
- var child=document.getElementById(“p1”);
找到要删除节点的父节点
- var parent=document.getElementById(“div1”);
删除掉这个节点
- parent.removeChild(child);
也有快捷办法
- document.getElementById(“p1”).parentNode.removeChild(child);

JavaScript对象

和所有面向对象的语言一样，javascriot也有对象
对象有其属性与方法，方法就是

创建对象

构造函数（这个构造函数和java不同）
这里没有类的概念，原来java的类的位置就是现在构造函数的位置，类变量就可以看成是这里对象数属性
如下面的程序，上半部分是构造函数，下面是这个对象的一个方法

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;

    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}

for in 循环遍历对象属性

var person={fname:"Bill",lname:"Gates",age:56};

for (x in person)
  {
  txt=txt + person[x];
  }

数字

所有数字都是64位的
浮点数计算不精确，如果要计算最好先化为整数，再做除法
整数最多15位
八进制前面加0，十六进制前面加0x

字符串

.length //求字符串长度
.big //变大
.small//变小
.bold//加粗
.itallics//斜体
.fixed//变细
.strike//划掉
.fontcolor//字体颜色
.fontsize//字体大小
.toLowercase//全小写
.toUppercase//全大写
.sub//下标
.sup//上标
.link//链接
.indexof//首次出现的位置，不在为-1
.match//匹配，返回匹配的或null
.replace(/bereplaced/,”replace”)//替换

日期

Date() //获取时间
getTime()//获取时间戳
getDay()….hours，seconds….很多很多就不列举了

数组

略

布尔型

“false”是true
“”是false

算数Math

.round()//四舍五入
.random()//0-1的随机数
.max，min

正则表达式

比如在验证邮箱的时候使用，验证是否是规定格式的

JavaScript基础（三）

浏览器对象模型

BOM (Browser Object Module)
是的页面和代码之间可以对话
一般都是以window开头的一系列属性和方法
window可以不写

window

window.document.getElementById("header"); //找id为header的标签
window.innerHeight//浏览器内部高度
window.innerWidth//浏览器内部宽度
.open(src)//打开新窗口
.close()//关闭本窗口
.moveTo()//移动当前窗口

history

history.back()//可以用来制作返回按钮
.forward()//前进按钮（要曾经使用过返回按钮才可以）

消息框

警告框
- alert(“文本”)
- alert(“你好” + ‘\n’ + “再见”)
确认框
- confirm(“文本”)
- 返回一个布尔型变量
提示框
- name=prompt(“请输入您的名字”,”Bill Gates”)
- Bill Gates在输入框内提前给出作为提示

时间

在t时间后执行引号内部的代码
- setTimeout(“”，t)
- t单位为毫秒
clearTimeout()
- 取消setTimeout

省略，在javascript基础（二）中提到过
可用于保存用户名和密码，下次就不需要重新输入了
可以设置保存的时间

JavaScript库

JavaScript有很多强大的库很多企业都会采用JQuery
还有一些例如Prototype、MooTools
JQuery是最受欢迎的JavaScript框架

JQuery框架

可以通过两种方式使用它
- 在官网上下载他的源文件或者精简源文件到本地，引入本地的地址
- 直接引入官网的地址
- 注意注意注意！！！
- JQuery的引入语句一定要在本地编辑的js引入之前
- jquery可以解决很多动态操作的问题，使得网页的UI更好

JavaScript基础（四）jQuery（一）

本文参考了w3schoolhttp://www.w3school.com.cn/jquery/

什么是jQuery

jQuery是一个非常强大、非常非常好用的JavaScript库
可以极大地简化JavaScript编程

如何使用jQuery

在jQuery.com网站下载并添加到项目中去，在js中引入
可以直接从谷歌或微软提供的文件中从网络获取，直接添加网络中的路径
这样有一个好处是很多用户都已经加载过jQuery核心库了，不需要重新加载
！！！！注意！！！！
国内的网络大部分上不了谷歌，但是校园网可以，校园网开发者需要考虑到其他开发者无法下载
建议从微软上加载核心库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>

基本语法

$(selector).action()
- $代表jQuery，如果和已有的其他库的重复，可以用jQuery的onconfilct()来更改
- selector代表要选的元素
  - this代表本元素（注意：没有引号）
  - “p”代表所有段落
  - “.demo”代表所有class=“demo”的元素
  - “#demo”代表所有id=“demo”的元素
  - 当然也可以叠加使用
- action代表操作

选择器

接上一条的selector

元素选择器
- selector代表要选的元素
  - $(this)代表本元素（注意：没有引号）
  - $(“p”)代表所有段落
  - $(“.demo”)代表所有class=“demo”的元素
  - $(“#demo”)代表所有id=“demo”的元素
  - 当然也可以叠加使用
属性选择器
- $(“[href]”)所有带有属性href的元素
- $(“[href=’apple.jpg’]”)所有带有href属性而且href的值为apple.jpg的元素
- $(“[href!=’apple.jpg’]”)所有带有href属性而且href的值不是 apple.jpg的元素
css选择器
- $(this).css(“backgroung-color”, “red”)

事件

jQuery有很强的事件处理能力

$(document).ready(function(){

    //文档加载时粗体就隐藏
    $(b).hide();

    //点击id=“button1”时段落隐藏
    $(#button1).click(function(){
        $(p).hide();
    });

    //双击id=“button2”时斜体隐藏
    $(#button2).dblclick(function(){
        $(i).hide();
    });

    //input获得焦点时段落隐藏
    $(input).focus(function(){
        $(p).hide();
    });

    //鼠标悬停在button3上段落隐藏
    $(#button3).mouseover(function(){
        $(p).hide();
    });
});

效果

隐藏、显示

可以用于设置“刷新”、“进入”、“删除”等的效果

$(selector).hide(speed, callback);     //隐藏
$(selector).show(speed, callback);     //显示
$(selector).toggle(speed, callback);   //切换（原状态隐藏则显示，原状态显示则隐藏）

speed为变换速度，可以为一下几个值
- 不写：一瞬间完成
- “fast”：快速完成（引号不能省）
- “slow”：缓慢完成
- 1000：1000毫秒完成
callback：执行完隐藏或显示后执行的函数

淡入淡出

可以用于设置“刷新”、“进入”、“删除”等的效果

$(selector).fadeIn(speed,callback);            //淡入
$(selector).fadeOut(speed, callback);      //淡出
$(selector).fadeToggle(speed, callback);   //切换（原状态隐藏则淡入，原状态显示则淡出）
$(selector).fadeTo(speed,opacity,callback);    //淡出到某一透明度或淡入到某一透明度

opacity为透明度，0-1之间

滑动

可以用于“显示更多”和“收起”按钮的设置

$(selector).slideDown(speed, callback);        //滑下展开
$(selector).slideUp(speed, callback);      //滑上收起
$(selector).slideToggle(speed, callback);  //切换（原状态隐藏则滑下展开，原状态显示则滑上收起）

动画

可以对css参数进行调整形成动画

$(selector).animate({params},speed,callback);

{params}为参数列表
- 例如{left:’250px’}是距左端250px
- - 例如{left:’+=250px’}是距现在位置的左端250px（反复点击会反复右移）
- 但是在标记属性名的时候必须用Camel标记法
- 必须使用 paddingLeft 而不是 padding-left
动画队列
- 可以反复调用animate函数，会按顺序执行

停止动画

停止指定动画

$(selector).stop(stopAll,goToEnd);

stopAll
- false（默认）不清空之后的动画队列
- true 清空之后的队列
goToEnd：
- false（默认）本动画停在此位置
- true本动画停在最终应该结束的位置

链接

多个动作指令可以跟在一个对象后面，依次进行

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

avaScript基础（四）jQuery（二）

Html有关的jQUery

获取内容

$("#test").text(); //粗体字确定得到的结果是：确定
$("#test").html(); //粗体字确定得到的结果是：<b>确定</b>
$("#test").val(); //可以得到输入框的值
$("#test").attr("href"); //得到href属性的值

设置内容

$("#test").text("Hello world!"); 
$("#test").html("<b>Hello world!</b>"); 
$("#test").val("Hello world!"); //设置输入框的值
$("#test").attr("name"，"value"); 
$("#test").attr("name1":"value1",
                "name2":"value2"
                );

回调函数
- 什么是回调函数
  - 顾名思义，回到上一步
  - 例如，这里要设置新的值，那么原先的值哪里去了？就在回调函数里面找

  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });

i为当前元素的位置
origText是原先的文字
attr()的回调函数在地址增加一段这种方面很好用

添加

$('p').append("inner append text");
$('p').prepend("inner prepend text");
$('p').after("ont after text");
$('p').before("out before text");
$('p').append(txt1,txt2,txt3);

删除

$('p').remove(); //删除p
$('p').remove('b'); //删除p里面的b
$('p').empty(); //清空p

改变样式表

增加

$('p').addClass('blue'); //增加一个样式表
$('p').addClass('blue big'); //增加两个个样式表
$('p, b').addClass('blue'); //两个标签都增加一个样式表

删除

$('p').removeClass('blue');

交替

$('p').toggleClass('blue');

设置

$("p").css({"background-color":"yellow","font-size":"200%"});

遍历

祖先

$("span").parent();
$("span").parents();
$("span").parentsUntil();

后代

$("div").children();
$("div").find("");

同胞

$("div").sibling();

AJAX

异步JavaScript和xml（Asynchronous JavaScript and XML）
不重载整个网页，重新在xml中找到数据传到页面上，也包括文本，html，json

load()

$(selector).load(URL,data,callback);

URL是地址地址后面还可以加id号
- 例如$(“#div1”).load(“demo_test.txt #p1”);
data是传给服务器的数据，服务器处理完后返回
callback回调函数
- function(responseTxt,statusTxt,xhr)
  - responseTxt - 包含调用成功时的结果内容
  - statusTXT - 包含调用的状态
  - xhr - 包含 XMLHttpRequest 对象

从服务器请求数据

注意！！这里和前面都不一样了，直接$.

//从服务器获得数据
$.get(URL,callback);
//先传递给服务器data，再获得数据
$.post(URL,data,callback);

//回调函数一般为function(data,status)，其中data为服务器返回的数据

posted @ 2017-11-21 23:28 姜博文阅读(320) 评论(0) 编辑收藏举报

刷新页面返回顶部

姜博文

现代软件工程_团队项目_阿尔法阶段_前端知识分享_2017.11.22

现代软件工程_团队项目_阿尔法阶段_前端知识分享

HTML基础（一）

HTML简介

什么是HTML

HTML标签

编辑器

固定格式

基本元素

HTML基础（二）

HTML CSS

什么是CSS

基本元素

CSS基础（一）

什么是CSS

优先级

基本语法

关于继承

派生选择器（上下文选择器）

id选择器

类选择器

属性选择器

CSS基础（二）

背景

文本

字体

链接

JavaScript基础（一）

什么是JavaScript

标签

位置

寻找某一个id

分局

函数

代码换行

注释

变量

数组

面向对象

调用函数

返回值

运算符、比较符、逻辑运算符

基本语句

表单验证

JavaScript基础（二）

Html DOM

找到标签

写入内容

改变样式

对行为作出反应

增加新节点（标签）

删除节点（标签）

JavaScript对象

创建对象

for in 循环遍历对象属性

数字

字符串

日期

数组

布尔型

算数Math

正则表达式

JavaScript基础（三）

浏览器对象模型

window

history

消息框

时间

cookie

JavaScript库

JQuery框架

JavaScript基础（四）jQuery（一）

什么是jQuery

如何使用jQuery

基本语法

选择器

事件

效果

隐藏、显示

`什么是HTML`

`HTML标签`

`编辑器`

`固定格式`

`什么是CSS`