之前例子是扩展jQuery的工具方法，即通过$.xxx(para);的形式来使用的。下面是扩展jquery对象的方法，即任意一个jquery对象都已访问。

具体如下：

wyl.js:

 (function($){

     //访问方法： $('span p').siblings().chgColor();//所有祖先元素为span的p元素的相邻元素

     //作用：设置jquery对象的颜色

     $.fn.chgColor = function(colors){

         var tmpColor = colors;

         var flag = !(tmpColor);

         if(!(tmpColor)){

             // tmpColor = 'orange';

             tmpColor = '#93DDFF';//蓝色

         }

         if(typeof tmpColor!='string'){

             alert('传入的参数必须是string型的');

             return false;

         }

         $(this).css('background',tmpColor);

     }

 })(jQuery)

html:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

 <script type="text/javascript" src="wyl.js"></script>

 <script>

 $(function(){

     // $('div').next('p').css('background','red');

     // $('span~p').chgColor();//查找span标记后所有同级的p标记

     // $('span~p').chgColor();//查找span标记后所有同级的p标记

     $('span p').siblings().chgColor();//所有祖先元素为span的p元素的相邻元素

     // $('span').siblings('.haha').chgColor('orange');//找到span元素同级别元素中class为haha的元素

     // $('span').siblings('div').chgColor('orange');//找到span元素所有同辈元素中 为 div元素的 元素

 });

 </script>

 </head>

 <body>

 <div>11111</div>

 <p>11111</p>

 <div>22222</div>

 <span>2222</span>

 <p>22222</p>

 <p class="haha">33333</p>

 <span><p>44444</p><br><div>我是又一个div</div></span>

 <div><p>我是div下的p元素</p></div>

 <p>55555</p>

 <p>6666</p>

 </body>

 </html>

效果：

jQuery $.fn.extend方式自定义插件的更多相关文章

  1. jQuery $.fn.extend()方法类插件

    一.为JQuery原型扩展新的属性和方法,然后在JQuery的实例对象上调用 在 jQuery 中,我们可以使用$.fn.extend()方法来定义一个方法类插件.方法类插件就是首先你使用 jQuer ...

  2. 理解jquery的$.extend()、$.fn.extend()【jQuery插件机制】

    /** * 操作数据 | DOM 操作 * @description jQuery类添加类方法,可以理解为添加静态方法,将一个或多个对象的内容合并到目标对象 * @use $.fn.zhang() | ...

  3. 理解jQuery的$.extend与$.fn.extend

    https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...

  4. jQuery开发自定义插件 $.extend()与$.fn.extend()

    jQuery extend()和jQuery.fn.extend() jQuery提供两个用于封装扩展的方法: 1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直 ...

  5. Jquery自定义插件之$.extend()、$.fn和$.fn.extend()

    jquery插件的种类: 1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent().appendTo() 2.一种是类级别的插件开发,即给jQuery添加新的全局 ...

  6. jquery插件之jquery.extend和jquery.fn.extend的区别

    jquery.extend jquery.extend(),是拓展jquery这个类,即可以看作是jquery这个类本身的静态方法,例如: <!DOCTYPE html> <html ...

  7. jQuery 第九章 工具方法之插件扩展 $.extend() 和 $.fn.extend()

    $.extend() $.fn.extend() -------------------------------------------------- $.extend() 插件扩展(工具方法) jq ...

  8. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  9. 利用jQuery对插件进行扩展时，方法$.extend()、$.fn.extend()区别与联系

      利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...

随机推荐

  1. css3_note

    css3基础 css3选择器 属性选择器 属性选择器基本上IE7+都支持,可以放心的使用,参见caniuse [attr] [attr=val] [attr*=val] [attr^=val] [at ...

  2. Android studio之更改快捷键及自动导包

    更改AS中的代码提示快捷键,AS做的也挺智能的,在Keymap中可以选择使用eclipse的快捷键设置,但是虽然设置了,对有些快捷键还是不能使用,那么就需要我们手动去修改了. 在代码提示AS默认的快捷 ...

  3. 【转载】Android开源：数据库ORM框架GreenDao学习心得及使用总结

    转载链接:http://www.it165.net/pro/html/201401/9026.html 最近在对开发项目的性能进行优化.由于项目里涉及了大量的缓存处理和数据库运用,需要对数据库进行频繁 ...

  4. apache 支持 php

    找到 httpd 的配置文件:一般在 /etc/httpd/conf 编辑:vi httpd.conf 配置 httpd.conf 让apache支持PHP: # vi /usr/local/apac ...

  5. The Highest Mark(01背包)

    The Highest Mark Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Other ...

  6. linux核心之进程管理

    进程就是处于执行期的程序(目标码存放在某中介质上).进程并不仅仅局限于一段可执行程序代码,通常还包括其他资源,例如打开的文件,挂起的信号,内核内部数据,处理器状态,一个或多个具有内存映射的内存地址空间 ...

  7. js发送post请求下载文件

    大家都知道ajax是不能直接下载文件的,所以一般都是通过一个超链接的形式去下载一个文件 但是当牵扯到需要发送很多数据到服务器上再下载的时候超链接的形式就有些太过勉强了 如下是一个工具方法(依赖jque ...

  8. SQL Server 2012学习笔记 1 命令行安装

    setup.exe /Q /IACCEPTSQLSERVERLICENSETERMS /ACTION=install /PID=748RB-X4T6B-MRM7V-RTVFF-CHC8H /FEATU ...

  9. Problem A: A + B

    Problem A: A + BTime Limit: 1 Sec Memory Limit: 128 MBSubmit: 17 Solved: 10[Submit][Status][Web Boar ...

  10. 实时消息传输协议 RTMP(Real Time Messaging Protocol)

    实时消息传输协议(RTMP)最初是由 Macromedia 为互联网上 Flash player 和服务器之间传输音频.视频以及数据流而开发的一个私有协议.Adobe 收购 Macromedia 购以 ...