之前例子是扩展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. SMT贴片红胶基本知识

    SMT贴片红胶是一种聚稀化合物,与锡膏不同的是其受热后便固化,其凝固点温度为150℃,这时,红胶开始由膏状体直接变成固体. SMT贴片机装贴贴片具有粘度流动性,温度特性,润湿特性等.根据红胶的这个特性 ...

  2. 转:trie树--详解

    前几天学习了并查集和trie树,这里总结一下trie. 本文讨论一棵最简单的trie树,基于英文26个字母组成的字符串,讨论插入字符串.判断前缀是否存在.查找字符串等基本操作:至于trie树的删除单个 ...

  3. sicily-1029 Rabbit

    一．      题意(0.04s) 每一对成熟的兔子可以生一对兔子,兔子在m个月之后成熟,假设兔子都不会死,计算d个月后一共有多少只兔子. 二．      要高精度加法(用string) 三．     ...

  4. ListBox控件的操作与实现

    .NET FrameWork>參考>类库>System.Windows.Forms>ListBox类的属性 1. 属性列表:     SelectionMode     组件中 ...

  5. JSP页面中包含文件

    在JSP中,主要有3种功能可以将外部内容包含到JSP文档中jsp:include动作. jsp:include动作允许我们在请求期间将其他页面的输出包含进来.它的主要优点是:在被包含的页面发生更改时, ...

  6. ADO接口

    转自百度文库 ADO中最重要的对象有三个:Connection.Recordset和Command,分别表示连接对象.记录集对象和命令对象. 三个对象对应的智能指针分别是:_ConnectionPtr ...

  7. codeforces 400E. Inna and Binary Logic 线段树

    题目链接 给出n个数, 定义a[1][i]为这初始的n个数, 然后a[i][j] = a[i-1][j]&a[i-1][j-1], 这样就可以得到一个三角形一共n*(n-1)/2个数. 给出一 ...

  8. 在raw_input()中使用中文提示，在CMD下中文乱码问题解决。。。

    错误的程序及结果: 解决1: guess = int(raw_input('请输入一个整数:'.decode('utf-8').encode('gbk'))) 解决2: guess = int(raw ...

  9. linux和windows的文件互传

    Linux →→→Windows 1.使用secureCRT:下载文件只需在shell终端仿真器中输入命令"sz 文件名",即可利用Zmodem将文件下载到本地某目录下. 2. s ...

  10. win7下文件名不能定义为con（任何文件格式）

    从linux传输压缩包到win7下解压缩,总是提示出错,可是在linux下解压都很正常,于是定位出错的文件,发现是con.c和con.h文件,经排查,原因如下: CON是DOS下的特殊设备名 如下由系 ...