前言
如果把一个B/S架构的软件比作为一个人的话，那么html就构成了这个人身体内的骨头，css则构成了人体中的皮肤，JavaScript则构成了人的肌肉和脂肪。
HTML
html在页面中的角色可以看做是人体内的骨架，一个页面中的基本html结构为：
<html>
<head>
<meta charset="UTF-8">
<title>Portal</title>
</head>
<body>
<div class="box-class" id="box_id" ></div>
<ul>
<li></li>
<li></li>
</ul>
</body>
</html>
在我们的开发中，使用的最多的标签就是div，在了解div之前需要先了解html中块级元素与行内元素之间的区别，一般情况下，块级元素只能独占一行，不能与其他任何元素并列，而行内元素则可以在一行内有多个存在。但是通过样式的设置可以却让两个块级元素并排显示
CSS
css在页面中的角色可以看做一个人的皮肤，一般称作样式表，它决定了页面中标签的样式，包括标签的宽度、高度、填充背景（可以是颜色或者图片）、边框等等，例如我们要将上方div的宽度设置为200像素，高度设置为100像素，背景色设置为红色则可以些为：
div .box-class{
weight : 200px;
height : 100px;
background-color : #FF0000
}
css中的选择器
在这里我用到了css中的类选择器，类选择器通过符号点开头，选择标签中已经定义好的类名，此处我写作div .box-class则意为"选择所有div中class为box-class的标签"，css中还有很多选择器包括id选择器，属性选择器，标签选择器，详情见css选择器的介绍，不过在我们的项目中大多使用的是类选择器。
在css中还有个很重要的概念就是盒模型，盒模型分为标准盒模型与IE盒模型，详细信息见标准盒模型与IE盒模型的区别
JavaScript
JavaScript在页面中的角色可以看做一个人的肌肉，主要负责一些动作的完成，也就是我们常用到的与页面的交互，我们可以通过js来对页面中的html标签进行操作，可以为标签修改样式，也可以为标签绑定事件，JavaScript与css一样同样有多中选择器，最常见就是ID选择器了:
var boxElement = document.getElementById("box_id");
boxElement.onclick = function sayHello(){
alert("Hello");
}
这里我们就通过id选择了一个id为"box_id"的标签,同时为它绑定了鼠标点击事件
但是在我们的项目中，对于标签的操作基本不会用到上面这种原生js写法，更多的则是用到js框架jquery.JavaScript的更多语法可以参考链接JavaScript标准参考教程
jQuery
如果说JavaScript是肌肉的话，那么jQuery则是肌肉群，通过不同的肌肉群的配合可以打出华丽的组合拳。运用jQuery我们可以更方便的选择到一个节点
$("#box_id").bind('click',function(){
alert();
});
id选择器是目前我们使用的最多的选择器，更多的选择器可以参考链接jQuery选择器
目前我们的Ajax请求也都是调用jQuery中的方法，例如：
$.ajax({
type : "POST",
url : '/Portal/categorys/',
data : JSON.stringify({
'name' : docSortName,
'pid' : pid
}),
dataType : 'json',
contentType : "application/json"
});
关于$.ajax()更多的介绍可以参考链接jQurey.Ajax
网友评论