code_ja-CSDN博客

转载 CSS float浮动的深入研究、详解及拓展(二)

转载来自张鑫旭-鑫空间-鑫生活http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=594**接上回… 五、浮动的非本职工作**浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示，而其他所有用浮动实现的效果都不是浮动应该做的事情，我称之为“非本职工作”。或许我们并没有过多的深思，把一些实际上不

2016-09-02 18:10:56 406

转载 CSS float浮动的深入研究、详解及拓展(一)

转载来自张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=583概念目录个人感悟之CSS代码的情感化思维个人观点之浮动的意义仅仅是文字环绕显示而已个人观点之浮动的本质是“包裹及破坏”个人观点之目前大多数浮动应用都不是浮动应该做的个人观点之浮动其实是个魔鬼、混球一、引言你我看待事物

2016-09-02 17:56:25 373

z-index设置元素的堆叠顺序。堆叠设置高的元素在堆叠设置低的元素的前面显示。1.只有在定位元素（position:relative/absolute/fixed）下的z-index才有作用。2.如果定位元素的z-index没有发生嵌套（意思就是子元素没有设置z-index）下应该遵循：a.后来居上准则（在z-index设置的数值一样的情况下，后面的元素会覆盖前面的元素）b.哪个大，哪个上（就是那

2016-09-02 10:52:47 484

原创 JavaScript改善代码性能的一些方法

注意作用域。访问全局变量总是要比访问局部变量慢，因为需要遍历更长的作用域链。只要减少在作用域链的搜索时间，就可以增加性能。我们应该尽量避免全局查找，请看以下函数：function updateUI() { var imgs = document.getElementByIdTagName("img"); for(var i = 0, len = imgs.length; i <

2016-08-09 16:38:50 299

原创 JavaScript的可维护性

可维护性有几点： 1.可理解性—其他人可以接手代码并能够理解他的意图和干什么用的，不需要原开发人员完整解释。 2.直观性—一看代码就能明白。 3.可适应性—当数据变化的时候不要求完全重写方法。 4.可扩展性—在代码架构上已考虑到未来允许对核心功能的扩展。 5.可调试性—当有地方出错时，代码能够给以你足够的信息来尽可能的确定问题所在。以下有几个方面描述

2016-08-07 12:20:03 427

原创深入理解DOM中的事件对象

在触发DOM上的某个事件时，会在事件处理程序函数中会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。先看个例子：var btn = document.getElementById("myBtn");btn.onclick = function(event) { alert(event.type); //"clic

2016-07-15 21:23:35 2257 2

原创 DOM中为事件添加事件处理程序的几种方式以及跨浏览器方式

1.传统的方式是将一个函数赋值给一个事件处理程序属性。看看DOM0级方式例如：var btn = document.getElementById("myBtn");btn.onclick = function() { alert(this.id); //"myBtn"}使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此程序中的this引用的是当前的元素btn，可以通过this访

2016-07-15 12:52:33 1922

原创 JavaScript事件背后的原理

JavaScript与HTML之间的交互是通过事件实现的。事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间，使用监听器来监听事件，以便在事件发生时执行相应的代码。当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在

2016-07-14 21:31:38 446

原创 DOM操作技术之动态添加script和样式

向页面中添加JavaScript代码，一种方式是引用外在文件，另一种是使用script标签嵌入JavaScript代码，我们一般使用的是引用外在文件，但是只有当页面中的所有外在文件都加载和解析完毕后，页面才算完全加载完毕并且显示，页面显示会产生延时。我们想能不能页面加载时不去加载和解析外在文件，当要引用外在文件的时候再加载和解析，这里就用到了动态添加脚本：//直接引用外部js文件<script t

2016-07-12 19:27:46 1669

原创 javascript之navigator对象

navigator对象是识别客户端浏览器的事实标准。来看看最常见的检测例子，检测插件：//检测插件（在IE中无效）function hasPlugin(name) { //传入的参数变成小写，便于比较 name = name.toLowerCase(); for(var i = 0; i < navigator.plugins.length; i++) {

2016-07-09 16:09:29 471

原创 javascript之location对象

location是常用的一个对象，提供了与当前窗口中加载的文档有关的信息，包含了完整了URL。接下来我们看看如何查询URL中的字符串参数：function getQueryStringArgs() { //取得查询字符串去掉开头？的信息 var qs = (location.length > 0 ? location.search.substring(1) : ''），

2016-07-09 15:48:55 349

原创 javascript之window对象

全局变量不能通过delete操作符删除，而直接在window对象上定义的变量可以通过delete删除。var age = 20;window.name = 'Jack';//IE<9时抛出错误，在其他浏览器中都返回falsedelete window.age;//IE<9时抛出错误，在其他浏览器中都返回truedelete window.name; //return truealert

2016-07-09 11:34:20 346

翻译编写具有可维护性的JavaScript代码

首先可定是缩进的问题了，有的人喜欢使用空格键，有的人喜欢使用tab键，不管是使用空格键还是使用tab键，在项目开始前，只要统一规范就可以了。其次，确保只要通过变量或者函数的名字就能知道这段代码是干什么用的，而不是要读整段代码才知道它是干什么的。例如：//命名不一致，很难能够理解代码在做什么const $element = $('.element');function _privateMetho

2016-07-08 15:43:57 527

原创由浅入深理解闭包的运行机制

先来看看闭包的定义：指有权访问另一个函数作用域中的变量的函数。创建闭包的常用方式就是在一个函数内部创建另一个函数，先来看一个例子：function createComparsionFunction(propertyName) { return function(object1, object2) { var value1 = object1[propertyName];

2016-07-04 23:09:44 1525

原创原型链实现继承的几种模式

原型链很强大，可以用来实现继承，但也存在一些问题。其中最主要的问题是来自包含引用类型值的原型。看如下例子：function Super() { this.colors = ['red', 'blue', 'green'];}function Sub() {}Sub.prototype = new Super();var instance1 = new Sub();instance

2016-07-02 13:31:29 1728

原创深入理解原型链的本质

原型链是作为实现继承的主要方法，基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。实现原型链的代码如下：function Super() { this.property = true;}Super.prototype.getSuperValue = function() { return this.property;};function Sub() {

2016-06-29 15:55:28 1355

原创深入理解JavaScript的创建对象（构造函数、原型对象、实例）

1.由于JavaScript无法创建类，所以采用函数来封装以特定接口创建对象，采用工厂模式：function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function() {

2016-06-28 17:32:12 945

翻译不需要注解就能看出代码含义的一些方法

在函数内部，有两个特殊的对象：arguments和this。arguments是一个类似数组的对象，包含着传入函数中的所有参数。该对象有一个callee属相，该属性是一个指针，指向拥有这个arguments对象的函数。

2016-06-28 11:08:04 1016

原创函数内部属性arguments和this讲解

内容在图片里：

2016-06-28 09:47:57 279

原创浮动元素float的详细内幕

一些规则控制着浮动元素的摆放，规则如下： 1.浮动元素的左右外边界不能超过其包含块内容区的左右内边界（包含块就是其最近的块级祖先元素） 2.为防止浮动元素彼此覆盖，如果一个元素向左浮动，而另一个元素已经在那个位置，后放置的元素将挨着前一个浮动元素的右外边界放置。但是如果一个浮动元素的顶端在之前所有浮动元素的底端下面，它就可以一直浮动到父元素的内左边界。如下图： 3.假设父元素的宽度为500

2016-06-26 16:59:35 1302

翻译不用jQuery做一个简单手动暂停的JavaScript幻灯片2

在你的页面上使用幻灯片之前应该仔细想清楚是否该使用它，使用不当的话会破坏你的网站的用户体验。幻灯片会隐藏重要的内容如果你的网站里有些内容是非常重要的，它就不应该隐藏在幻灯片中，你不能指望在理想环境下用户能够通过自动幻灯片看到他们想要的内容。用户可能会弄不清楚该网站的主要意图是什么特别是在主页中使用幻灯片。如果你不能决定显示什么给用户，你怎么能指望用户决定做什么？你的网站有个清晰和显而易见

2016-06-24 15:58:18 683

翻译不用jQuery做一个简单无交互的JavaScript幻灯片1

利用JavaScript和HTML和css并且不用任何库做一个简单的幻灯片效果，这个幻灯片的好处是不引用任何外在的库，提高了性能，由于采用了较少的代码，这样可以放在页面的任何地方而不担心要加载多余的额外文件。 1.首先我们看看最简单的幻灯片 HTML代码如下：<ul id="slides"> <li class="slide showing">Slide 1</li> <li c

2016-06-24 11:48:04 402

原创 JavaScript中的垃圾收集机制

JavaScript具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存。标记清除 JavaScript中最常用的垃圾收集方式是标记清除。当变量进入环境（例如，在函数中声明一个变量）时，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。可以用任何方式

2016-06-22 17:52:45 374

原创 JavaScript中的基本类型和引用类型的赋值问题和传参问题

我们先来看一个基本类型的例子：var num1 = 5;var num2 = num1;上面的num1属于基本类型，把num1赋值给num2，相当于把num1的一个副本赋值给num2，num2中的5和num1中的5是完全独立的，此后这两个变量可以参与任何操作而不会相互影响。如下图所是：接着我们看看引用类型的例子：var obj1 = new Object();var obj2 = obj1;

2016-06-22 16:07:26 1176

原创 JavaScript的with语句

with语句的作用是将代码的作用域设置到一个特定的对象中。语法如下： with (表达式) 语句例如：var qs = location.search.substring(1);var hostName = location.hostname;var url = location.href;使用with语句可变成：with(location) { var qs = search.s

2016-06-22 15:04:44 305

原创 JavaScript中相等和全等操作符的差异

1.相等和不相等操作符 ==和！==会先转换操作数（即强制转型），然后再比较它们的相等性。如果有一个操作数是布尔值，则在比较相等性之前先转换为数值——false转化为0，true转化为1；如果有一个操作数是字符串，另一个是数值，则把字符串转换为数值再进行比较；如果有一个操作数是对象，另一个不是，则自动调用对象的valueOf()方法，用得到的基本数据类型按照前面的规则比较null和unde

2016-06-22 14:48:38 1167

原创 JavaScript基本数据类型注意点

1.在一个函数中定义一个变量我们通常是这样定义的 var message = ‘hi’,该变量使用var操作符定义会使得该变量的作用域属于局部变量，这个变量在函数退出后就会被销毁，例如：function test(){ var message = 'hi';}test();alert(message); //error!这里的变量使用var定义，当离开函数后，该变量会被销毁，要想不被销

2016-06-20 23:19:39 593

原创引用外部script文件是存放的位置

在编写代码的时候，我们都习惯把引用的外部JavaScript文件放在head标签中，这种做法的目的是把所有的外部文件放在同一个地方，便于管理，但是在文档的<head>元素中包含所有的JavaScript文件，就必须浏览器把所有的JavaScript代码都下载、解析和执行以后，才能开始呈现页面的内容，在这一期间，网页会是一片空白，这样用户体验是非常差的，为了避免这个问题，可以把文件放在<body>元素

2016-06-17 21:51:16 4532

原创浏览器解析script标签遇到的问题

欢迎使用Markd本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦：- **Markdown和扩展Markdown简洁的语法**- **代码块高亮**- **图片链接和图片上传**- ***LaTex*数学公式**- **UML序列图和流程图**- **离线写博客**- **导入导出Markdown文件**- **丰富的快捷键**--

2016-06-17 21:33:17 2217

原创分支算法——归并排序

分治法主要分为三个步骤：1.分解原问题为若干子问题，这些子问题是原问题规模较小的实例，是原问题的一个缩影2.解决这些子问题，递归的求解各个子问题。限制条件为规模n足够小时，求解子问题。从而进行递归3.合并这些子问题，合并后的解就是原问题的解。动态规划主要用的是这个方法。把插入排序运用分治法求解：伪代码：ifRECURSION-INSERTION-SORT(A,p,r)1

2015-10-25 20:59:18 355

code_ja的博客