默认情况下，标准的HTML元素是非常恼人的，它很丑陋。经常有人问我如何创建一个漂亮的表单，而不是浏览器默认的外观，网上充斥大量此类的教程和介绍，但很容易让人迷失其中。但如果我们使用一些 JavaScript 的功能，利用强大的 jQuery 库可以很方面实现这个要求。 jQuery 最强大的是它有一个非常庞大的插件库，非常多的人开发出大量的插件并不断的维护它们。本文与大家分享一些很新的，可以帮助你为你的下一个Web项目的15个独特和有用的jQuery插件列表。 01. QapTcha : jQuery captcha system with jQuery & jQuery UI 从上面的截图看你会不会觉得很库，类似 iPhone 手机的滑动解锁，不再需要输入非常难懂的被扭曲的各种验证码字符，该插件必须跟 jQuery UI 一起工作。 02. Accessible slider 这是用来增强进度条功能的 jQuery 插件，在滑动块的基础上同时增加了数字的显示。 03. Fancy Letter Plugin | Part 2 学习如何使用jQuery来创建一个下拉盖，将它应用到每一个DIV段。 04. Approach jQuery Approach 类似 jQuery animate, 不同的是它是根据距离而不是时间来进行动画处理。 05. Colorful Sliders With jQuery & CSS3 在这个教程中，我们使用 jQuery 和 CSS3 中的新的转换方法来创建滑块控制。 06. Textualizer – A jQuery plugin to transition through blurbs of text […]
View Details触摸屏是现在所有智能手机的标配，还包括各种平板设备，而且很多桌面也慢慢在开始支持触摸操作。要开发支持触摸屏设备的 Web 应用，我们需要借助浏览器的触摸事件来实线。 下图是各种触摸事件说明： 本文我们介绍 11 个用来处理触摸事件以及支持多点触摸的 JS 库： QUO JS Events: Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, Drag Other features: Built-in jQuery-like methods. It uses $$ to avoid conflict. File size: 13KB minified Standlone: Yes Hammer JS Events: Tap, Double tap, hold, drag, transform (pinch) Other features: Javascript library focused only for multi-touch gestures File size: 2KB minified Standlone: Yes Touchy Events: long press, drag, pinch, rotate, swipe Other features: jQuery plugin for webkit […]
View Details//关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>"); this.Response.Write("{top.opener =null;top.close();}"); this.Response.Write("</script>"); //弹出窗口刷新当前页面width=200 height=200菜单。菜单栏,工具条,地址栏,状态栏全没有 this.Response.Write("<script language=javascript>window.open('rows.aspx',’newwindow',’width=200,height=200′)</script>"); //弹出窗口刷新当前页面 this.Response.Write("<script language=javascript>window.open('rows.aspx')</script>"); this.Response.Write("<script>window.open('WebForm2.aspx',’_blank');</script>"); //弹出提示窗口跳到webform2.aspx页(在一个IE窗口中) this.Response.Write(" <script language=javascript>alert('注册成功');window.window.location.href=’WebForm2.aspx';</script> "); //关闭当前子窗口,刷新父窗口 this.Response.Write("<script>window.opener.location.href=window.opener.location.href;window.close();</script>"); this.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>"); //子窗口刷新父窗口 this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>"); this.Response.Write("<script>window.opener.location.href=’WebForm1.aspx';</script>"); //弹出提示窗口.确定后弹出子窗口(WebForm2.aspx) this.Response.Write("<script language=’javascript'>alert('发表成功！');window.open('WebForm2.aspx')</script>"); //弹出提示窗口,确定后,刷新父窗口 this.Response.Write("<script>alert('发表成功！');window.opener.location.href=window.opener.location.href;</script>"); //弹出相同的一页 <INPUT type="button" value="Button" onclick="javascript:window.open(window.location.href)"> // Response.Write("parent.mainFrameBottom.location.href=’yourwebform.aspx?temp=" +str+"';"); <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //这句要写成一行 --> </SCRIPT> 参数解释： <SCRIPT LANGUAGE="javascript"> js脚本开始； window.open 弹出新窗口的命令； 'page.html' 弹出窗口的文件名； 'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空"代替； height=100 窗口高度； width=400 窗口宽度； top=0 窗口距离屏幕上方的象素值； left=0 窗口距离屏幕左侧的象素值； toolbar=no 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许； location=no 是否显示地址栏，yes为允许； status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； </SCRIPT> […]
View Details1 又是几个基本概念 为什么要说又呢？ 在讨论继承时，我们已经列出了一些基本概念了，那些概念是跟封装密切相关的概念，今天我们要讨论的基本概念，主要是跟继承与多态相关的，但是它们跟封装也有一些联系。 1.1 定义和赋值 变量定义是指用 var a; 这种形式来声明变量。 函数定义是指用 function a(…) {…} 这种形式来声明函数。 var a = 1; 是两个过程。第一个过程是定义变量 a，第二个过程是给变量 a 赋值。 同样 var a = function(…) {}; 也是两个过程，第一个过程是定义变量 a 和一个匿名函数，第二个过程是把匿名函数赋值给变量 a。 变量定义和函数定义是在整个脚本执行之前完成的，而变量赋值是在执行阶段完成的。 变量定义的作用仅仅是给所声明的变量指明它的作用域，变量定义并不给变量初始值，任何没有定义的而直接使用的变量，或者定义但没有赋值的变量，他们的值都是 undefined。 函数定义除了声明函数所在的作用域外，同时还定义函数体结构。这个过程是递归的，也就是说，对函数体的定义包括了对函数体内的变量定义和函数定义。 通过下面这个例子我们可以更明确的理解这一点： Java代码 alert(a); alert(b); alert(c); var a = "a"; function a() {} function b() {} var b = "b"; var c = "c"; var c = function() {} […]
View DetailsJavaScript 是一种非常灵活的面向对象程序设计语言，它与传统的强类型的面向对象程序设计语言（如 C++，Java，C# 等）有很大不同，所以要实现如 C++、java、C# 当中的一些特性就需要换一种思考方式来解决。今天主要讨论如何在 JavaScript 脚本中实现数据的封装（encapsulation）。 数据封装说的简单点就是把不希望调用者看见的内容隐藏起来。它是面向对象程序设计的三要素之首，其它两个是继承和多态，关于它们的内容在后面再讨论。 关于数据封装的实现，在 C++、Java、C# 等语言中是通过 public、private、static 等关键字实现的。在 JavaScript 则采用了另外一种截然不同的形式。在讨论如何具体实现某种方式的数据封装前，我们先说几个简单的，大家所熟知却又容易忽略的 JavaScript 的概念。 1 几个基本概念 1.1 变量定义 在 JavaScript 语言中，是通过 var 关键字来定义变量的。 但是如果我们直接给一个没有使用 var 定义的变量赋值，那么这个变量就会成为全局变量。 一般情况下，我们应该避免使用没有用 var 定义的变量，主要原因是它会影响程序的执行效率，因为存取全局变量速度比局部变量要慢得多。 但是这种用法可以保证我们的变量一定是全局变量。 另外，为了保证速度，我们在使用全局变量时，可以通过 var 定义一个局部变量，然后将全局变量赋予之，由此可以得到一个全局变量的局部引用。 1.2 变量类型 没有定义的变量，类型为 undefined。 变量的值可以是函数。 函数在 JavaScript 中可以充当类的角色。 1.3 变量作用域 变量作用域是指变量生存周期的有效范围。 单纯用 { } 创建的块不能创建作用域。 with 将它包含的对象作用域添加到当前作用域链中，但 with 不创建新的作用域。with 块结束后，会将对象作用域从当前作用域链中删除。 try-catch 中，catch 的错误对象只在 catch 块中有效，但 catch 块中定义的变量属于当前作用域。 其它如 if、for、for-in、while、do-while、switch 等控制语句创建的块不能创建作用域。 用 function 创建的函数，会创建一个新的作用域添加到当前作用域中。 2 封装 下面我们就来讨论具体的封装。首先说一下大家最熟悉的几种封装：私有实例成员、公有实例成员和公有静态成员。最后会讨论一下大家所不熟悉的私有静态成员和静态类的封装办法。因为下面要讨论的是面向对象编程，所有当函数作为类来定义和使用时，我们暂且将其成为类。 2.1 私有实例成员 私有实例成员在 JavaScript 中实际上可以用函数内的局部变量来实现，它相当于类的私有实例成员。例如： class1 = function() { // private […]
View Details提起面向对象我们就能想到类，对象，封装，继承，多态。在《javaScript高级程序设计》（人民邮电出版社，曹力、张欣译。英文名字是：Professional JavaScript for Web Developers）这本书中描述的还算比较详细。我们看看JavaScript中定义类的各种方法。 1．工厂方式 javaScript中创建自己的类和对象，我们应该是必须掌握的，我们都知道javaScript中对象的属性可以在对象创建后动态定义，比如下面的代码： 复制代码代码如下: <script type="text/javascript"> //定义 var oCar = new Object(); oCar.color = "red"; oCar.doors = 4; oCar.showColor = function() { alert(this.color); } //调用 oCar.showColor(); </script> 我们很容易使用oCar对象，但是我们创就是想创建多个Car实例。我们可以使用一个函数来封装上面的代码来实现：<script type="text/javascript"> 复制代码代码如下: //定义 function createCar() { var oCar = new Object(); oCar.color = "red"; oCar.doors = 4; oCar.showColor = function() { alert(this.color); } return oCar; } //调用 var ocar1 = createCar(); var ocar2 = createCar(); ocar1.color = "black"; ocar1.showColor(); ocar2.showColor(); </script> 顺便说一下，javaScript对象默认成员属性都是public 的。这种方式我们称为工厂方式，我们创造了能创建并返回特定类型的对象的工厂。 这样做有点意思了，但是在面向对象中我们经常使用创建对象的方法是： Car car=new Car(); 使用new 关键字已经深入人心，因此我们使用上面的方法去定义总感觉别扭，并且每次调用时都去创建新的属性以及函数，功能上也不实际。下来我们看看构造函数的形式定义类。 2．构造函数 这种方式看起来有点象工厂函数。具体表现如下： 复制代码代码如下: <script type="text/javascript"> //定义 function Car(color, doors) { this.color = color; this.doors = doors; this.showColor = function() { alert(this.color); }; } //调用 var car1 = new Car("red", 4); var car2 = new Car("blue", 4); car1.showColor(); car2.showColor(); </script> 看起来效果很明显，有差别了吧。感觉有点意思了。在构造函数内部创造对象使用this 关键字，使用new 运算符创建对象感觉非常亲切。但是也有点问题：每次new 对象时都会创建所有的属性，包括函数的创建，也就是说多个对象完全独立，我们定义类的目的就是为了共享方法以及数据，但是car1对象与car2对象都是各自独立的属性与函数，最起码我们应该共享方法。这就是原形方式的优势所在。 3．原型方式 利用对象的prototype属性，可把它看出创建新对象所依赖的原型。方法如下： 复制代码代码如下: <script type="text/javascript"> //定义 function Car() { }; Car.prototype.color = "red"; Car.prototype.doors = 4; Car.prototype.drivers = new […]
View Details这个系列的第一部分介绍了"封装"，第二部分介绍了使用构造函数实现"继承"。 今天是最后一个部分，介绍不使用构造函数实现"继承"。 一、什么是"非构造函数"的继承？ 比如，现在有一个对象，叫做"中国人"。 var Chinese = {nation:’中国'}; 还有一个对象，叫做"医生"。 var Doctor ={career:’医生'} 请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？ 这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。 二、object()方法 json格式的发明人Douglas Crockford，提出了一个object()函数，可以做到这一点。 function object(o) { function F() {} F.prototype = o; return new F(); } 这个object()函数，其实只做一件事，就是把子对象的prototype属性，指向父对象，从而使得子对象与父对象连在一起。 使用的时候，第一步先在父对象的基础上，生成子对象： var Doctor = object(Chinese); 然后，再加上子对象本身的属性： Doctor.career = '医生'; 这时，子对象已经继承了父对象的属性了。 alert(Doctor.nation); //中国 三、浅拷贝 除了使用"prototype链"以外，还有另一种思路：把父对象的属性，全部拷贝给子对象，也能实现继承。 下面这个函数，就是在做拷贝： function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i];} c.uber = p; return c;} 使用的时候，这样写： var Doctor = extendCopy(Chinese); Doctor.career = '医生'; alert(Doctor.nation); // 中国 但是，这样的拷贝有一个问题。那就是，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。 请看，现在给Chinese添加一个"出生地"属性，它的值是一个数组。 Chinese.birthPlaces = ['北京',’上海',’香港']; 通过extendCopy()函数，Doctor继承了Chinese。 var Doctor = extendCopy(Chinese); 然后，我们为Doctor的"出生地"添加一个城市： […]
View Details这个系列的第一部分，主要介绍了如何"封装"数据和方法，以及如何从原型对象生成实例。 今天要介绍的是，如何生成一个"继承"多个对象的实例。 比如，现在有一个"动物"对象的构造函数， function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数， function Cat(name,color){ this.name = name; this.color = color; } 怎样才能使"猫"继承"动物"呢？ 1. 构造函数绑定 最简单的方法，大概就是使用call或apply方法，将父对象的构造函数绑定在子对象上，也就是在子对象构造函数中加一行： function Cat(name,color){ Animal.apply(this, arguments); this.name = name; this.color = color; } var cat1 = new Cat("大毛","黄色"); alert(cat1.species); // 动物 2. prototype模式 更常见的做法，则是使用prototype属性。 如果"猫"的prototype对象，指向一个Animal的实例，那么所有"猫"的实例，就能继承Animal了。 Cat.prototype = new Animal(); Cat.prototype.constructor = Cat; var cat1 = new Cat("大毛","黄色"); alert(cat1.species); // 动物 代码的第一行，我们将Cat的prototype对象指向一个Animal的实例。 Cat.prototype = new Animal(); 它相当于完全删除了prototype 对象原先的值，然后赋予一个新值。但是，第二行又是什么意思呢？ Cat.prototype.constructor = Cat; 原来，任何一个prototype对象都有一个constructor属性，指向它的构造函数。也就是说，Cat.prototype 这个对象的constructor属性，是指向Cat的。 我们在前一步已经删除了这个prototype对象原来的值，所以新的prototype对象没有constructor属性，所以我们必须手动加上去，否则后面的"继承链"会出问题。这就是第二行的意思。 总之，这是很重要的一点，编程时务必要遵守。下文都遵循这一点，即如果替换了prototype对象， o.prototype = {}; 那么，下一步必然是为新的prototype对象加上constructor属性，并将这个属性指回原来的构造函数。 o.prototype.constructor = o; 3. 直接继承prototype 由于Animal对象中，不变的属性都可以直接写入Animal.prototype。所以，我们也可以让Cat()跳过 Animal()，直接继承Animal.prototype。 现在，我们先将Animal对象改写： function […]
View Details学习Javascript，最难的地方是什么？ 我觉得，Object（对象）最难。因为Javascript的Object模型很独特，和其他语言都不一样，初学者不容易掌握。 下面就是我的学习笔记，希望对大家学习这个部分有所帮助。我主要参考了以下两本书籍： 《面向对象的Javascript》（Object-Oriented JavaScript） 《Javascript高级程序设计（第二版）》（Professional JavaScript for Web Developers, 2nd Edition) 它们都是非常优秀的Javascript读物，推荐阅读。 笔记分成三部分。今天的第一部分是讨论"封装"（Encapsulation），后面的第二部分和第三部分讨论"继承"（Inheritance）。 ============================ Javascript 面向对象编程（一）：封装 作者：阮一峰 Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。 那么，如果我们要把"属性"（property）和"方法"（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？ 1. 生成对象的原始模式 假定我们把猫看成一个对象，它有"名字"和"颜色"两个属性。 var Cat = { name : ", color : " } 现在，我们需要根据这个原型对象，生成两个实例对象。 var cat1 = {}; // 创建一个空对象 cat1.name = "大毛"; // 按照原型对象的属性赋值 cat1.color = "黄色"; var cat2 = {}; cat2.name = "二毛"; cat2.color = "黑色"; 好了，这就是最简单的封装了。但是，这样的写法有两个缺点，一是如果多生成几个实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出有什么联系。 2. 原始模式的改进 我们可以写一个函数，解决代码重复的问题。 function Cat(name,color){ return { name:name, color:color } } 然后生成实例对象，就等于是在调用函数： var cat1 = Cat("大毛","黄色"); var cat2 = Cat("二毛","黑色"); 这种方法的问题依然是，cat1和cat2之间没有内在的联系，不能反映出它们是同一个原型对象的实例。 3. 构造函数模式 为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。 所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。 比如，猫的原型对象现在可以这样写， function Cat(name,color){ […]
View DetailsMath 对象 Math 对象用于执行数学任务。 使用 Math 的属性和方法的语法：
|
1 |
var pi_value=Math.PI;var sqrt_value=Math.sqrt(15); |
注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。 Math 对象属性 FF: Firefox, IE: Internet Explorer 属性 描述 FF IE E 返回算术常量 e，即自然对数的底数（约等于2.718）。 1 3 LN2 返回 2 的自然对数（约等于0.693）。 1 3 LN10 返回 10 的自然对数（约等于2.302）。 1 3 LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。 1 3 LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。 1 3 PI 返回圆周率（约等于3.14159）。 1 3 SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。 1 3 SQRT2 返回 2 的平方根（约等于 1.414）。 1 3 Math 对象方法 FF: Firefox, IE: Internet […]
View Details