<!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. 查看ASM 使用率

    有两种方法: 1.查看v$asm_diskgroup视图 SQL> select group_number,name,total_mb,free_mb from v$asm_diskgroup; ...

  2. POJ2240 Arbitrage(最短路)

    题目链接. 题意: 根据汇率可以将一种金币换成其他的金币,求最后能否赚到比原来更多的金币. 分析: 最短路的求法,用floyd. #include <iostream> #include ...

  3. 两台windows服务器----SVN的迁移

    两台服务器,进行SVN的迁移:系统平台:windows server 2003 版本库:test源服务器:192.168.1.14目标服务器:192.168.1.12源SVN版本库的path: D:\ ...

  4. 高性能JSON工具-FastJson处理超大JSON文本

    使用阿里开源类库FastJson,当需要处理超大JSON文本时,需要Stream API,在fastjson-1.1.32版本中开始提供Stream API.文档参考GitHub:https://gi ...

  5. [置顶] JSP中使用taglib出错终极解决办法

    jsp中 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c ...

  6. WPF: How to use DatePicker in XAML-DataGrid

    https://msdn.microsoft.com/en-us/library/system.windows.controls.datagridtemplatecolumn(v=VS.100).as ...

  7. linux 虚拟机下配置tomcat

    1.在wind系统下载tomcat,tomcat8版本的需要jdk1.8以上的才支持. 下载位置:http://tomcat.apache.org/download-80.cgi -> core ...

  8. node.js环境配置（angularjs高级程序设计中出现的错误）

    一:npm install connect会出现错误:解决方法 1:$ npm install connect@2.X.X 2:$ npm install serve-static: 建立server ...

  9. python爬虫__第一个爬虫程序

    前言 机缘巧合,最近在学习机器学习实战, 本来要用python来做实验和开发环境 得到一个需求,要爬取大众点评中的一些商户信息, 于是开启了我的第一个爬虫的编写,里面有好多心酸,主要是第一次. 我的文 ...

  10. NSURLConnection获取数据

    - (void)loadDataFromUrl { NSURL* url = [NSURL URLWithString:@"http://m.weather.com.cn/data/1011 ...