博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript和css和html,html、css和javascript简介
阅读量:6911 次
发布时间:2019-06-27

本文共 1497 字,大约阅读时间需要 4 分钟。

前言

如果把一个B/S架构的软件比作为一个人的话,那么html就构成了这个人身体内的骨头,css则构成了人体中的皮肤,JavaScript则构成了人的肌肉和脂肪。

HTML

html在页面中的角色可以看做是人体内的骨架,一个页面中的基本html结构为:

Portal

在我们的开发中,使用的最多的标签就是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

转载地址:http://rincl.baihongyu.com/

你可能感兴趣的文章
牛腩新闻系统(一)——UML、数据库设计
查看>>
使用JSONObject 深度序列化和反序列化
查看>>
ios Button
查看>>
【JMeter连接SQLServer】採用window鉴权方式连接(原创)
查看>>
es65 跨模块常量
查看>>
JSP处理XML数据
查看>>
奇妙的 CSS shapes(CSS图形) 【css 图形,绘图,CSS 几何图形)】
查看>>
JavaScript利用Date实现简单的倒计时实例
查看>>
静态代理模式
查看>>
NuGet包断线续传下载
查看>>
8 Reasons why SharePoint is Bad for Your Business 8个理由告诉你,为什么SharePoint对你的业务有害...
查看>>
Activiti解析.bpmn文件获得User Task节点的CandidateUsers特性的值
查看>>
树莓派进阶之路 (016) - 通过595驱动4位LED显示系统时间
查看>>
Python网络爬虫(一):初步认识网络爬虫
查看>>
assets raw 资源 AssetManager
查看>>
[基础规范]JavaBeans规范
查看>>
VMware80端口映射
查看>>
同一个tomcat多个项目共享session,一个tomcat两个项目共享sessionId
查看>>
centos安装man中文手册
查看>>
网络通信与面相对象
查看>>