lulalahappy123的专栏

原创 层模型：CSS定位

层模型--绝对定位如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，原文档流中的元素会填补它在文档流中空出来的位置。然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

转载 CSS盒模型宽度

盒模型--宽度和高度盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。元素的高度也是同理。比如：css代码：div{ width:200px;

转载 HTML元素

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：、、...、、、、、、 、常用的内联元素有：、、、、、、、、、、常用的内联块状元素有：、

转载 js数组的操作

js数组的操作用 js有很久了，但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。这段时间做的一个项目，用到数组的地方很多，自以为js高手的自己居然无从下手，一下狠心，我学！呵呵。学了之后才知道，js数组的功能强大很，远比VB,C#强多了,大家慢慢看吧1、数组的创建 var arrayObj = new Array();　/

转载 JS---创建自己的“JavaScript库”，原来如此简单

博主在上一篇文章中提到了JavaScript库实际上就是一堆函数的集合，就是方便给你调用的不用自己写那些功能强大的函数……这篇文章说一说如何创建JavaScript库及需要注意的问题！期待您光临斧正！行文目录：点击对应目录进行跳转编写JavaScript库要注意的问题编写JavaScript库的模板代码编写JavaScript库(实例

转载 jquery $("#id").click()

菜鸟在编写jquery发现了一个问题在编写jquery的时候我直接写$("#one").click(function(){alert("..........")}); 为什么不可以呢？ 必须:$(document).ready(function(){$("#one").click(function() {alert("Hello world!");});}); 这样写呢? 可以不添加$

转载 JS选取DOM元素的方法

摘自JavaScript权威指南（jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素，然后根据样式选择器对所有DOM元素进行筛选）今天试了下各种选取元素的方法的速度，用原生的方法比jQuery要快差不多8倍，IE8是最慢的，IE9的速度差不多是IE8的3倍，Chrome的表现最好，其次是Firefox）选取文档元

转载 js substr 与substring

substring 方法用于提取字符串中介于两个指定下标之间的字符substring(start,end)开始和结束的位置，从零开始的索引参数     描述start     必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。stop     可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的

转载 画线

我有两个图 我点击a图 再点击b图 ab之间就会出现一条连线 而且我拖动a或b连线会跟随变化只需要监听并且计算两个点的运动轨迹就可以了吧function createLine(x1,y1, x2,y2){ var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)); var angle = Math.atan2(y2

转载 JS引用

原创 js闭包

javascript的闭包群里有人问这个问题，我整理了一下，参见司徒正美老师博客有讲window.onload = function () {var attr = ["width", "height", "background-color", "display", ""];var value = ["200px", "200px", "red", "none", ""];var squar

原创 原生js学习网址

抛弃jQuery，深入原生的JavaScript

转载 正则表达式

点击打开链接正则表达式 - 语法正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。列目录时，　dir *.txt或ls *.txt中的*.txt就不是一个正则表达式,因为这里*与正则式的*的含义是不同的。构造正则表达式的方法和创建数学表达式的方法一样

转载 正则表达式 \b

\b代表字与字中间那个看不见的东西，如here is a word那么，这句中有好几个\b, 每个单词的前后都有一个\b.所以你用 \bhere\b 可以匹配上面这个here,但如果here 不是一个单词，而是一个单词的一部分，如 adheread, 这样的话，用here 可以匹配，用\bhere\b就不能区配了，因为ad后面没有\b. 所以 adhere 中的here

转载 正则基础之 ？：

?: 是 不想被捕获的时候使用 可以提高程序执行速度正则基础之——反向引用 正则基础之——捕获组（capture group）比如 ([a-z][0-9])+ 这个正则表达式里 ( ) 里面的内容被捕获了， 反向引用的时候可以用上 。一般正则替换的时候用的多 像UBB代码 但是 如果写成 (?:[a-z][0-9])+ 跟上面 正则表达式 整体匹配是一样的 就

转载 正则表达式

^符号表示开头^once表示该模式只匹配那些以once开头的字符串。例如该模式与字符串"once upon a time"匹配，与"There once was a man from NewYork"不匹配$符号用来匹配那些以给定模式结尾的字符串。bucket$这个模式与"Who kept all of this cash in a bucket"匹配，

转载 九宫格基本布局

基本的九宫格(http://www.cnblogs.com/binyong) *{margin:0;padding:0;} .box{overflow:hidden;position:relative;width:50%;margin:20px auto;padding:10px;background:#F34703;} .t_l,.t_m

原创 九宫格布局

实现九宫格，且无外边框；我认为这样做最好 * { padding:0; margin:0;} ul{ width: 153px;height: 153px; background: #99FF99;margin: 10px 20px; } ul li{ list

转载 window.location.hash属性介绍

location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。很多人都喜欢收藏

原创 实现一个简单的DOM选择器

实现一个简单的DOM选择器 预备知识DOM相关知识http://www.w3school.com.cn/htmldom/index.asp 具体描述实现一个方法$，可以完成以下功能 1.可以通过id获取一个DOM例如：......$("#dom1") // 返回一个数组，数组中唯一的元素为id为dom1的div 2.可以通过css的cla

转载 javascript 中的call函数的理解问题；apply

function myFun(){ document.write(arguments + " ");} var myObject = new Object(); myFun.call(myObject，13,3,95); 输出结果是[object Object] 解释：call([thisObj[,arg1[, arg2[,   [,.argN]]]]

转载 DOCTYPE

DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。 其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。 要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYP

原创 锚点

锚点锚点就是点击链接，到页面特定位置，可以用的name属性；也可以根据任意标签的id值；但是有一点需要注意，只使用id属性当作锚点时,有个重要的缺点值得一提,那就是某些古老的浏览器并不支持这个方法.哦喔,在标识你自己的锚点时这的确是个必须考虑的问题所以可以将name和id结合起来，XHTML1.0不推荐使用name属性,因此必须考虑向后兼容.向前兼容用name 向后兼容

原创 HTML表单

总结一下表单，讲讲的用法表示建立一个表单，一般表单有许多输入、选择项，有一些按钮，其中有按钮按了能提交表单到服务器。里面一般有下面这些子句可供需要时使用： action=服务器文件名，可能是CGI程序，也可能是ASP、PHP等服务器端脚本，如果省略，表示提交给当前的文件。action 动作(提交后执行的操作) method=post|get，选择方法为POST或者GET，他们的

原创 CSS实现左中右三栏布局

左右定宽，中间自适应

转载 负margin实现左右布局

CSS网页制作教程:负margin制作自适应左右布局刚刚开始学习css的时候，我采用了float为主来实现布局的方式，但是运用浮动很长一段时间之后，我发现这是一种被人牵着鼻子走的做法。至少，页面上不应过多的运用浮动，尤其是不要拿来确定整个布局。很简单的道理，当你用了float:left,后面的div很可能需要跟着用float:left，而且当宽度不够的时候，本来该和上一个div

原创 js的slice函数

经常看到slice函数处理数组，如克隆，时候用slice(0)今天探讨一下slice功能点击打开链接1 var aArr = [0,1,2,3];2 var m = aArr.slice(0);3 aArr = [3,2,1,0];4 alert(m);//输出0,1,2,3，这时虽然aArr中的值已经改变，但是因为使用slice方法已经创建一个新的数组。

原创 深度克隆与浅度克隆

javascript中对象的深度克隆深度克隆：原不变浅克隆：通过“=”赋值操作；基础类型：值传递；对象：引用。以下number function string 执行的浅克隆（赋值操作），但是结果表现形式与深度克隆一致，都是原不变，相当于深克隆。 浅==深对于基础类型可以理解赋值操作原来的不变，但是function作为引用，原也不变，是因为，函数的克隆会在内存单独开辟空间，互不影

原创 javascript事件监听

大家可以参考一下两个博文，深入学习。JS实现监听者模式或观察者模式设计模式学习----观察者模式（事件监听实现）javascript事件监听模式我在这里做些基础性的总结。首先，什么是事件监听？一个元素有一个事件 触发的时候 浏览器直接解释执行就完了呗 为什么还要监听？？意义 何在？ 监听到底是干什么的？跟后台有关系？比如说一个页面上有什么东西,其中有一个按钮

转载 观察者模式（监听器模式）

观察者模式的实现        观察者模式有很多实现方式，从根本上说，该模式必须包含两个角色：观察者和被观察对象。观察者和被观察者之间存在“观察”的逻辑关联，当被观察者发生改变的时候，观察者就会观察到这样的变化，并且做出相应的响应。       实现观察者模式的时候要注意，观察者和被观察对象之间的互动关系不能体现成类之间的直接调用，否则就将使观察者和被观察对象之间紧密的耦合起来，从根本

转载 小tip: margin:auto实现绝对定位元素的水平垂直居中

« 小卖弄：纯CSS实现的outline切换transition动画效果小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 »小tip: margin:auto实现绝对定位元素的水平垂直居中by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?

原创 左右布局

1、右定宽，左自适应右边定width,float:righthtml中rightside放在前面 *{margin:0 auto; padding:0; font-size:9pt;} .contact{width:100%; border:solid 1px red;} .leftside{ background:bisque; height:100

原创 js对象属性值访问

var obj = { name:'lily', year:'20'}alert(obj.year);alert(obj['year']);这两种都能访问到year的值可以用点，也可以用下标两个都是获取对象值的方式。第二个用变量名获取对象值的时候很有用。123456789var obj = { name:'lily', year:'20' }alert(obj.year

转载 js入门·对象属性方法大总结

今天是我们js入门系列演示的最后一节了（暂时我是这样计划的），但是请朋友们记住，前面的实例你都很熟悉了的话也不代表我们就懂了JS，甚至连入门我们都不得不承认我们只是站在门槛上，还没有进去呢，那你可能要问，为什么要匆匆结束呢？答案很简单，我们的最终目标是AJAX/Atlas,在以后的入门教程中我们还会接触大量的JS的东西，而我这个懒人繁冗的注释一定不会让你失望的，所以更多JS我们以后继续学习，下面我

转载 javascript中的冒号

对冒号(：)有了更进一步的了解,希望对想了解冒号用法的人有所帮助。 1、switch语句分支 2、?:三元表达式的false 3、声明对象直接量的成员 4、声明标签 1和2相信地球人都知道吧？如果有人不知道,那我改成地球上的程序员都知道,哈哈 3、对象直接量我们也经常用，什么是对象直接量呢？ 对象直接量（也称为对象初始化程序）是由一个列表构成的，这个列表的元素是用冒

转载 JavaScript的5种调用函数的方法

一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 　　作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的作用非常相似,但是我们一会儿可以看到还是有非常重要的不

转载 Javascript中valueOf与toString区别

前言基本上，所有JS数据类型都拥有这两个方法，null除外。它们俩解决javascript值运算与显示的问题，重写会加大它们调用的优化。测试分析先看一例：var aaa = {  i: 10,  valueOf: function() { return this.i+30; },  toString: function() { return this.val

转载 浅谈javascript六种数据类型以及特殊注意点

在js中常见的六种数据类型：String类型、Null类型、Number类型、Boolean类型、Object类型。1、typeof的注意点涉及到数据类型，不免会提到，操作符 typeof。要注意：1、typeof是操作符，不是方法。虽然我们经常使用typeof()的方式获取对象的数据类型。2、对 null 取typeof 是 object（这是因为null是 空的对象引用），对函

原创 通过递归的方式实现深度clone

预备知识：各种数据类型的赋值方法及类型判断方法值类型和引用类型的区别数组和对象的遍历方法递归算法 预计工作量半小时 具体描述实现方法clone，可以用其针对可能是任何类型的对象，进行值拷贝例如var a = 1;var b = clone(a);b = 2;console.log(a, b); // 1, 2--------var

转载 window对象的alert() confirm() prompt()方法

alert() 弹出个提示框 （确定） confirm() 弹出个确认框 （确定，取消） prompt() 弹出个输入框 让你输入东西 使用消息框 使用警告、提示和确认 可以使用警告、确认和提示消息框来获得用户的输入。这些消息框是 window 对象的接口方法。由于 window 对象位于对象层次的顶层，因此实际应用中不必使用这些消息框的全名（例如 “window.alert()”