之前例子是扩展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. hdu4491 Windmill Animation (几何)

    Windmill Animation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  2. 移动mmbilling似乎有个BUG，通过JNI调用会抛出异常

    有人用JNI调用过mm么?不知道你成功了没有,我试了多种方法,有一个错误始终存在,怀疑上个BUG.使用方式: 通过NativeActivity的clazz获取ClassLoader,然后找到mm.pu ...

  3. 发送请求工具—Advanced REST Client

    Advanced REST Client是Chrome浏览器下的一个插件,通过它能够发送http.https.WebSocket请求.在Chrome商店下搜索Advanced REST Client, ...

  4. php使用mysql扩展库链接mysql数据库（查询）

    php链接数据库可以使用mysql扩展库,mysqli,pdo这几种方式,相比java而言要麻烦一点,因为它不像java那么统一.从代码的难易程度来说php的确要简单许多.步骤大体如下 1.打开数据库 ...

  5. Java基础：容器

    转载请注明出处:jiq•钦's technical Blog 一.Collection:存放独立元素 Collection中的接口都是可选操作,事实上现类 并不一定实现了其全部接口,这是为了防止&qu ...

  6. java String.Format详解

    JDK1.5中,String类新增了一个很有用的静态方法String.format(): format(Locale l, String format, Object... args) 使用指定的语言 ...

  7. Android 动画animation 深入分析

    转载请注明出处:http://blog.csdn.net/farmer_cc/article/details/18259117 Android 动画animation 深入分析 前言:本文试图通过分析 ...

  8. java内存映射文件

    内存映射文件能够让我们创建和修改大文件(大到内存无法读入得文件),对于内存映射文件,我们可以认为是文件已经全部被读入到内存当中,然后当成一个大的数字来访问,简化修改文件的代码. 1.directBuf ...

  9. #ifndef 与 #program once 的区别（转）

    转自http://hi.baidu.com/hrx20091001/item/ee70f7cc6d036d4ea9ba94e0 #ifndef 与 #program once 的区别 为了避免同一个文 ...

  10. [一个经典的多线程同步问题]解决方案一：关键段CS

    前面提出了一个经典的多线程同步互斥问题,本篇将用关键段CRITICAL_SECTION来尝试解决这个问题. 本文先介绍如何使用关键段,然后再深层次的分析下关键段的实现机制和原理. 关键段CRITICA ...