【技术分享会】 @第四期 JQuery插件

2023-08-22 09:07:34

本讲内容

JavaScript

JQuery

JQuery插件

实例

JavaScript

前端开发工程师必须掌握的三种技能

    描述内容的HTML

    描述网页样式的CSS

    描述网页行为的JavaScript

JavaScript是一门高端的、动态的、弱类型的编程语言，非常适合面向对象和函数式的编程风格

JQuery

站在巨人的肩膀上

JQuery是类库还是JQuery框架？

类库：用来实现各种功能的类的集合

框架：是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法；另一种定义认为，框架是可定制的应用骨架

常见的JS框架

如：Angular、Node

亦如前端UI框架：Pure

插件

链式调用

让插件接受参数，灵活定制

面向对象的插件开发

自调用匿名函数

实例代码

<html>

<head>

    <title>

        实例

    </title>

    <script src="jquery-1.8.0.min.js"></script>

    <script>

        $(function () {

            //function add(a, b) {

            //    add.num++;

            //    return a + b;

            //}

            //add.num = 3;

            //alert(add.num);

            //alert(add(2, 2));

            //alert(add.num);

            //function Person(name, sex) {

            //    this.name = name;

            //    this.sex = sex;

            //}

            //Person.prototype = {

            //    getName: function () {

            //        return this.name;

            //    },

            //    getSex: function () {

            //        return this.sex;

            //    }

            //}

            //Person.prototype.age = 33;

            //var zhang = new Person("测试1", "man");

            //alert(zhang.getName());

            //alert(zhang.age);

            //zhang.age = 30;

            //alert(Person.prototype.age);

            //alert(zhang.age);

            //var chun = new Person("测试2", "woman");

            //alert(chun.getName());

            //alert(chun.age);

            //Person.prototype.age = 18;

            //delete chun.age;

            //alert(chun.age);

            //alert(zhang.age);

            //chun.age = 22;

            //alert(Person.prototype.age);

            //function Employee(name, sex, employeeid) {

            //    this.employeeid = employeeid;

            //    this.name = name;

            //    this.sex = sex;

            //}

            //Employee.prototype = new Person();

            //Employee.prototype.getEmployeeID = function () {

            //    return this.employeeid;

            //}

            //var test1 = new Employee("ceshi1", "man", "1234");

            //console.log(test1.getName());

            //console.log(test1.age);

            ///*实例一*/

            //$.extend({

            //    sayHello: function (name) {

            //        console.log("Hello " + (name ? name : "LJY" + "！"));

            //    }

            //});

            //$.sayHello();

            //$.sayHello("yy");

            /*实例二*/

            //$.extend({

            //    log: function (message) {

            //        var now = new Date(),

            //            y = now.getFullYear(),

            //            m = now.getMonth() + 1,

            //            d = now.getDate(),

            //            h = now.getHours(),

            //            min = now.getMinutes(),

            //            s = now.getSeconds(),

            //            time = y + "/" + m + "/" + d + " " + h + ":" + min + ":" + s;

            //        console.log(time + " My APP:" + message);

            //    }

            //});

            //$.log("initializing...");

            /*实例三 基础用法*/

            //$.fn.myPlugin = function () {

            //    //this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般指一个jQuery类型的集合。

            //    this.css("color", "blue");

            //    this.each(function () {

            //        $(this).append(" " + $(this).attr("href"));

            //        //this.append(" " + this.attr("href"));

            //    });

            //    //this.append(" " + this.attr("href"));

            //}

            //$("a").myPlugin();

            /*实例四 链式调用方法*/

            //$.fn.myPlugin = function () {

            //    //this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般指一个jQuery类型的集合。

            //    this.css("color", "red");

            //    //支持链式调用

            //    return this.each(function () {

            //        $(this).append(" " + $(this).attr("href"));

            //    });

            //}

            //$("a").myPlugin().css("color", "blue").css("color", "black");

            /*实例五 让插件接受参数，灵活定制*/

            //$.fn.myPlugin = function (options) {

            //    var defaults = {

            //            "color": "red",

            //            "fontSize":"12px"

            //        };

            //    //var settings = $.extend(defaults, options);

            //    var settings = $.extend({}, defaults, options);

            //    //支持链式调用

            //    return this.css({

            //        "color": settings.color,

            //        "fontSize": settings.fontSize

            //    });

            //}

            //$("a").myPlugin({ "color": "#2c9929","fontSize":"20px" });

            /*实例六 面向对象的插件开发*/

            //定义Beautifier的构造函数

            //var Beautifier = function (ele, opt) {

            //    this.$element=ele,

            //    this.defaults = {

            //        "color": "red",

            //        "fontSize": "12px",

            //        "textDecoration":"none"

            //    },

            //    this.options = $.extend({},this.defaults,opt)

            //}

            ////定义Beautifier的方法

            //Beautifier.prototype = {

            //    beautify: function () {

            //        return this.$element.css({

            //            "color": this.options.color,

            //            "fontSize": this.options.fontSize,

            //            "textDecoration":this.options.textDecoration

            //        });

            //    }

            //}

            ////在插件中使用Beatuifier对象

            //$.fn.myPlugin = function (options) {

            //    var beautifier = new Beautifier(this, options);

            //    return beautifier.beautify();

            //}

            //$("a").myPlugin({ "color": "#2c9929", "fontSize": "20px","textDecoration":"underline" });

            //实例七自调用匿名函数

            ;(function ($,window,document,undefined) {

                //定义Beautifier的构造函数

                var Beautifier = function (ele, opt) {

                    this.$element = ele,

                    this.defaults = {

                        "color": "red",

                        "fontSize": "12px",

                        "textDecoration": "none"

                    },

                    this.options = $.extend({}, this.defaults, opt)

                }

                //定义Beautifier的方法

                Beautifier.prototype = {

                    beautify: function () {

                        return this.$element.css({

                            "color": this.options.color,

                            "fontSize": this.options.fontSize,

                            "textDecoration": this.options.textDecoration

                        });

                    }

                }

                //在插件中使用Beatuifier对象

                $.fn.myPlugin = function (options) {

                    var beautifier = new Beautifier(this, options);

                    return beautifier.beautify();

                }

            })(jQuery, window, document);

            $("a").myPlugin({ "color": "#2c9929", "fontSize": "20px", "textDecoration": "underline" });//.css("color", "red");

        });

    </script>

</head>

<body>

    <ul>

        <li>

            <a href="http://baidu.com">百度</a>

        </li>

        <li>

            <a href="http://v.ktgj.com/">空铁后台</a>

        </li>

    </ul>

</body>

</html>

例子

码农公寓

相关文章