JQ插件写法 扩展JQ方法
目录:
1.基本JQ扩展插件js的格式
2.对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法,与.click()同理
3.对JQ自身的方法扩展,调用类似于$.ajax();
一、基本JQ扩展插件的格式
一个扩展插件的格式一般是:
(function($){.........})(jQuery); 当然,为了防止压缩合并等操作时,它前面的js代码没有结束分号而引起错误,这里可以在前面加个;就是: ;(function($){.........})(jQuery); 传入参数可以有多个,比如: ;(function($, window,document,undefined){.........})(jQuery,window, document);
引用这种写法的插件时,务必要在引入jquery本身之后,再引入插件。
二、对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod()
类似于.click(),.show()这种调用方式的方法。。属于对jQuery.fn的扩展,所以,扩展自己的方法,这样写:
$.fn.extend({
myMethod: function () {
//用this可以拿到调用该方法的jq dom元素
//do your work
}
});
或者:
$.fn.myMethod = function(){
//用this可以拿到调用该方法的jq dom元素
//do your work
}; $("#dd").click();
例如:
封装一个方法:alertWhileClick,点击input时控制台打印出当前input输入框的内容
$.fn.alertWhileClick = function(){
$(this).click(function () {
console.log($(this).val());
});
调用:
$("#demo1Input").alertWhileClick();
试一下:
https://hamupp.github.io/gitblog/app/jquery/extendDemo.html
二、对JQ自身的扩展,调用如$.ajax()
$.extend({
myMethod: function (param1, param2....需要传入的参数) {
//do your work }
});
例如扩展一个得到最大最小值的方法:
$.extend({
min: function (a, b) {
//do your work
return a < b ? a : b;
},
max: function (a, b) {
return a > b ? a : b;
}
});
调用如下:
var result = $.max(10,20);//得到10和20中最大的树
JQ插件写法 扩展JQ方法的更多相关文章
- jq插件写法
如今做web开发,jQuery 几乎是必不可少的,同时jquery插件也是不断的被大家所熟知,以及运用.最近在搞这个jquery插件,发现它的牛逼之处,所以讲一讲jQuery插件的写法以及使用 (f ...
- jq 插件写法
1.一次声明一个函数 $.fn.函数名 = function([options]){} $.fn.red=function(options){ var defaults = { 'color': 'r ...
- css/jq--弹窗写法介绍,jq插件介绍
//html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系
利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...
- JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)
前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下: 一.fla ...
- 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件
前 言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...
- 创建jq插件步骤
无意看了这篇<jQuery插件开发精品教程,让你的jQuery提升一个台阶>文章,现在做一下总结. 一.jQuery插件的创建可以有三种方法 1.通过$.extend()来扩展jQuery ...
- 怎么写jq插件?
1.概述 先看看html代码 <ul id="catagory"> <li><a href="#">jQuery</a ...
- jq插件处女座 图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...
随机推荐
- Linux mysql 添加远程连接
方法/步骤 第一步 远程连接上Linux系统,确保Linux系统已经安装上了MySQL数据库.登陆数据库. mysql -u$user -p $pwd 第二步 创建用户用来远程连接 GRANT ALL ...
- 通过java代码对kylin进行cube build
转:http://www.cnblogs.com/hark0623/p/5580632.html 通常是用于增量 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 ...
- c++ 返回指定元素连续相等的位置索引(equal_range)
#include <iostream> // cout #include <algorithm> // equal_range, sort #include <vecto ...
- 团队项目用户验收评审——《WAP团队》
团队项目用户验收评审——<WAP团队> 1.验收准备的相关文档链接:https://github.com/LVowe999/xiangmubaogao.git ...
- 对 Kotlin 与 Java 编程语言的思考
从长远来看,排名前10的也基本上是Java.C.C++.Python.C#.VB.PHP.JavaScript.至于Kotlin的排名,11月份在编程语言仅排41名,Ratings仅有0.216%. ...
- a 样式重置 常见用法
样式重置 a:link, a:visited, a:hover, a:active{ color: #fff; text-decoration: none; } 常见用法 ( rel=& ...
- Android JNI学习(四)——JNI的常用方法的中文API
本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...
- Codeforces 847I - Noise Level
847I - Noise Level 思路:bfs. 代码: #include<bits/stdc++.h> using namespace std; #define ll long lo ...
- Confluence 6 管理多目录
这个页面描述了如果在 Confluence 中定义了多个目录服务器将会发生什么样的情况.例如你可能会有一个内部目录服务器同时你还可能有连接一个 LDAP 外部服务器或者使用多种类型的其他用户目录.当你 ...
- Java基础-封装(09)
通过对象直接访问成员变量,会存在数据安全问题(比如年龄不能为负).这个时候,我们就不能让外界的对象直接访问成员变量. private关键字 是一个权限修饰符.可以修饰成员(成员变量和成员方法)被pri ...