<!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. Android 有趣味的GridView

    工作这么久以来,都是以解决需求为目标.渐渐发现这种学习方式不好,学到的知识能马上解决问题,但没有经过梳理归纳.故想系统总结下一些有趣味的知识点.在这篇博客中想以一个例子系统讲解下GridView控件涉 ...

  2. C# .NET开发Oracle数据库应用程序

    .NET Framework访问Oracle数据库至少有两种方式,一种是利用微软提供的ADO.NET,另一种是利用Oracle提供的ODP.NET. 安装VS的时候会附带ADO.NET,安装Oracl ...

  3. Silverlight 模板(Template)使用

    模板(Template)是控件另一种样式 它和样式(style)不同的是它允许已有的控件进行组合新的一个控件样式 那么先看一下最简单Template代码 xaml代码 <Button Conte ...

  4. HDOJ(HDU) 1720 A+B Coming(进制)

    Problem Description Many classmates said to me that A+B is must needs. If you can't AC this problem, ...

  5. 一个简单的TestNG例子

    关于TestNG好的资源: 官网文档:http://testng.org/doc/documentation-main.html 一 下载并安装:1. JDK 1.7 $ java -version ...

  6. UVA11995【I can guess the data structrue!!】【水】+UVA11991【map用法】

    先看UVA11995 两份代码一份直接用C写的,一份用STL写的 #include <iostream> #include <stdio.h> #include <str ...

  7. Lenovo G40-30 Install win7

    SATA Controller mode 两种硬盘模式,如果装XP应该要选第二种模式,兼容:据说ACHI比IDE模式性能好,开机能快点, 装Win7,两种模式都可以,只不过装Win7一般人都用ACHI ...

  8. js：jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. oracle中LAG()和LEAD()等分析统计函数的使用方法(统计月增长率)

    LAG()和LEAD()统计函数能够在一次查询中取出同一字段的前N行的数据和后N行的值.这样的操作能够使用对同样表的表连接来实现,只是使用LAG和 LEAD有更高的效率.下面整理的LAG()和LEAD ...

  10. Meth | ubuntu下安装与卸载软件方法

    1.通过deb包安装的情况: 安装.deb包: 代码:sudo dpkg -i package_file.deb反安装.deb包:代码:sudo dpkg -r package_name 2.通过ap ...