<!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. Quartz与Spring集成 Job如何自动注入Spring容器托管的对象

    在Spring中使用Quartz有两种方式实现:第一种是任务类继承QuartzJobBean,第二种则是在配置文件里定义任务类和要执行的方法,类和方法可以是普通类.很显然,第二种方式远比第一种方式来的 ...

  2. org.quartz.utils.UpdateChecker Checking for available updated version of Quartz..

    <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</ ...

  3. Android基础知识、四大组件（转）

    Android应用程序使用java语言编写的.Android SDK工具将所有的数据和资源文件以及代码进行编译,打包称为一个apk文件.一个apk文件中的所有代码被认为是一个应用,android系统的 ...

  4. MapReduce执行过程源码分析（一）——Job任务的提交

    为了能使源码的执行过程与Hadoop权威指南(2.3版)中章节Shuffle and Sort的分析相对应,Hadoop的版本为0.20.2. 一般情况下我们通过Job(org.apache.hado ...

  5. ExecuteNonQuery返回负数

    用 ExecuteNonQuery 执行sql语句"select * from table where id=@id"如果检索出符合条件的ID ExecuteNonQueue 会返 ...

  6. C++注释和doxygen注释

    C++注释 C++的注释只有两种: 单行注释,以“//”开头: 段落注释,以“/*”开始,以“*/”结束. int value; // value是一个整型变量,这是一句单行注释 /* Test是一个 ...

  7. .net 安装remoting服务

    程序->vs2008->vs tools->vs2008 命令提示 D:\QidianWorkShop\Develop\Source\Services\Snda.Qidian.Hon ...

  8. [LeetCode] 205. Isomorphic Strings 解题思路 - Java

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...

  9. libvirt API管理hypervisors

    发布一段C代码,用于连接指定的KVM宿主机器,获得该宿主机器的配置信息,以及该主机上所有的虚拟主机列表.状态及配置信息: #include <stdio.h>#include <st ...

  10. Test execution order

    刚开始的时候,JUnit并没有规定测试方法的调用执行顺序.方法通过映射的API返回的顺序进行调用.然 而,使用JVM顺序是不明智的,因为Java平台没有规定任何特定的顺序,事实上JDK7或多或少的返回 ...