jQuery $.fn.extend方式自定义插件
之前例子是扩展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方式自定义插件的更多相关文章
- jQuery $.fn.extend()方法类插件
一.为JQuery原型扩展新的属性和方法,然后在JQuery的实例对象上调用 在 jQuery 中,我们可以使用$.fn.extend()方法来定义一个方法类插件.方法类插件就是首先你使用 jQuer ...
- 理解jquery的$.extend()、$.fn.extend()【jQuery插件机制】
/** * 操作数据 | DOM 操作 * @description jQuery类添加类方法,可以理解为添加静态方法,将一个或多个对象的内容合并到目标对象 * @use $.fn.zhang() | ...
- 理解jQuery的$.extend与$.fn.extend
https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...
- jQuery开发自定义插件 $.extend()与$.fn.extend()
jQuery extend()和jQuery.fn.extend() jQuery提供两个用于封装扩展的方法: 1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直 ...
- Jquery自定义插件之$.extend()、$.fn和$.fn.extend()
jquery插件的种类: 1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent().appendTo() 2.一种是类级别的插件开发,即给jQuery添加新的全局 ...
- jquery插件之jquery.extend和jquery.fn.extend的区别
jquery.extend jquery.extend(),是拓展jquery这个类,即可以看作是jquery这个类本身的静态方法,例如: <!DOCTYPE html> <html ...
- jQuery 第九章 工具方法之插件扩展 $.extend() 和 $.fn.extend()
$.extend() $.fn.extend() -------------------------------------------------- $.extend() 插件扩展(工具方法) jq ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- 利用jQuery对插件进行扩展时，方法$.extend()、$.fn.extend()区别与联系
利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...
随机推荐
- HDU 5054 Alice and Bob
#include <cstdio> int main(){ int n,m,x,y; while(~scanf("%d%d%d%d",&n,&m,&am ...
- Cocos2d-x：环境配置小节
一.准备 须要下载下面内容. 1. vs2010 下载地址:http://download.microsoft.com/download/1/4/3/143B7583-6225-474F-88D5-5 ...
- js小写转实现资本,js数字革命万元
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <hea ...
- ios数组基本用法和排序
1.创建数组 // 创建一个空的数组 NSArray *array = [NSArray array]; // 创建有1个元素的数组 array = [NSArray arrayWithObject: ...
- Javascript对象的声明
JavaScript 对象 对象由花括号分隔.在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义.属性由逗号分隔: var person={firstname:" ...
- XGPush集成（信鸽集成）demo
#import "AppDelegate.h" #import "XGPush.h" #import "XGSetting.h" #defi ...
- eclipse中tomcat启动项目 修改java代码不重启服务
1.双击tomcat 2.选择modules 3.选中项目点击edit 4.去掉勾.去除auto reloading enabled 的选中 ,点击OK,
- BZOJ 1050 旅行comf
题目如下: 题目描述 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求一条路径,使得路径上最大边 ...
- psycopg2接口的基本用法
转载自:http://zhiwei.li/text/2012/02/05/psycopg2接口的基本用法/ 与其他实现了DB API 2.0协议的其他数据库用户基本一致. import psycopg ...
- mybatis字段名与类属性名不相同的冲突
新建一个表 CREATE TABLE orders( order_id INT PRIMARY KEY AUTO_INCREMENT, order_no ), order_price FLOAT ); ...