搜索
三四周学习总结马巧巧学习内容：一．jQuery插件二．AJAX三．Bootstrap四．HTML5五．CSS3六．总结jQuery插件的开发包括两种：1.一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。（jQuery的全局函数就是属于jQuery命名空间的函数。）例：jQuery.extend({jQuery.foo=function(){alert('Thisisatest.Thisisonlyatest.');};jQuery.bar=function(param){alert('Thisfunctiontakesaparameter,whichis'+param+'.');};});调用时:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');jQuery插件的开发包括两种：2.另一种是对象级别的插件开发，即给jQuery对象添加方法例：形式1：(function($){$.fn.extend({pluginName:function(opt,callback){//代码；}})})(jQuery);形式2：(function($){$.fn.pluginName=function(){//代码；};})(jQuery);析：上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.其他与插件相关内容：（不详细介绍）•匿名函数•将函数转换为表达式的方法：分组操作符()，void操作符，~操作符，！操作符...例：(function($){//dosomething;})(jQuery);•给插件默认参数，实现插件的功能注：当使用returnjQuery对象时，才能使用链式调用•暴露公共方法，给别人扩展你的插件（如果有需求的话）•插件私有方法返回首页AJAX（异步交互的方式）：•概述：1.通过HTTP请求加载远程数据。2.jQuery底层AJAX实现。简单易用的高层实现用$.get,$.post等。$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。3.最简单的情况下，$.ajax()可以不带任何参数直接使用。注：所有的选项都可以通过$.ajaxSetup()函数来全局设置。•语法：jQuery.ajax(url,[settings])返回值:XMLHttpRequest析：url:一个用来包含发送请求的URL字符串。settings:AJAX请求设置。所有选项都是可选的。AJAX（异步交互的方式）：setting选项：（只介绍个别常用的）•async—(默认:true)默认设置下，所有请求均为异步请求。•cache—(默认:true,dataType为script和jsonp时默认为false)jQuery1.2新功能，设置为false将不缓存此页面。•type—(默认:GET)请求方式(POST或GET)•url—(默认:当前页地址)发送请求的地址。•data—发送到服务器的数据•dataType—预期服务器返回的数据类型•error—(默认:自动判断(xml或html))请求失败时调用此函数。有以下三个参数：XMLHttpRequest对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是timeout,error,notmodified和parsererror。•processData—(默认:true)默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型application/x-。如果要发送DOM树信息或其它不希望转换的信息，请设置为false。•success(data,textStatus,jqXHR)—请求成功后的回调函数。不详细介绍以下：•accepts•beforeSend(XHR)•complete(XHR,TS)•contents•contentType•context•converters•crossDomain•dataFilter•global•headers•ifModified•isLocal•jsonp•jsonpCallbackmimeType•password•scriptCharset•statusCode•traditional•timeout•username•xhr•xhrFieldsAJAX（异步交互的方式）：•回调函数：1.如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。2.beforeSend在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。3.error在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）4.dataFilter在请求成功之后调用。传入返回的数据以及dataType参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。5.success当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。6.complete当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。AJAX（异步交互的方式）：两个常用示例：返回首页Bootstrap：•Bootstrap简介和优势•Bootstrapcss•Bootstrap布局组件•Bootstrap插件注：详情请参考简介和优势：•简介：Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。•优势：1.移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。2.浏览器支持：所有的主流浏览器都支持Bootstrap。InternetExplorer、Firefox、Opera、GoogleChrome、Safari3.容易上手：只要您具备HTML和CSS的基础知识，您就可以开始学习Bootstrap。4.响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见Bootstrap响应式设计。5.它为开发人员创建接口提供了一个简洁统一的解决方案。6.它包含了功能强大的内置组件，易于定制。7.它还提供了基于Web的定制。8.它是开源的。Bootstrapcss•包括以下内容：一．Bootstrap网格系统二．Bootstrap排版三．Bootstrap代码四．Bootstrap表格五．Bootstrap表单六．Bootstrap按钮七．Bootstrap图像八．Bootstrap帮助器类Bootstrap网格系统•定义：Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。•基本网格结构：divclass=containerdivclass=rowdivclass=col-*-*/divdivclass=col-*-*/div/divdivclass=row.../div/divdivclass=container....•多设备工作图：Bootstrap排版•定义：Bootstrap使用HelveticaNeue、Helvetica、Arial和sans-serif作为其默认的字体栈。使用Bootstrap的排版特性，您可以创建标题、段落、列表及其他内联元素。1.标题—（h1到h6）及内联子标题small2.强调—默认强调标签small（设置文本为父文本大小的85%）、strong（设置文本为更粗的文本）、em（设置文本为斜体）。3.缩写—Bootstrap定义abbr元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为abbrtitle属性添加了文本）4.地址—使用address标签，您可以在网页上显示联系信息。由于address默认为display:block;，您需要使用标签来为封闭的地址文本添加换行。5.引用—您可以在任意的HTML文本旁使用默认的blockquote。其他选项包括，添加一个small标签来标识引用的来源，使用class.pull-right向右对齐引用。6.列表—Bootstrap支持有序列表、无序列表和定义列表。Bootstrap代码•Bootstrap允许您以两种方式显示代码：1.第一种是code标签。如果您想要内联显示代码，那么您应该使用code标签。2.第二种是pre标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用pre标签。示例如图所示：•注：请确保当您使用pre和code标签时，开始和结束标签使用了unicode变体：<和>。Bootstrap表格•定义：Bootstrap提供了一个清晰的创建表格的布局。下表列出了Bootstrap支持的一些表格元素：如图所示：•可选的表格类：1.条纹表格：通过添加.table-stripedclass，您将在tbody内的行上看到条纹2.边框表格：通过添加.table-borderedclass，您将看到每个元素周围都有边框，且占整个表格是圆角的3.悬停表格：通过添加.table-hoverclass，当指针悬停在行上时会出现浅灰色背景4.精简表格：通过添加.table-condensedclass，行内边距（padding）被切为两半，以便让表看起来更紧凑5.响应式表格：通过把任意的.table包在.table-responsiveclass内，您可以让表格水平滚动以适应小型设备（小于768px）。当在大于768px宽的大型设备上查看时，您将看不到任何的差别。注：具体样式请参照表单•定义：Bootstrap通过一些简单的HTML标记和扩展的类即可创建出不同样式的表单。•类型：1.垂直表单（默认）2.内联表单3.水平表单•支持的表单控件：Bootstrap支持最常见的表单控件，主要是input、textarea、checkbox、radio和select。•静态控件：当您需要在一个水平表单内的表单标签后放置纯文本时，请在p上使用class.form-control-static。•表单控件大小：您可以分别使用class.input-lg和.col-lg-*来设置表单的高度和宽度。Bootstrap表单控件可以在输入框input上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在input后使用.help-block。Bootstrap表单•表单控件状态定义：除了focus状态（即，用户点击input或使用tab键聚焦到input上），Bootstrap还为禁用的输入框定义了样式，并提供了表单验证的class。输入框焦点：当输入框input接收到:focus时，输入框的轮廓会被移除，同时应