qq_37036642-CSDN博客

原创网购秒杀系统架构案例分析

秒杀活动的技术挑战对现有网站业务造成冲击高并发下的应用数据库负载突然增加的网络及服务带宽直接下单秒杀系统的应对策略秒杀系统独立部署秒杀商品页面静态化租赁秒杀活动网络带宽动态生成随机下单页面URL

2017-08-22 17:25:08 334

原创网站的安全架构

全球大约70%的，外部应用攻击都是来自插XSS攻击和SQL注入攻击，此外常用的外国应用还包括CSRF，session劫持等手段xss攻击及跨站点脚本攻击，黑客通过篡改网页，注入恶意html脚本，在用户浏览网页时控制用户浏览器进行恶意操作的一种攻击方式消毒：对XSS攻击进行字符转义，浏览器页面访问httponly属性的cookie 防止XSS攻击者窃取Cookie注

2017-08-22 17:15:08 294

原创网站的伸缩性架构

网站的伸缩性架构：通过不断的向集群中添加服务器来增加整个集群的处理能力，这就是系统的伸缩性架构伸缩性设计，可分为两类一类是根据功能进行物理分离实现伸缩，一类是单一功能通过集群实现伸缩，是不同的服务器部署不同的服务，提供不同的功能，后者是集群内的多台服务器部署相同的服务，提供相同的功能实现负载均衡的方法，有以下几种http重定向负载均衡DNS域名解析负载均衡反向代理负载均

2017-08-22 16:09:04 209

原创网站的高可用架构

实现高可用架构的主要手段是数据和服务的冗余备份及失效转移，一旦某些服务器死机服务器切换到其他可用的服务器上，如果磁盘损坏，则从备份的磁盘读取数据一个典型的网站分为三层：应用层服务层数据层之间具有相对独立性，应用层主要负责具体业务逻辑处理，服务层负责提供可复用的服务，数据层服务负责数据的存储与访问位于服务层应用层的服务器通常是为了应对高并发的访问请求，数据库的服务可以通过数据

2017-08-22 15:51:22 351

原创大型网站核心要素和高性能架构

大型网站核心要素：性能可用性伸缩性扩展性安全性性能：在浏览器可以通过浏览器缓存，使用业面压缩合理布局页面减少 cookie传输等手段改善性能还可以使用cdn将网站静态内容分发至离用户最近的网络服务商机房使用户通过最短访问路径获取数据可以在网站机房部署反向代理服务器缓存热点文件，加快请求响应速度减少应用服务器负载压力应用服务器端可以使用服务器本地缓存和分布式缓存通过

2017-08-22 00:43:20 215

原创大型网站架构模式

分层分层是大型网站架构模式应用系统中最常见的一种架构模式系统分几个部分，每个部分负责一部分相对比较单一的职责，然后通过上层对下层的依赖和调用组成一个完整的系统，在开发过程中，必须合理规划层次边界和接口，严格遵循分层架构的约束，禁止跨层次的调用分割网站越大功能越复杂服务和数据库处理的业务越来越多将不同的功能和服务分割开来分布式对于大型网站分成和分割的一个主要目的是：为了

2017-08-21 21:54:26 147

原创大型的网站的架构演化

大型网站的特点：高并发面对高并发用户，大流量访问，淘宝2012双十一活动开始一分钟独立访问用户达到1000万。高可用：7*24小时不断间的服务。海量数据：需要存储管理海量的数据需要使用大量的服务器 facebook每周上传的照片接近10亿。安全环境恶劣：由于互联网的开放性使得互联网网站更容易受到攻击大型的网站几乎每天都会被黑。需求快速变更发布频繁：office产品以年

2017-08-21 13:33:15 179

原创 jQuery节点创建与属性的处理

创建元素节点：可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")$("")创建为本节点：与创建元素节点类似，可以直接把文本内容一并描述$("我是文本节点")创建为属性节点：与创建元素节点同样的方式$("我是文本节点")我们通过j

2017-08-04 22:49:46 179

原创 DOM创建节点及节点属性

介绍一下如何使用JavaScript创建div节点元素，主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容，相信本文介绍一定会让你有所收获。先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的IE兼容问题）创建流程比较简单，大体如下：创建节点(常见的：元素、属性和文本)添加节点的一些属性加入到文档中流程中涉及的一点方法：创建元

2017-08-04 22:47:40 669

原创 jQuery遍历之each()

jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作$("li").css('') 给所有的li设置style值，因为jQuery是一个合集对象，所以css方法内部就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是each.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中

2017-08-04 22:45:19 261

原创 jQuery遍历之add()方法

jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象，元素添加到匹配的元素集合中.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。

2017-08-04 22:35:54 612

原创 jQuery遍历之siblings()

jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法理解节点查找关系：如下蓝色的class="item-2"的li元素，红色的节点就是它的siblings兄弟节点 1 2 3siblings()无参数取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合注意

2017-08-04 22:33:21 244

原创 jQuery遍历之prev()方法

jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法理解节点查找关系：如下蓝色的class="item-2"的li元素，红色的节点就是它的prev兄弟节点 1 2 3prev()无参数取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

2017-08-04 22:30:35 1033

原创 jQuery遍历之next()方法

jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法理解节点查找关系：如下class="item-1"元素就是红色部分，那蓝色的class="item-2"就是它的兄弟元素 1 2 3next()无参数允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据

2017-08-04 22:26:57 524

原创 jQuery遍历之closest()方法

以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法closest()方法接受一个匹配元素的选择器字符串从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素例如：在div元素中

2017-08-04 22:24:55 842

原创 jQuery自定义事件之triggerHandler事件

trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题：事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完

2017-08-04 15:14:40 470

原创 jQuery自定义事件之trigger事件

有时，需要通过模拟用户操作，来达到单击效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。1.常用模拟在jQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn按钮的click事件。$(“#btn”).trigger(“click”);这样，当页面加载完毕后，就会立刻输出想要的效果。也可以直接用简化写

2017-08-04 11:34:42 705

原创 jQuery遍历之parents()方法

jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点理解节点查找关系： 1 在li节点上找到祖辈元素div，这里可以用$("li").pare

2017-08-03 23:36:23 397

原创 jQuery遍历之parent()方法

jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法因为是父元素，这个方法只会向上查找一级理解节点查找关系： 1 查找ul的父元素div, $(ul).parent()，就是这样简单的表达parent()无参数parent

2017-08-03 23:35:11 423

原创 jQuery遍历之find()方法

jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）理解节点查找关系： 1 代码如果是$("div").find("li")，此时，li与

2017-08-03 23:34:03 3253

原创 jQuery遍历之children()方法

jQuery遍历之children()方法jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）理解节点查找关系： 1 代码

2017-08-03 23:32:53 3488

原创 DOM包裹wrapInner()方法

如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，JQuery提供了一个wrapInner方法.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构听起来有点绕，可以用个简单的例子描述下，简单的看一段代码：p元素p元素给所有元素增加一个p包裹$('div

2017-08-03 23:30:49 256

原创 DOM包裹wrapAll()方法

wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构简单的看一段代码：p元素p元素给所有p元素增加一个div包裹$('p').wrapAll(''

2017-08-03 23:29:32 245

原创 DOM包裹unwrap()方法

DOM包裹unwrap()方法我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反，如果删除选中元素的父元素要如何处理 ?jQuery提供了一个unwrap()方法，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。看一段简单案例： p元素我要删除这段代码中的div，一般常

2017-08-03 23:28:27 514

原创 DOM包裹wrap()方法

如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个wrap方法.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构简单的看一段代码：p元素给p元素增加一个div包裹$('p').wrap('')最后的结构，p元素增加了一个父div的结构

2017-08-03 23:26:14 268

原创 DOM替换replaceWith()和replaceAll()

DOM替换replaceWith()和replaceAll().replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合简单来说：用$()选择节点A，调用replaceWith方法，传入一个新的内容B（HTML字符串，DOM元素，或者jQuery对象）用来替换选中的节点A看个简单的例子：一段HTML代码

2017-08-03 23:21:58 206

原创 DOM拷贝clone()

克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把

2017-08-03 23:16:40 409

原创 DOM节点删除之detach()和remove()区别

remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了通过一张对比表来解释2个方法之间的不同方法名参数事件及数据是否也被移除元素自身是否被移除remove支持选择器表达是是（无参

2017-08-02 20:23:07 2443

原创 DOM节点删除之保留数据的删除操作detach()

如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。来看看jquery官方文档的解释：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配

2017-08-02 20:15:05 372

原创 DOM节点删除之empty和remove区别

要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])二个方法，两个都是删除元素，但是两者还是有区别empty方法严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点empty不能删除自己本身这个节点remove方法该节点与该节点所包含的所有后代节点将同时被删除提供传递一个筛选的表达式，删除指定合集

2017-08-02 20:08:54 266

原创 DOM节点删除之remove()的有参用法和无参用法

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。例如一段节点，绑定点击事件慕课网$('.hello').on("click",fn)如果不通过remove方法删除这个节点其实也很简单，但是同时需要把事件给销毁掉，这里是为了防止"内存泄漏"，所以前端开发者一定要注意，

2017-08-02 20:03:43 770

原创 DOM节点删除之empty()的基本用法

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML：慕课网如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中//通过e

2017-08-02 18:22:46 691

原创 DOM外部插入insertAfter()与insertBefore()

DOM外部插入insertAfter()与insertBefore().before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面.after()和.insertAfter() 实现同样的功

2017-08-02 18:18:08 753

原创 jQuery节点创建与属性的处理

jQuery节点创建与属性的处理创建元素节点：可以有几种方式，常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")$("")创建为本节点：与创建元素节点类似，可以直接把文本内容一并描述$("我是文本节点")创建为属性节点：与创建元素节点同样的方式$("我是文

2017-08-02 18:12:02 224

原创 DOM创建节点及节点属性

DOM创建节点及节点属性通过JavaScript可以很方便的获取DOM节点，从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构，但这样就非常不灵活了。试想下这样的情况：如果我们通过AJAX获取到数据之后然后才能确定结构的话，这种情况就需要动态的处理节点了本文向大家介绍一下如何使用JavaScript创建div节点元素，主要包括创建div节点

2017-08-02 17:25:56 275

原创 DOM内部插入prepend()与prependTo()

在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo选择器的描述：通过右边代码可以看到prepend与prependTo的使用及区别：.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作

2017-08-02 15:52:13 791

原创 DOM外部插入after()与before()

DOM外部插入after()与before()节点与节点之前有各种关系，除了父子，祖辈关系，还可以是兄弟关系。之前我们在处理节点插入的时候，接触到了内部插入的几个方法，这节我们开始讲外部插入的处理，也就是兄弟之间的关系处理，这里jQuery引入了2个方法，可以用来在匹配I的元素前后插入内容选择器的描述：before与after都是用来对相对选中元素外部增加相

2017-08-01 17:28:36 446

原创 DOM内部插入append()与appendTo()

DOM内部插入append()与appendTo()动态创建的元素是不够的，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。那么问题来了，怎么放到文档上？这里就涉及到一个位置关系，常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部。针对这样的处理，jQuery就定义2个操作的方法append：这个操作与对指定的元素执行原生的app

2017-08-01 17:05:13 4485

原创 jQuery和js节点创建与属性的处理的区别

在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程创建元素节点：可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")$("")创建为本节点：与创建元素节点类似，可以直接把文本内容一并描述$("我是文本节点")创建为属性节点：

2017-08-01 15:59:12 318 1

转载 .html()方法 .text()方法

读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text().html()方法获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容，具体有3种用法：.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容.html( htmlString ) 设置每一个

2017-07-28 15:39:58 1249

空空如也

空空如也