<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8" />

  <title>学习插件</title>

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

  <style>

    body{

        margin:;

        padding:;

    }

    li { list-style:none;width:300px;height:300px;

    float:left;}

    img{width:%;height:%;}

    #show ul{

        margin:;

        padding:;

        overflow:hidden;

    }

    img , div{transition:All .4s ease-in-out;    -webkit-transition:All .4s ease-in-out;    -moz-transition:All .4s ease-in-out;    -o-transition:All .4s ease-in-out;}

    .scale{

        transform:scale(1.2);

        -webkit-transform:scale(1.2);

        -moz-transform:scale(1.2);

        -o-transform:scale(1.2);

        -ms-transform:scale(1.2);

    }

</style>

 </head>

 <body>

<ul id="show">

    <li><img src="1.jpg"/></li>

    <li><img src="2.jpg"/></li>

    <li><img src="3.jpg"/></li>

    <li><img src="4.jpg"/></li>

    <li><img src="5.jpg"/></li>

</ul>

<p style="clear:both;"></p>

<div style="width:100px;height:100px;background:#ccc;">

</div>

  <script type="text/javascript">

(function($) {

　　$.fn.extend({

　　"ShowImg": function(options) {

　　    options = $.extend({},{

                border: "3px solid red",

                height: "100px"

            },options); 

            //这里用了$.extend方法，扩展一个对象

        /*** return this.hover(function() { //return为了保持jQuery的链式操作

                　　$(this).css({

                    "width": options.width,

                    "height": options.height

                });　　

            },

            function() {

            　　$(this).css({

                    "width": "100px",

                    "height": "100px"

                });　　

            });*///

            var op = options.border;

            return this.click(function(){

                var had = $(this).hasClass('scale');

                if(!had){

                    $('#show').find('img').removeClass('scale');

                    $('#show').find('img').css({

                        "border": "",

                    });

                    $(this).addClass('scale');

                    $(this).css({

                        "border": "3px solid red",

                    })

                }else{

                    $(this).removeClass('scale');

                }

            })

        }

    });

})(jQuery);

$(function() {

　　$("img").ShowImg({    });

　　$("div").ShowImg({    });

    　 // alert($.urlParam());

});

</script>

 </body>

</html>

Jquery 学习插件第一天的更多相关文章

  1. Jquery学习插件之手风琴

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  3. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  4. 第一百七十六节，jQuery，插件

    jQuery,插件 学习要点: 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件 插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编 ...

  5. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  6. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  7. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  8. JQuery zoom插件学习

    jquery zoom是一款图片放大插件,经常用在商城商品页面里. 使用JQuery zoom插件,除了需要引入JQuery.js外,还要引入JQuery.zoom.js文件及jqzoom.css文件 ...

  9. jQuery学习笔记（jquery.form插件）

    官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...

随机推荐

  1. POJ2485 Highways(最小生成树)

    题目链接. 分析: 比POJ2253要简单些. AC代码: #include <iostream> #include <cstdio> #include <cstring ...

  2. （2015年郑州轻工业学院ACM校赛题） B迷宫

    这是个简单的广搜题,注意下一下细节都能写出来, 大多数人都少考虑了一点,就是 假如 我的起始点就有一个机关, 并且不是 1 号机关, 这样的话是无结果的.不懂的可以测试一下代码下面的数据 #inclu ...

  3. DOL版USB Loader的下载和运行

    下载 在Wii上面玩硬盘版游戏,自然少不了USB Loader,相关教程和下载资源在网上一搜就有. 我在官网(地址:http://gwht.wikidot.com/usb-loader)上找到了一个下 ...

  4. Linq to Sql语法及实例大全

    LINQ to SQL语句(1)之Where Where操作 适用场景:实现过滤,查询等功能. 说明:与SQL命令中的Where作用相似,都是起到范围限定也就是过滤作用的 ,而判断条件就是它后面所接的 ...

  5. Python之路【第一篇】：Python前世今生

    Python简介 Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...

  6. python_安装工具easy_install和pip

    前言 用python就必须知道easy_install和pip这两个东西啦 easy_insall提供了在线一键安装模块或包的方便方式,而pip是easy_install的改进版,提供更好的提示信息, ...

  7. Ubuntu + Win7 双系统 重装win7后进入不了Ubuntu

    机子上先有win7,然后装Ubuntu,装完Ubuntu后,开机进入Ub开机界面,里面有ubuntu,win7 loader(启动项),选择win7启动后就出现读盘错误. 天,我怎么能修复好这双系统启 ...

  8. JS~字符串长度判断，超出进行自动截取（支持中文）

    今天一个小弟问我的问题,在文本框中输入字符,如果超出指定长度,就把它截取,要求中文等于两个字符的长度,我找一下资料,把这个功能实现了,下面是JS代码: <html> <script ...

  9. 图片左右循环连续滚动代码，解决marquee的留白问题

    <marquee ONMOUSEOUT="this.start()" ONMOUSEOVER="this.stop()" DIRECTION=" ...

  10. Sublime Text 2.0.2 注册码

    Sublime Text 2.0.2 注册码 直接输入注册码就可以了----- BEGIN LICENSE -----Andrew WeberSingle User LicenseEA7E-85560 ...