03 2014 档案
摘要：选在符的API的核心有两个方法:querySelector()和querySelectorAll() querySelector(a):a是一个css选择符,返回与该模式匹配的第一个元素,如果没有匹配的元素,返回null. 1 var result = {};2 result = document.querySelector("body"); //[object HTMLBodyElement]3 result = document.querySelector("#guoDiv").innerHTML; //div里面的内...
阅读全文
摘要：废话不多说,先看效果图,和上一章节用的是同一个小图片:这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊.但是图片加载的话要比使用2张图片加载的快很多插件代码: 1 ; (function ($) { 2 $.fn.gysFdj = function (options) { 3 var defaluts = { 4 cameraW: 100, //镜头宽度 5 cameraH: 100, //镜头高度 6 ...
阅读全文
摘要：这个思路的方法会带来一个小问题,就是当鼠标放到小图上去时,会开始加载大图片,网速不佳的时候,会出现加载慢的情况.但是放大的效果和你所给出的大图片的清晰度是一样的.先看效果图:html代码:1 2 3 4 js插件代码: 1 ; (function ($) { 2 $.fn.gysFdj = function (options) { 3 var defaults = { 4 cameraW: 100, //镜头宽度 5 cameraH: 100...
阅读全文
摘要：cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,insertChild(),replaceChild()将它添加到文档1 2 13 24 35 1 var oDiv = document.getElementById("guoDiv");2 var deepList = oDiv.clone...
阅读全文
摘要：removeChild(a)是用来删除文档中的已有元素 参数a:要移出的节点 1 2 13 24 35 1 var oDiv = document.getElementById("guoDiv");2 var firsChild = oDiv.firstElementChild ? oDiv.firstElementChild : oDiv.firstChild3 var returnNode = oDiv.removeChild(firsChild); //移出第一个元素,返回被移出元...
阅读全文
摘要：replaceChild(a,b)是用来替换文档中的已有元素的 参数a:要插入的节点, 参数b:要替换的节点var oDiv = document.getElementById("guoDiv"); var oSpan = document.createElement("span"); oSpan.innerHTML = "4"; var firsChild = oDiv.firstElementChild ? oDiv.firstElementChild : oDiv.firstCh...
阅读全文
摘要：如果想要把节点放在某个特定的位置,而不是放在末尾,就可以使用insertBefore(a,b) 参数a:要插入的节点 参数b:作为参照的节点. 1 var oDiv = document.getElementById("guoDiv"); 2 var oSpan = document.createElement("span"); 3 oSpan.innerHTML = "4"; 4 var returnNode = oDiv.insertBefore(oSpan, null); ...
阅读全文
摘要：cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,insertChild(),replaceChild()将它添加到文档1 var oDiv = document.getElementById("guoDiv");2 var deepList = oDiv.cloneNode(true); //拷贝子节点3 ...
阅读全文
摘要：1 2 3 4 5 6 7 8 文档节点是每个文档的根节点.在我们的页面中,文档节点只有一个子节点即.我们称之为文档元素.在XML中,没有预定义的元素,因此任何元素都有可能成为文档元素javsccript中的所有节点类型都继承自Node类型.所以所有的节点都有着相同的基本属性和方法. 没个节点都有一个nodeType属性.用于表明节点的类型. NODE.ELEMENT_NODE 1 NODE.ATTRIBUTE_NODE ...
阅读全文
摘要：1 function Human(name, sex) { 2 this.name = name; 3 this.sex = sex; 4 if (typeof this.say != "function") { 5 Human.prototype.say = function () { 6 alert(this.name); 7 } 8 } 9 }10 var ...
阅读全文
摘要：javascript之父道格拉斯在2006年给出了这样一串代码,来实现继承.1 function object(o) {2 function F() { }3 F.prototype = o;4 return new F();5 }下面来看看这个函数是如何实现继承的. 1 var Human = { 2 name: "guo", 3 colors: ["red","black"] 4 } 5 var one = object(H...
阅读全文
摘要：1 function Father(name) { 2 this.name = name; 3 } 4 Father.prototype.say = function () { 5 return this.name; 6 } 7 function Son(name, age) { 8 Father.call(this, name); 9 this.age = age;10 }11 ...
阅读全文
摘要：1 //简单的函数调用 2 function Father() { 3 this.nums= [1,2]; 4 } 5 function Son() { 6 Father.call(this);//调用超类型,完成son继承father 7 } 8 var s1 = new Son(); 9 s1.nums.push("yellow");10 alert(s1.nums);//red,black,yellow11 va...
阅读全文
摘要：1 function Father() { 2 this.fatherValue = "爸爸"; 3 } 4 Father.prototype.getFatherValue = function () { 5 return this.fatherValue 6 } 7 function Son() { 8 this.sonValue = "儿子"; 9 }10 Son.prototype = new Father();11...
阅读全文
摘要：所谓稳妥对象,指的是没有公共属性,而且其方法也不引用this的对象.稳妥对象最适合在一些安全的环境中(禁止使用this和new)或者在防止数据被其他应用程序改动时.稳妥构造函数模式有2个特点:1.新创建对象的实例方法不引用this;2.不使用new操作符调用构造函数.1 function createHuman(name, sex) {2 var obj = new Object();3 obj.say = function () {4 alert(name);5 }6 }7...
阅读全文
摘要：这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;但是从表面上看,这个函数有很像典型的构造函数. 1 function createHuman(name,sex) { 2 var obj = new Object(); 3 obj.name = name; 4 obj.sex = sex; 5 obj.say = function () { 6 alert(this.name); 7 } 8 ...
阅读全文
摘要：动态原型模式是将所有的信息都封装到工造函数中,而构造函数中初始化原型,有保持了同时在使用构造函数和原型的优点.1 function Human(name, sex) {2 this.name = name;3 this.sex = sex;4 if (typeof this.say != "function") {5 Human.prototype.say = function () {6 alert(this.name);7 ...
阅读全文
摘要：创建自定义类型的常见方式就是组合使用构造函数模式与原型模式一起使用.构造函数模式用于定义实例对象的特有的部分(属性和方法),原型模式用于定义共享的部分.这样最大限度的节省了内存的开销. 1 function Human(name, sex) { 2 this.name = name; 3 this.sex = sex; 4 this.getWife=function(){//娶老婆 5 if (this.sex == "男") { 6 return "...
阅读全文
摘要：少废话,先上代码:function Human() { } Human.prototype.name = "成吉思汗"; Human.prototype.sex = "男"; Human.prototype.say = function () { alert(this.name); } var man = new Human(); man.say(); //成吉思汗 var woman = new Human(); woman.say(); //成吉思汗 ...
阅读全文
摘要：对上一章节的工厂模式进行代码重写1 function Human(name, sex) {2 this.name = name;3 this.sex = sex;4 this.say = function () {5 alert(this.name);6 }7 }8 var man = new Human("汉武大帝", "男");9 var woman = new Human("王母娘娘","女");看到Human没...
阅读全文
摘要：工厂模式在软件工程里面是一种比较常见的设计模式了.这种模式抽象了创建具体对象的过程.上代码: 1 function createHuman(name,sex) { 2 var obj = new Object(); 3 obj.name = name; 4 obj.sex = sex; 5 obj.say = function () { 6 alert(this.name); 7 } return obj; 8 }...
阅读全文
摘要：Object.getOwnPropertyDescriptor()用于获取给定属性的描述信息,这个描述信息是一个对象.如果是访问器属性,则这个对象的属性有configurable,enumerable,get,set.如果是数据属性,则这个对象属性有,configurable,enumerable,writable,value. 1 var human = { 2 _age:18,//下划线是一种常用的记号.用于只能通过对象方法访问的属性 3 role:"大人" 4 }; 5 Object.defineProperty(human, "age"...
阅读全文
摘要：/* Object.defineProperty(a,b,c);介绍 a:需要属性设置的对象 b:需要设置的属性名,(键值) c:是一个用于描述属性值得json数据.这个json数据有configurable,eumerable,writable,value组成 configurable:1.能否被delete删除,2.他的属性值能否被修改.3.能否把属性设置成访问器属性,默认是true,可以删除,,修改,设置 eumerable:能否被for-in循环到 writable:表示属性值能否被修改 value:属性值. */1 var hu...
阅读全文
摘要：效果图:文件位置摆放:插件的js代码: 1 $.extend({ 2 pfAdv:function(options){ 3 var defaults={ 4 count:1, 5 startTop:200, 6 startLeft:200, 7 width:140,//ͼƬС 8 height:180, 9 ...
阅读全文
摘要：效果图:文件的位置摆放:插件的代码: 1 ;(function($){ 2 $.extend({ 3 dLAdv:function(options){ 4 var defaults={ 5 leftType:0,//左边广告图片效果0稳固不动,1缓慢复位 6 rightType:0,//右边广告图片的效果0稳固不动,1缓慢复位 7 leftTime:300,//左边复位时间 8 rightTime...
阅读全文
摘要：界面效果:插件js代码: 1 ;(function ($) { 2 //122种颜色 3 var aColors = [ 4 "ff0000", "ffff00", "00ff00", "00ffff", "0000ff", "ff00ff", "ffffff", "eeeeee", "e5e5e5", "dcdcdc", "d2d2d2", "c9c9c9"
阅读全文
摘要：1 (function ($) { 2 $.fn.bnSlide = function (options) { 3 var defaults = { 4 colorData: 0, //原始滑道的有效值 5 maxWidth: 10, //整个滑道有效值 6 // Width: 500, //整个容器的宽度 7 //height: 20//整个容器的高度 8 ...
阅读全文
摘要：1 ;(function($){ 2 $.fn.extend({ 3 pageList: function (json) { 4 function PageList() { 5 this.initHtml = ""; //初次加载后的Html 6 this.num = 0; //页码个数 7 this.totalPageCount = 0;//总页数 8 this.size = 0;//每页数据条数 9 th...
阅读全文
摘要：今天在睡觉醒时,突然感觉对call和apply有了点理解,但是又不好表达出来.就随便写几个例子. 1 function say() { 2 return this.role; 3 } 4 function Father() { 5 this.role = "爸爸"; 6 } 7 function Mother() { 8 this.role = "妈妈"; 9 }10 function Brother() {11...
阅读全文
摘要：1 $(window).bind('beforeunload', function () {2 return '您确定退出该页面吗？';3 });支持以下浏览器(对号表示支持,叉号表示不支持.):
阅读全文
摘要：arguments的主要用途是保存参数,但是他还有callee属性.一:callee指向arguments对象的函数.示例一:1 function calture(num) {//阶乘计算2 if (num <= 1) return 1;3 else {4 return num * calture(num - 1);5 }6 }在代码内部出现了calture的调用.这在以后的代码维护中是很不利的,如果某天把外面函数名改了,里面没有改,后果大家知道了吧.对于这个问题可以这个样子...
阅读全文
摘要：函数声明格式:1 function add(a, b) {2 alert(a+b);3 }函数表达式格式:1 var add = function (a, b) {2 alert(a+b);3 }解析器在向环境中加载数据时,对函数表达式和函数声明就像一个男人对原配和对小三.当然是先满足原配,在去照顾小三.解析器会通过"函数声明提升过程",读取并将函数声明添加到执行环境中.所以声明函数的代码在调用他的代码的后面,也能正常执行.但是函数表达式就没有这个待遇了.当一个男人先满足小三,再去满足自己的老婆,肯定是要出问题的啦...
阅读全文
摘要：1 /******************cookie*********************/ 2 /* 3 cookie的组成部分: 4 名称:唯一值,不区分大小写,必须经过URL编码 5 值:必须经过URL编码 6 域:只是改cookie在哪个域中是有效的. 7 路径:如果cookie的路径在www.guo.com中能访问,那么在www.yan.com页面就不会发送cookie.即使cookie来自同一个域中的 8 失效时间:在什么时间点被删除 9 安全标志:指定后,cookie只有在使用ssl链接的时候才发送到服务器.10 域,路径,失效时间和secure标志都是服务器给浏览器的指.
阅读全文
摘要：1 //事件的封装 2 var EventUtil = { 3 addHandler: function (element, type, handler) {//注册事件 4 if (element.addEventListener) {//非IE 5 element.addEventListener(type, handler, false); 6 } 7 else if (element.attachEvent) {//IE 8 element.attachEvent("on" + t...
阅读全文
摘要：1 var DragDrop = function () { 2 var dragging = null; 3 var diffX = 0; 4 var diffY = 0; 5 function handleEvent(event) { 6 event = EventUtil.getEvent(event); 7 var target = EventUt...
阅读全文
摘要：最严格的对象保护措施就是冻结对象了.冻结过后的对象,即不可以扩展,原有对象也不可以删除,因为[Writable]=false,所以对象的属性不可修改.示例一:1 var person={name:"guo"}; 2 Object.freeze(person);3 person.age=29;//添加成员4 alert(person.age);//undefined5 delete person.name;//删除已有成员6 alert(person.name);//guo7 ...
阅读全文
摘要：EcmaScrip5t中出现了密封对象概念.密封对象不可扩展,而已有的成员的[Configurable]特性被设置为false.也就是说属性和方法是不能删除的.但是是可以修改的.示例一:var person={name:"guo"}; Object.seal(person);//密封对象person.age=29;alert(person.age);//======>undefineddelete person.name;alert(person.name);//guoperson.name="yansi";alert(person.name);/
阅读全文
摘要：js在默认情况下,所有的对象都是可扩展的.这也是让很多开发人员头特疼的问题.因为在同一环境中,一不小心就会发生修改了不必要的对象,而自己却不知道.在ECMAScript5可以解决这种问题了.preventExtensions():经过这个方法处理过的对象,不影响原有对象的删除,修改.但是无法添加新的属性成员了.示例一:1 var person={name:"guo"};//申明一个对象2 person.age=23;//扩展对象3 alert(person.age);//======>23示例二:1 var person={name:"guo"};
阅读全文
摘要：1 var gys = function () { } 2 //oParent父节点 3 //获取所有的子元素 4 gys.prototype.getElementChildren = function (oParent) { 5 return oParent.children; 6 } 7 //arr获取的数组,jsonCss是修改属性css的json数据 8 // gys.setElementCss(aLi, {"color":"red","backgroundColor":"yellow","bac
阅读全文
摘要：这段代码是从javascript高级程序设计(第三版)上面事件部分抽取出来的,共享一下,级当时自己做个笔记.以后应该能够用得找. 1 var EventUtil = { 2 addHandler: function (element, type, handler) {//注册事件 3 if (element.addEventListener) {//非IE 4 element.addEventListener(type, handler, false); 5 } 6...
阅读全文
