<!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. windows下和linux下 Redis 安装

    Redis 是一个高性能的key-value数据库, 使用内存作为主存储,数据访问速度非常快,当然它也提供了两种机制支持数据持久化存储.比较遗憾的是,Redis项目不直接支持Windows,Windo ...

  2. 无向图求割点 UVA 315 Network

    输入数据处理正确其余的就是套强联通的模板了 #include <iostream> #include <cstdlib> #include <cstdio> #in ...

  3. sql语句：union

     sql语句中,join,left join中,是将两个或多个表横向连接,而有时,我们需要将几个表或1个表纵向连接,甚至是连接自身,就比如,某些数据库脚本特别不合理的时候,但我们又不能说啥 ....郁 ...

  4. baiduMap 显示所有的marker（在视野里显示所有的)

    搞Android的,所以比较幸苦和累现在搞的app是关于百度地图的,因为要求要把所有覆盖物显示在一个视野...所以在网上找了很久,终于找打了方法 我引用的包是: 记录一下,其实不算很难.一个小点.翻了 ...

  5. 怎么都没人提 google 加密搜索呢? google如何稳定打开

    1. 使用smarthosts提供的hosts文件 https://smarthosts.googlecode.com/svn/trunk/hosts2. 修改浏览器默认搜索引擎为 https://e ...

  6. Perl时间处理函数

    官方网址:http://search.cpan.org/~stbey/Date-Calc-6.3/lib/Date/Calc.pod#___top use Date::Calc qw( Days_in ...

  7. King's Quest - poj 1904（强连通分量+外挂输入输出）

    题意:国王有N个儿子,每个儿子都有很多喜欢的姑娘,官员为每个王子都找了一个姑娘让他们结婚,不过国王不满意,他想知道他的每个儿子都可以和那个姑娘结婚(前提他的儿子必须喜欢那个姑娘) 分析:因为最下面一行 ...

  8. config large memory

    C Configuring Large Memory Optimization This appendix provides information for configuring memory op ...

  9. 状压dp-poj-1170-Shopping Offers

    题目链接: http://poj.org/problem?id=1170 题目意思: 购物车里有b种(0=<b<=5)物品,每种物品告诉物品代号c(1=<c<=999),数量为 ...

  10. 数据库 —— 使用JDBC操作数据库

    [Link] http://www.developer.com/java/data/manipulating-a-database-with-jdbc.html Manipulating a Data ...