zoukankan      html  css  js  c++  java
  • jquery带参插件函数的编写

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>jquery带参函数的编写</title>
    <script src="js/jquery-1.11.3.js"></script>
    </head>
    <body>
    <ul>
    <li>
    <a href="http://www.webo.com/liuwayong">我的微博</a>
    </li>
    <li>
    <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
    </li>
    <li>
    <a href="http://wayouliu.duapp.com/">我的小站</a>
    </li>
    </ul>
    <p>这是p标签不是a标签,我不会受影响</p>
    <button id="btn">调用插件</button>
    <script>
    //编写插件
    $.fn.myPlugin=function(options){
    //定义默认的风格(不传入参数情况下)
    var defaults={
    "color":"red",
    "fontSize":"14px"
    }
    //定义合并后的风格(传入的参数和默认的合并后)
    var settings= $.extend({},defaults,options);
    this.css({
    "color":settings.color,
    "fontSize":settings.fontSize
    });
    this.each(function(){
    $(this).append($(this).attr("href"));
    });
    }
    //调用插件
    $(function(){
    $("#btn").click(function(){
    $("a").myPlugin({"color":"green"});
    });
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    2016Wireshark
    移动UI
    Javascript 严格模式详解
    [转]深入浅出JSONP解决ajax跨域问题
    savedev和save的区别
    jquery各版本区别
    Webpack学习笔记(一)
    Html5新特性
    chrome浏览器debug
    bootstrap笔记
  • 原文地址:https://www.cnblogs.com/longailong/p/6543679.html
Copyright © 2011-2022 走看看