`

学习jQuery高级编程(一)

阅读更多
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../jQuery/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            console.info("Hello World!");
            var obj = null;
            console.info(jQuery.isPlainObject(obj));
            obj = {};
            console.info(jQuery.isPlainObject(obj));
            obj = new Object();
            console.info(jQuery.isPlainObject(obj));
            //在javascript中,所有数值都是64位双精度的。整数和浮点数之间并没有区别
            console.info(typeof 1);
            console.info(typeof 1.5);
            var thisMonment = new Date();
            console.info(thisMonment);
            console.info(thisMonment.getFullYear());
            try{
                throw new Error("something really bad happened");
            }catch (e){
                console.info(e.name+" : "+ e.message);
            }
            //一个变量可以进行多次声明
            i = 0; //隐式声明
            console.info("delete i : " + (delete i));
            var i = 0; //显示声明,变量是持久的不能进行删除
            console.info("delete i : " + (delete i));
            var x; //undefined,默认是undefined
            /**
             * 各种不同的类型
             Error
             EvalError
             RangeError
             ReferenceError
             SyntaxError
             TypeError
             URIError
             */
            try{
                //函数内外声明了相同的变量,函数体内局部变量将取代全局变量
                (function(){
                    var v1 = "local scope";
                    v2 = "global scope";
                })();
                console.info(v1);
                console.info(v2);
            }catch (e){
                console.info(e +" : "+ e.type +" " + e.message);
            }
            //创建对象
            //构造函数
            function ZombieObject(name){
                this.name = name;
            }
            var smallZombieObject = new ZombieObject("zhangsan");
            //使用字面量创建对象,类似于其他语言的三列(hash)或关联数组
            var myObject = {};
            var objWithProperties = {
                "name" : "zhangsan",
                "myObjectAsProperty" : myObject
            };
            //采用[]访问时属性可以是javascript关键字和变量,.方式不行
            console.info(objWithProperties["name"] +"  "+objWithProperties.name);
            //遍历对象的属性
            for(prop in objWithProperties){
                console.info(prop +" : "+ objWithProperties[prop]);
            }
            //基于原型的继承示例
            function Monster(type){
                this.type = type;
            }
            Monster.prototype.getType = function(){
                return this.type;
            }
            function Zombie(name){
                this.name = name;
            }
            Zombie.prototype = new Monster();
            Zombie.prototype.eatPeople = function(){
                console.info("tastes like chicken");
            }
            var smallZombie = new Zombie();
            smallZombie.eatPeople();
            console.info(delete Zombie.prototype.eatPeople);
            //对象是自知的self-aware,对象知道自己的属性,可以使用hasOwnProperty()方法,返回一个Boolean值
            console.info(smallZombie.hasOwnProperty("name"));
            console.info(smallZombie.hasOwnProperty("eatPeople"));

            //函数没有返回一个特定的值,则它将返回一个undefined值。
            console.info((function(){})());
            /**
             * 函数的两个特性
             * 1、函数作为参数传递给其他函数
             * 2、匿名函数
             */
            function repoter(fn){
                console.info("the return value of your function is "+fn());
            }
            repoter(function(){});
            repoter(function(){
                return " a simple string";
            });
            console.info("=========函数=========");
            /**
             * 自执行函数
             * 将函数表达式包装在一对圆括号中[()()],
             * 将迫使javascript引擎将function(){}块识别成一个函数表达式,
             * 而不是一个函数语句开始
             */
            console.info("=========自执行函数=========");
            (function(x,y){
                console.info("自执行函数:"+(x+y));
            })(5,6);
            console.info("=========闭包简介=========");
            //无论在外部作用域中X的值发生了什么变化,闭包将记住函数执行时变量X的值
            var x = 10;
            console.info("x = "+x);
            var message = (function(param){
                return function(){
                    console.info("闭包中的值:"+ param);
                };
            })(x);
            message(x);
            x = 100;
            console.info("x = "+x);
            message(x);
            //eval函数和setTimeOut函数具有自己独立的执行上下文
            console.log(this);
            /**
             * 在javascript中,作用域维持在函数级别而并非块级别。
             * 除了不能访问this和参数外(this和参数有调用执行者传入),嵌套函数可以访问外部函数定义的变量
             * 闭包:即使在外部函数执行结束后,内部嵌套函数继续保持它对外部函数的引用。闭包还有助于解决命名冲突
             * 每次调用一个包裹的函数时,代码虽然没有变换但是javascript将为每一次调用创建一个新的作用域
             */
            function getFunction(value){
                return function(value){
                    console.info(this);
                    return value;
                }
            }
            var a = getFunction(),
                b = getFunction(),
                c = getFunction();
            console.info(a(0));
            console.info(b(1));
            console.info(c(2));
            console.info(a === b);
            //闭包保持对外部函数的引用
            var obj = {};
            obj.method = function(){
                var that = this;
                this.counter = 0;
                var count = function(){
                    that.counter++;
                    console.info(that.counter);
                }
                count();
                count();
                console.info(this.counter);
                return count;
            }
            var test = obj.method();
            //实现私有方法和属性,使用闭包
            console.info("=========实现私有方法和属性,使用闭包==========");
            function TimeMachine(){
                //共有成员
                //私有成员
                var destination = "2015-05-28";
                this.getDestination = function(){
                    return destination;
                }
            }
            var delorean = new TimeMachine();
            console.log(delorean.getDestination());
            //访问不到变量
            console.log(delorean.destination);

            /**
             * 使用模块
             * 模块模式是一种简单而流行的方式,用于创建自包含的、模块化的代码。
             * 创建一个模块,只需要声明一个名称空间、将有关函数绑定于该名称空间,并定义私有成员和专有成员即可
             */
            var TIMEMACHINE = {};
            TIMEMACHINE.createDelorean = (function(){
                //私有成员--感觉这个没有使用
                var destination = "";
                var model = "";
                var fuel = "";

                //共有方法
                return {
                    //设置器
                    setDestination : function(dest){
                        this.destination = dest;
                    },
                    setModel : function(model){
                        this.model = model;
                    },
                    setFuel : function(fuel){
                        this.fuel = fuel;
                    },
                    //访问器
                    getDestination : function(){
                        return this.destination;
                    },
                    getModel : function(model){
                        return this.model;
                    },
                    getFuel : function(fuel){
                        return this.fuel;
                    },
                    toString : function(){
                        console.info(this.getModel() + " " + this.getFuel() +" " +this.getDestination());
                    },
                    toString2 : function(){
                        console.info(destination + " " + fuel +" " + model);
                    }
                };
            })();
            var myMachine = TIMEMACHINE.createDelorean;
            myMachine.setDestination("zhangsan");
            myMachine.setModel("开挂模式");
            myMachine.setFuel("哈哈,不认识这个单词!");
            myMachine.toString();
            myMachine.toString2();

            //json javascript object notation
            var list = [1,"2",3,4];
            console.info(list);
            //删除元素内容,不改变元素长度
            delete list[0];
            console.info(list);
            console.info(list.length);
            console.info("=====扩展类型=====");
            String.prototype.boolean = function(){
                return "true" == this;
            }
            console.info("false".boolean());
            //类型转换
            var good = parseInt("010",10);
            console.info(good);
            var better =  + "010";
            console.info(better);
            //eval()函数可以接受一个字符串,并将视为javascript代码执行。
            // 应该限制eval的使用,它容易在代码中引入各种各样严重的问题
            $("#submit").click(function(){
                $.ajax({
                    url:"/place2post.php",
                    type:"post",
                    success:function(){
                        //成功代码
                    }
                });
            });
        });
    </script>
</head>
<body>

</body>
</html>

 

 

分享到:
评论

相关推荐

    jQuery高级编程,中文完整扫描版

    《jQuery高级编程》是一本深度探讨jQuery库的权威著作,旨在帮助开发者提升在网页开发中的JavaScript技能,特别是使用jQuery进行高效、优雅的DOM操作、事件处理、动画制作以及Ajax交互等方面的知识。这本书全面覆盖...

    jQuery高级编程

    综上所述,《jQuery高级编程》是一本全面讲解jQuery高级特性的书籍,对于开发者来说,深入学习后可以提升在Web开发中的效率和代码质量。jb51.net可能是该书的来源或相关资源网站,可能提供更多的学习资料和讨论社区...

    jquery高级编程的最佳实践详解

    学习和实践jQuery高级编程的最佳实践,可以帮助开发者编写出更为高效、兼容和可维护的JavaScript代码。上述的实践方法是众多Web开发者在日常开发中积累的宝贵经验,运用好这些方法,可以让Web应用的性能和用户体验...

    jQuery高级编程 高清PDF完整版

    《jQuery高级编程》是一本深度探讨jQuery库的权威著作,旨在帮助读者掌握jQuery的核心概念、高级技巧以及实际应用。jQuery是JavaScript的一个库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单和...

    JQuery高级编程之面向对象.rar

    jQuery虽然主要是一个函数库,但它提供了许多方法来支持面向对象编程,这使得开发者可以创建复杂的、模块化的代码结构。 1. **jQuery.fn.extend()**: 这个方法允许我们扩展jQuery的基本功能,创建自定义的插件。...

    jQuery高级编程 高清PDF完整版带目录和源代码

    《jQuery高级编程》是一本深度探讨jQuery库的书籍,涵盖了jQuery的核心概念、高级技巧以及实际应用。这本书旨在帮助开发者从初级水平提升至高级水平,掌握更深入的jQuery知识,提高前端开发效率。以下是对该书内容的...

    XMPP高级编程——使用JavaScript和JQuery 附带的源码

    本资源是《XMPP高级编程——使用JavaScript和JQuery》一书附带的源码,十分详细,搭载在服务器上可直接运行。如果要用自己搭建的Openfire之类的XMPP服务器,修改也十分简单,是学习Web环境下的XMPP协议开发的好资料...

    XMPP高级编程 使用JavaScript和jQuery

    《xmpp高级编程——使用java*和jquery》将教您如何在自己的应用程序中发挥xmpp的强大威力,并向您展示如何利用xmpp构建下一代应用程序或向当前应用程序中添加新功能所需的所有工具。本书的特色是采用java*语言进行...

    XMPP高级编程——使用JavaScript和jQuery

    在《XMPP高级编程——使用JavaScript和jQuery》一书中,作者深入探讨了如何利用这两种强大的Web技术来实现XMPP功能。JavaScript作为浏览器端的主要编程语言,为网页添加动态交互性,而jQuery则简化了DOM操作,提供了...

    中文 pdf +源码《XMPP高级编程+使用JavaScript和jQuery》

    《XMPP高级编程+使用JavaScript和jQuery》是一本深度探讨XMPP协议以及如何结合JavaScript和jQuery进行实时通信的书籍。XMPP(Extensible Messaging and Presence Protocol)是一种基于XML的即时通讯协议,广泛应用于...

    JavaScript高级编程 pdf

    "JavaScript高级编程"这本书深入探讨了这门语言的高级特性和最佳实践,旨在帮助开发者提升技能水平,实现更高效、更可靠的代码编写。以下是该书可能涵盖的一些关键知识点: 1. **基础语法**:包括变量、数据类型...

    XMPP高级编程+使用JavaScript和jQuery

    本篇内容将深入探讨XMPP高级编程,以及如何结合JavaScript和jQuery来实现Web IM(即时通讯)功能。 一、XMPP协议基础 XMPP最初由Jabber项目开发,后来成为互联网工程任务组(IETF)的标准。它的核心特性是基于XML的...

    jquery组件编程,里面有丰富的组件,让你快速熟悉

    这个标题“jquery组件编程,里面有丰富的组件,让你快速熟悉”表明我们将探讨jQuery组件的编程,而描述则强调了通过学习jQuery编程技巧可以加速这一过程,并提到了包含实战经验和详尽文档。 首先,让我们深入了解...

    JQuery学习资料

    这个“JQuery学习资料”压缩包包含了一系列与JQuery相关的学习资源,旨在帮助开发者深入理解和掌握JQuery的核心概念和实用技巧。 首先,`jquery1.4 API`是JQuery 1.4版本的官方API文档,它详细列出了该版本的所有...

    jQuery高级程序设计目录1

    jQuery 是一个广泛使用的 JavaScript 库...总之,"jQuery 高级程序设计目录1"涵盖了jQuery的深度学习路径,从基础概念到核心机制,再到高级应用,为开发者提供了全面的指南,帮助他们更好地利用jQuery提升Web开发效率。

    精通JQuery代码实践学习

    学习jQuery的同时,掌握如何编写和使用插件也是提高开发效率的关键。 总之,《精通jQuery代码实践学习》将带你探索jQuery的各个层面,包括基础用法、高级技巧以及实际项目应用。通过深入学习和实践,你将能够灵活...

    JQuery教程-从零开始学习jQuery

    ”,这也标志着你已经迈出了学习JQuery的第一步。 #### 结语 本文作为JQuery教程的开篇,介绍了JQuery的基本概念、特性以及一个简单的示例。接下来的文章将会深入探讨JQuery的各种高级功能,包括AJAX开发等内容。...

    jQuery高级在线配色器插件.zip

    为了帮助开发者更高效地完成色彩设计,出现了各种在线配色工具,其中jQuery高级在线配色器插件就是一款深受青睐的实用工具。本文将深入探讨这款插件的特性和使用方法。 首先,让我们理解什么是jQuery。jQuery是一个...

Global site tag (gtag.js) - Google Analytics