之前例子是扩展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. underscore api 概览

    underscore 集合函数(数组或对象) _.each(list, iteratee, [context]); _.map(list, iteratee, [context]); _.reduce ...

  2. HBase ElasticSearch

    http://www.open-open.com/doc/view/c2af706064f84e128d0f74826523a1ea http://www.open-open.com/doc/view ...

  3. CentOS6.6普通用户使用sudo命令借用root用户权限

    一.描写叙述 普通用户hadoop使用:tar -xzvf ns2.35.tar.gz命令解压文件,系统提示找不到该文件,无法打开该文件夹,于是想到使用sudo命令借用root用户的权限:sudo t ...

  4. php入门微理解

    1.php是什么?(来自百度百科) php:Hypertext preprocessor(超文本预处理器).一种开源脚本语言.主要用于web开发. 2.与其它语言的关系 介于HTML和C/C++,Ja ...

  5. uploadify 使用 详细 说明

    简单 常用的 时间 有点 紧  先写 这点 ,  有时间 在更新 下面有 例子  链接 不过要 自己 摘 一下 很简单的啦   <script type="text/javascrip ...

  6. .NET WIN7+IIS 7.5下URLRewriter组件伪静态设置

    原文地址:WIN7+IIS 7.5伪静态的设置 --------------------------------------------------------偶是分割线君-------------- ...

  7. wpf 如何设置滚动条在超出范围的时候才显示？（转）

    VerticalScrollBarVisibility="Auto"  垂直自动显示 HorizontalScrollBarVisibility="Auto" ...

  8. Js闭包与循环

    目标:点击任何一个li,提示当前点击位置 <ul> <li>第1个</li> <li>第2个</li> <li>第3个</ ...

  9. js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳

    //时间格式2014-02-02 14:10:00改成时间戳 //此时构造出来的时间是:2013/03/08 00:00:00. //这样得到的是一个数值,表示的是从1970年1月1日0点0分0秒到d ...

  10. Java 重写(Override)与重载(Overload)

    1.重写(Override) 重写是子类对父类的允许访问的方法的实现过程进行重新编写!返回值和形参都不能改变.即外壳不变,核心重写! 参数列表和返回值类型必须与被重写方法相同. 访问权限必须低于父类中 ...