BS学习总结

来源：互联网发布：js字符串变数组编辑：程序博客网时间：2024/06/07 10:55

前言

BS学习是小编学习过程中一个很重要的项目，BS学习包含很多内容，历经6个多月小编总算是学习完了，俗话说的好，温故而知新，哈哈，并且也是应师父的要求，对BS的项目有一个总结，所以，小编的这篇就应运而生了。

叙述

B/S架构

B/S结构（Browser/Server，浏览器/服务器模式），是web兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器，服务器安装SQL Server、Oracle等数据库。浏览器通过Web Server同数据库进行数据交互。在这种结构下，用户界面完全通过WWW浏览器实现，一部分事务逻辑在前端实现，但是主要事务逻辑在服务器端实现。浏览器通过Web Server 同数据库进行数据交互。

B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件，只要有一台能上网的电脑就能使用，客户端零安装、零维护。系统的扩展非常容易。

B/S架构和C/S架构的区别

C/S 架构是一种典型的两层架构，其全程是Client/Server，即客户端服务器端架构，其客户端包含一个或多个在用户的电脑上运行的程序，而服务器端有两种，一种是数据库服务器端，客户端通过数据库连接访问服务器端的数据；另一种是Socket服务器端，服务器端的程序通过Socket与客户端的程序通信。

C/S 架构也可以看做是胖客户端架构。因为客户端需要实现绝大多数的业务逻辑和界面展示。这种架构中，作为客户端的部分需要承受很大的压力，因为显示逻辑和事务处理都包含在其中，通过与数据库的交互（通常是SQL或存储过程的实现）来达到持久化数据，以此满足实际项目的需要。

下面我们就通过一张图来看一下B/S和C/S两种架构的区别：

下面就和小编一起来回顾一下，BS中我们都学过什么吧。

我们从面向对象的思想来看一下B/S，B/S就相当于一个对象，它通过HTML让大家认识它，看见它，通过CSS来展示自己的特征和其他对象所不同的地方。用JS（AJAX，jquery）来表示自己的行为。所以说，B/S还是一个很单纯的小对象嘛。下面小编通过这几个大知识点中的其中几个重要的部分，来一起学习一下。

CSS：

盒子模型：

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性可以把它转移到日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。

不同部分的说明：

****Margin(外边距) - 清除边框外的区域，外边距是透明的。
****Border(边框) - 围绕在内边距和内容外的边框。
****Padding(内边距) - 清除内容周围的区域，内边距是透明的。
****Content(内容) - 盒子的内容，显示文本和图像。

通过代码理解一下：

<html><head><meta charset="utf-8"> <style>div {    background-color: yellow;    width: 300px;    border: 30px solid green;    padding: 50px;    margin: 40px;}</style></head><body><h2>盒子模型演示</h2><p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p><div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div></body></html>

css选择器（常用）

类选择器：在 CSS 中，类选择器以一个点号显示

<hl class="center">    This heading will be center-aligned </h1><p class="center">    This paragraph will also be center-aligned </p>.center{text-align:center}

ID选择器：id 选择器以 "#" 来定义。

〈 p id="red">这个段落是红 色 。</p>〈 p id="green">这 个 段 落 是绿 色 </p>   #red{color:red;}  #green{color:green;}

属性选择器：

<html><head><style>[title]{color:red;}</style></head><body><h1 title="Hello world">Hello world</h1><a title="runoob.com" href="http://www.runoob.com/">runoob.com</a><hr><h2>Will not apply to:</h2><p>Hello!</p></body></html>

HTML：

HTML表格

HTML列表

HTML下拉框

<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>

HTML 超链接

CSS 定义四种伪类属性： a:link 、 a:hover 、 a:active和 a:visited ， CSS 通过这四个伪类属性来设计超链接的动态样式。
a:link / * 超链接默认样式 */
a ：visited / *单击超链接后的样式*/
a ：hover / *鼠标移动到超链接上时的样式 */
a ：active /* 在单击鼠标时的样式，即被激活样式 */

a { / * 默 认 超 链 接 样 式 */font—size ： 12p × ：   字体大小12像素color： # FF0000 ；    /* 字体的颜色*/}a : hover(){* 鼠 标 滑 过 超 链 接 样 式  */color： #396 ；       /* 字体的颜色*/}a ：active { 鼠 标 单 击 与 释 放 之 间 的 超 链 接 样 式 color ：#CC66FF;     /* 字体的颜色*/}a : visited{/* 鼠 标 单 击 后 超 链 接 样 式 · / color:#FFCC33;       /* 字体的颜色*/}

JS、JQuery、AJAX了解：

1.javascript是一种在客户端执行的脚本语言。ajax是基于javascript的一种技术，它主要用途是提供异步刷新（只刷新页面的一部分，而不是整个页面都刷新）。一个是语言,一个是技术,两者有本质区别.

2、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便

JavaScript

1、用JavaScript可以做很多事情，使网页更具交互性，给站点的用户提供更好,更令人兴奋的体验。JavaScript使你2、可以创建活跃的用户界面，当用户在页面间导航时向他们反馈。
使用JavaScript来确保用户以表单形式输入有效的信息，这可以节省你的业务时间和开支。
3、使用JavaScript，根据用户的操作可以创建定制的HTML页面。
4、JavaScript还可以处理表单，设置cookie，即时构建HTML页面以及创建基于Web的应用程序。

JQuery

一、jQuery常用事件

1、可以通过$(document).ready(function0{})的方式来定义页面装载完成时，需要执行的方法。

2、.$(function(){})是$(document).ready(function0{})的简化方法

3、可以通过$(）方法来获得页面的指定节点，参数某种css的选择器，当$()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成JQuery对象。当$()方法的参数如果是一段正确的HTML文本，则可以创建一个DOM节点，并包装成JQuery对象。

4、可以在$()方法返回的jquery对象上执行各种的方法来获取数据，定义事件执行Jquery操作。

5、val()方法可以获得结点的value属性值。

6、html()方法可以设定某个节点中的HTML内容

7、click()方法可以响应鼠标点击事件。

8、keyup()方法可以响应键盘弹起的事件。

9、$.get()方法可以和服务器端进行get方式的交互，注册的callbck方法会再数据回来的时候被调用，这个方法会接收到代表服务器端返回数据的一个纯文本的参数。

10、addClass()和removeClass()方法可以给某个节点添加或删除一个class.

11、发送给服务器端的数据在JavaScript中做两个encodeURL，然后在服务器端的代码中按UTF-8的方式做一个URLDecode,可以解决中文乱码的问题。

二、Jquery元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。
1、$("p") 选取 <p> 元素。
2、$("p.intro") 选取所有 class="intro" 的 <p> 元素。
3、$("p#demo") 选取所有 id="demo" 的 <p> 元素。

三、jQuery 使用 XPath 表达式来选择带有给定属性的元素。
1、$("[href]") 选取所有带有 href 属性的元素。
2、$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
3、$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
4、$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

四、hide事件

1、$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
2、$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
3、$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。
4、$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

五、动态效果

1、jQuery fadeIn()用于淡入已隐藏的元素
2、jQuery fadeOut() 方法用于淡出可见元素。
3、jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则fadeToggle()会向元素添加淡入效果
如果元素已淡入，则fadeToggle()会向元素添加淡出效果。
4、jQuery fadeTo()方法允许渐变为给定的不透明度（值介于0与1之间）

AJAX：

get方法：从数据库获得数据

//下拉框！！！福分变更得到加分的类型function getcategory() {    $.ajax({        url: "/DayDetails/getcategory",//跳转到下一个页面        // 数据发送方式        type: "get",        // 接受数据格式        dataType: "json",        // 要传递的数据        data: 'data',        // 回调函数，接受服务器端返回给客户端的值，即result值        success: function (data) {            var area = document.getElementById("category");            var optionstring = "";            if (data.length > 0) {                for (var i = 0; i < data.length; i++) {                       optionstring += "<option value=" + data[i].type_ID + ">" + data[i].type_Name + "</option>";                }            }            if (area.options.length == 0) {                $("#category").html(optionstring);                $('#category').selectpicker('refresh');            }        },        error: function (data) {         }    })}

post方法：往数据库中添加数据

//多个加分的保存已经没有用function multiadd() {    //被加人的id    var userID = str;    //被加人班别    var UserGrade = Grade;    //添加的积分    var bonus = document.getElementById("addscore1").value;    //添加积分的备注    var bonusRemark = document.getElementById("reason1").value;    //添加积分的类别    var usercategory = document.getElementById("category2").value;     //开始进行添加    if (!isNaN(bonus)) {        //进行积分的添加！        $.ajax({            type: "POST",            url: "/DayDetails/BonusDayscorebatchW",            data: { "userGrade": UserGrade, "bonus": bonus, "bonusRemark": bonusRemark, "userId": userID, "usercategory": usercategory },            traditional: true,            dataType: "json",            complete: function (msg) {                if (msg.responseText == "true") {                    mui.alert('添加成功！', 'ok');                                    }                else {                    mui.alert('添加失败！', '提示');                    return;                }            }        })//ajax末尾    } else {                mui.alert('添加积分请输入数字！', '提示');        document.getElementById("addscore1").value = "";//添加积分的框        return;    }    mui('#popover').popover('toggle');                  //弹出框隐藏    checkAllclear();                                    //多选框清空};

小结

如今已经进入到了网络时代，BS项目已经成为了一种趋势，所以，掌握BS项目的知识尤为重要，掌握基础内容，掌握最根本的基础点。Fighting。

阅读全文

0 0