你的位置:首页 > Java教程

[Java教程]jquery 拓展


1. 概述

  jquery允许拓展自定义的方法, 绑定到$.fn对象上,

  编写一个jQuery插件的原则:

  1. $.fn绑定函数,实现插件的代码逻辑;
  2. 插件函数最后要return this;以支持链式调用;    
  3. 插件函数要有默认值,绑定在$.fn.<pluginName>.defaults上;
  4. 用户在调用时可传入设定值以便覆盖默认值。

 

2. example

<html><body><div id="test-highlight1">  <p>什么是<span>jQuery</span></p>  <p><span>jQuery</span>是目前最流行的<span>JavaScript</span>库。</p></div><script src="jquery-3.1.0.js"></script><script type="text/javascript">$(function(){ 'use strict';  (function(){   $.fn.highlight = function (options) {       var opts = $.extend({}, $.fn.highlight.defaults, options);    // this已绑定为当前jQuery对象:    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);    return this;  }   $.fn.highlight.defaults = {    'backgroundColor' : '#d85030',    'color' : '#fff8de'   };       $.fn.highlight.defaults.backgroundColor = '#659f13';   $.fn.highlight.defaults.color = '#f2fae3';      $("#test-highlight1 span").highlight();

$('#test-highlight1 span').highlight({
         color : '#dd1144'
     }); })();});</script></body></html>

 

3.  使用过滤 针对特定元素的拓展

      类似submit方法只能作用在form上,我们也可以自定义针对指定dom元素使用的方法。

      jquery的filter这时派上了用场。

 

example

<html><body><div id="test-external">  <p>如何学习<a href="http://jquery.com">jQuery</a>?</p>  <p>首先,你要学习<a href="http://www.cnblogs.com//wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000">JavaScript</a>,并了解基本的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>。</p></div><script src="jquery-3.1.0.js"></script><script type="text/javascript">$(function(){ 'use strict';   (function(){  $.fn.external = function () {    return this.filter('a').each(function(){      var a = $(this);      var url = a.attr('href');      if(url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)){        a.attr('href', '#0')         .removeAttr('target')         .append('<i ></i>')         .click(function(){          if(confirm("确认跳转到"+url)){            window.open(url);          }         });      }       });      }  $('#test-external a').external();    })();});</script></body></html>