github_34514750-CSDN博客

原创 mvc mvp mvvm

1.mvc视图（View）：用户界面。控制器（Controller）：业务逻辑模型（Model）：数据保存 View 接受用户交互请求 View 将请求转交给Controller Controller 操作Model进行数据更新数据更新之后，Model通知View更新数据变化 View 更新变化数据数据的通信是单向的2.mvpMVP 模式将 Controller 改名为 Pres

2017-09-12 21:03:10 514

原创浏览器多线程和js单线程

0.前言开发过程中遇到js线程和ui渲染线程互斥问题。导致ui无法正常更新等问题。这些问题的根源就是因为浏览器的多线程和js的单线程引起的。看本篇博客之前，应该充分理解消息队列，事件循环，同步异步任务等概念。这些概念以前都知道，也了解多线程的概念。但是当遇到问题的时候，这些东西都被抛到脑后，值得深思。1.知识点补充js单线程js运作在浏览器中，是单线程的，js代码始终在一个线程上执行，此线程被称

2017-08-02 15:13:11 14738 4

原创 jquery-事件-on源码

谈一下Jquery中的bind(),live(),delegate(),on()的区别？1.bind().bind()直接绑定在相应的DOM元素上，可以解决跨浏览器的问题。但是对于动态添加的属于匹配到的元素，不会被触发事件的，需要多次绑定，影响效率。$("#niu").bind('click',function(){ alert("hello niuniu");});2.live()liv

2017-04-03 14:08:34 2549

原创 js--数据结构--链表

链表是一种线性结构，每一个节点中，储存了下一个节点的指针。1.链表的构造函数,属性是头指针和长度 2.节点的构造函数,属性是element值和指向下个节点的指针 3.原型方法 append(element): 添加元素到链表尾部. insert(position,element): 向单向链表中某个位置插入元素 indexOf(element): 寻找某个元素在单向

2017-03-26 18:39:43 552

原创 js--ajax和跨域

1.Ajax 是什么? 如何创建一个Ajax？请尽可能详尽的解释 Ajax 的工作原理？使用 Ajax 都有哪些优劣？ajax是什么1.AJAX = 异步 JavaScript 和 XML。 2.AJAX 是一种用于创建快速动态网页的技术。 3.通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。XMLHttpR

2017-03-04 21:03:58 722

原创 js--引用类型Array--3.数组简单复制和深度复制

js数组也是很重要的一块，所以准备对数组的操作等写一个系列。 1.第一部分是二元数组的基础知识。 http://blog.csdn.net/github_34514750/article/details/51049935 2.第二部分讲解数组的几种合并方法优劣比较 http://blog.csdn.net/github_34514750/article/details/51320982

2017-02-23 18:33:23 10393 1

原创 BootStrap--CSS组件--大屏幕展播

在设计网页布局的时候，经常会有大屏内容的显示jumbotron 顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。源码中可以看出：如果jumbotron放在container样式内，则显示圆角;如果不放在里边，则不会显示圆角。<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8

2016-12-16 16:35:38 630

原创 BootStrap--CSS组件-- 徽章(badge)

在开发交互式系统或者信息系统时，经常要显示一些最新收到的消息、需要有多少审批的消息。在span或者label上应用该badge样式即可徽章使用//使用<a href="#" class="btn btn-default">通知<span class="badge">42</span></a><ul class="nav nav-pills nav-stacked" style="width:2

2016-12-16 16:34:44 9454

原创 BootStrap--CSS组件--标签(label)

网页排版的时候，经常要高亮一些标题里的特殊字符或者整个字符。bootstrap提供了一个.label样式用于实现高亮功能。 label主要设置背景色和背景方框//源码.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; co

2016-12-16 16:23:48 2859

原创 BootStrap--CSS组件--分页(pagination)和翻页(pager)

几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。//源码.pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px;}.pagination > li { display: inline;}.pagination >

2016-12-16 16:22:50 6318

原创 BootStrap--CSS组件--面包屑导航(breadcrumb)

面包屑breadcrumb一般用于导航，表示当前页面所在的位置面包屑可以设置其他相关的小标记内容，比如标签、徽章标记等。//源码//基础样式.breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px

2016-12-16 15:58:16 5142

原创 BootStrap--CSS组件--导航条(navbar)

1.基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav 2.导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form 3.导航条中的按钮，文本，链接navbar-btn、bavbar-text、navbar-link 4.导航条中的

2016-12-16 15:56:03 9495

原创 BootStrap--CSS组件--导航(nav)

//源码.nav { padding-left: 0; margin-bottom: 0; list-style: none;}.nav > li { position: relative; display: block;}.nav > li > a { position: relative; display: block; padding: 10px 15

2016-12-16 15:54:58 1510

原创 BootStrap--CSS组件--输入框组(input-group)

了解table-cell的表格width设置为1%的原因。http://www.tuicool.com/articles/VzUVfyi 通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。input-group(input-group-xs,input-group-sm,in

2016-12-16 15:53:56 20695

原创 BootStrap--CSS组件--按钮下拉菜单

1 按钮下拉菜单结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果，就类似于单击一个button按钮，然后显示隐藏的下拉菜单。组合式下拉菜单分离式下拉菜单向上弹起的下拉菜单//源码，css实现方式主要是设置.dro

2016-12-16 15:51:48 779

原创 BootStrap--CSS组件--按钮组(btn-group)

.btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical 容器内的按钮，可以使用button元素，也可以使用a元素，产生的效果是一样的。容器的多个分组以table风格进行显示，每组之间保持5px的left margin//源

2016-12-16 15:33:30 5917

原创 BootStrap--CSS组件--下拉菜单(dropdown)

dropdown、dropdown-menu、dropdown-header、divider、dropdown-submenu 例子见下拉菜单.html//源码.dropup,.dropdown { position: relative;}.dropdown-toggle:focus { outline: 0;}.dropdown-menu { position: abso

2016-12-16 15:29:23 2854

原创 BootStrap--CSS组件--字体图标(glyphicon)

使用的时候同时使用两个样式，即.glyphicon和.glyphicon-/* 开头的样式//字体图标.html<div class="btn-toolbar"> <div class="btn-group"> <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-align-left"><

2016-12-16 15:27:59 1963

原创 BootStrap--CSS布局--图像

img-rounded、img-circle、img-thumbnail(缩放图模式)//源码img { vertical-align: middle;}.img-responsive,.thumbnail > img,.thumbnail a > img,.carousel-inner > .item > img,.carousel-inner > .item > a > img

2016-12-16 15:25:19 416

原创 BootStrap--CSS布局--按钮

1 按钮按钮是任何系统都不能缺少的组件，设置到按钮的大小、颜色、状态等。//btn源码.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: c

2016-12-16 15:22:25 425

原创 BootStrap--CSS布局--表单

1. 表单表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式(基础、内联、横向)表单的元素 input textarea select checkbox radio(checkbox和radio是input的特殊类型) 其他标签 form fieldset legend1.1.基础表单<!--基础表单：1.向父 <form> 元素添加 rol

2016-12-16 15:14:00 701

原创 BootStrap--CSS布局--表格

表格组件中，BootStrap提供了 1种基础.table样式 4种附加样式(.table-striped/.table-bordered/.table-hover/.table-condensed) 1种支持响应式布局的.table-responsivetable样式//源码table { background-color: transparent;}caption { pad

2016-12-15 14:28:03 657

原创 BootStrap--CSS布局--代码

Bootstrap对代码显示提供了三种方式：内联代码1.使用元素显示单行内联代码内联代码主要是设置code元素的背景颜色和其内部的文字颜色。//用法<code><body></body></code>//源码code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color:

2016-12-15 14:25:13 474

原创 BootStrap--CSS布局--列表

列表普通列表ul li 有序列表ol li 去点列表.list-unstyled 内联列表.list-inline 定义列表dl dt dd 水平定义列表dl-horizontalul,ol { margin-top: 0; margin-bottom: 10px;}ul ul,ol ul,ul ol,ol ol { margin-bottom: 0;}普通列

2016-12-15 13:11:22 427

原创 BootStrap--整体框架--JavaScript插件架构

1. JavaScript插件架构如下是插件alert的全部代码，每个插件都定义在如下类似的作用域中：+function ($) { 'use strict'; // ALERT CLASS DEFINITION // ====================== var dismiss = '[data-dismiss="alert"]' var Alert = functio

2016-12-13 14:54:43 1866

原创 BootStrap--整体框架--基础布局组件

1 基础布局组件在12栅格系统上基础上，BootStrap还提供了多种基础布局组件。 CSS组件，总结为8大类型的样式：基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式1.1基础样式基本样式，一般包含文本字体，颜色背景，边框，定位等，如下面警告框：//源码.alert { padding: 15px; margin-bottom: 20px

2016-12-07 21:47:30 2222

原创 BootStrap--整体框架--CSS12栅格系统

1.整体架构BootStrap框架公共六个部分：(css组件和js插件是其表现形式，其余的是基础支撑平台) 表现形式 CSS组件 JS插件基础支撑平台 CSS12栅格系统基础布局组件 jQuery 响应式设计1.1 CSS12栅格系统12栅格系统是BootStrap的核心功能，也是响应式设计核心理念的一个实现方式。1.1.1 实现原

2016-12-07 16:30:24 11765 1

原创 BootStrap--入门准备

屏幕分辨率(PX)：指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080。（这里的1像素值得是物理设备的1个像素点）屏幕像素密度(PPI)：屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大

2016-12-07 09:31:27 420

原创 CSS-响应式框架

1.使用流式960网格布局960网格系统不是响应式的，更像一个表格，其列跨越固定宽度的表头。它在960px宽的窗口中布局最完美准备工作960网格布局使用了百分比宽度、左浮动元素替代了固定宽度的网格元素。该版本大数情况下能良好工作，但是当列变得很狭窄时，阅读会变得很困难。并且下载解压流式960网格系统代码，引入grid.css实现方式下面用container_16布局且使用了grid(引用了grid.

2016-12-01 09:51:30 421

原创 js--客户端检测

客户端检测–客户端检测的三种方法：能力检测，怪癖检测，用户代理检测。浏览器普遍存在的不一致性问题，用各种客户端检测方法，来突破或者规避种种局限性。但是，只要能找到更通用的方法，就应该采用。不到万不得已，不要使用客户端检测。能力检测–人们广泛接受的客户端检测形式就是能力检测不是识别特定的浏览器，是识别浏览器的能力。1.先检测达成目的最常用的特性，可以保证代码最优 2.测试实际要用到的特性，而不是测试这

2016-11-22 17:24:04 369

原创 js--事件--通用的事件侦听器函数

1.事件流（事件捕获和事件冒泡） http://blog.csdn.net/github_34514750/article/details/53067077 2.事件处理程序 http://blog.csdn.net/github_34514750/article/details/53083973 3.事件对象 http://blog.csdn.net/github_345147

2016-11-08 16:45:13 6561 2

原创 js--事件--事件对象

关于事件写了一系列文章 1.事件流（事件捕获和事件冒泡） http://blog.csdn.net/github_34514750/article/details/53067077 2.事件处理程序 http://blog.csdn.net/github_34514750/article/details/53083973 3.事件对象 4.通用的事件侦听器函数 5.事件循环（e

2016-11-08 16:44:10 639

原创 js--事件--事件处理程序

关于事件写了一系列文章1.事件流（事件捕获和事件冒泡） http://blog.csdn.net/github_34514750/article/details/53067077 2.事件处理程序本文介绍事件处理程序 3.事件对象 4.通用的事件侦听器函数 5.事件循环（event loop） http://blog.csdn.net/github_34514750/article/

2016-11-08 16:42:29 556

原创 js--事件--事件代理

1.事件流（事件捕获和事件冒泡） http://blog.csdn.net/github_34514750/article/details/53067077 2.事件循环（event loop） http://blog.csdn.net/github_34514750/article/details/53067106 3.事件代理（(event delegation）1.请解释事件代理 (e

2016-11-07 16:06:04 1319

原创 js--事件--事件循环

关于事件写了一系列文章1.事件流（事件捕获和事件冒泡） http://blog.csdn.net/github_34514750/article/details/53067077 2.事件循环（event loop）本文介绍事件循环 3.事件代理（(event delegation）1.js是单线程的？什么是同步异步？什么同步异步函数？什么是异步过程？什么是消息队列和事件循环 (event

2016-11-07 16:03:24 920

原创 js--事件--事件流

关于事件写了一系列文章1.事件流（事件捕获和事件冒泡）2.事件循环（event loop）3.事件代理（(event delegation）1.事件流(事件冒泡和事件捕获)事件流描述的是从页面中接受事件的顺序。事件冒泡机制：当一个元素接收到事件的时候，会把他接收到的所有事件传播给他的父级，一直到顶层window事件捕获机制：当触发目标元素时，会从目标元素的最顶层的祖先元素事件往下执行到目标元素为止。

2016-11-07 16:01:03 1116

原创 js--DOM2--元素遍历

1.DOM2 级遍历?DOM2 级遍历DOM结构的类型：NodeIterator和TreeWalker，两者都是深度优先的DOM结构遍历1.NodeIterator–较简单使用document.createNodeIterator()方法创建NodeIterator的新实例，可以接收的4个参数，创建的NodeIterator的新实例中一个内部指针指向根节点1.root 作为搜索起点的树中的节点2.

2016-11-04 15:39:58 1187

原创 js--NodeList转换成数组的方法

Array.prototype.slice.call(someNode.childNodes,0);function convertListToArray(nodes) { var array = null

2016-11-01 11:22:03 7728

原创 js--DOM

1.DOM的作用DOM是针对HTML和XML文档的API，允许开发人员添加，移除和修改页面的某一部分。DOM为web文档创建带有层级的结果，这些层级是通过node节点组成2.Node接口–12种节点DOM1级定义了一个 Node接口，该接口将DOM中的所有节点类型实现，总共有12种节点。常用的有元素节点，属性节点，文本节点，注释节点，文档节点ELEMENT_NODE(1),ATTRIBUTE_NO

2016-11-01 11:21:14 239

原创 js--this

this是执行上下文的一个属性，this值在进入上下文时确定，并且在上下文运行期间永久不变。也就是this 是动态绑定，或称为运行期绑定的(executionContextObj = { variableObject: { /* 函数中的arguments对象, 参数, 内部的变量以及函数声明 */ }, scopeChain: { /* variableObject 以及所有父执行

2016-10-25 13:23:49 253

空空如也

空空如也