preface

有时候我们在前端写jquery的时候,会自己自定义些方法,这样可以不需要重复造轮子。先说说2种自定义方法的区别:

  1. 不跟在选择器后面的
  2. 跟在选择器后面的。

那下面说说如何自定义jquery方法。

使用extend方法来扩展

方法1

下面这样方式来扩展jquery的方法是不能在前面添加选择器的,直接调用方法即可。

代码如下:

<script src="jquery-2.2.3.js"></script>
<script>
jQuery.extend({
wocao: function () { //wocao为方法名,与function用冒号隔开
return "艹"
},
}); var ret = $.wocao(); // 调用刚才的方法
alert(ret) </script>

方法2

这个方法在jQuery和extend之间添加了fn,表示可以跟在选择器之后。如下面所示:

<script src="jquery-2.2.3.js"></script>
<script>
jQuery.fn.extend({
fuck:function () {
return 'hehe'
},
}) var nid = $('h1').fuck(); // 添加了fn,就可以跟在选择器之后,那么下面alert才能出来。
alert(nid)
</script>

自执行函数与jqueyr自定义的方法

我们自定义的方法通常是放在一个js文件里,所以这又涉及到,当别人引用你这个js脚本时,就要通过自执行函数来完成自定义方法的初始化工作。下面请看例子:

我们新建的一个js文件,文件名是selfdefine.js,文件代码如下:

/**
* Created by Leo on 2016/12/21.
*/ (function(arg){
arg.extend({
wocao: function () {
return "艹"
},
}); arg.fn.extend({
fuck:function () {
return 'hehe'
},
});
})(jQuery);

然后在另一个html引用这个js脚本

<script src="jquery-2.2.3.js"></script>
<script src="selfdefine.js"></script>
<script>
var he = $.wocao();
alert(he)
var nid = $('h1').fuck();
alert(nid)
</script>

访问这个html页面,能够弹框出来。

使用案例:

我们前端需要验证用户输入的IP,以及其他字段,由于第三方的插件看的眼花缭乱,且用起来嫌麻烦,所以呢我们在这里可以自定义jquery的方法来实现对用户输入的验证,我这里是自己单独写的一个js文件,需要调用里面的方法时候,我们首先在html页面引入,代码如下:

    <script src="/static/js/selfdefine.js" type="text/javascript"></script>

其次再看自定义的js文件代码:

/**
* Created by Leo on 17-3-23.
*/ (function(arg) {
arg.extend({
checkip: function (value) { // 对传入的值 进行校验,判断是否满足IP
return /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(value);
}
}); arg.extend({
checkNum: function (value) { // 判断是否为正整数
return /^[0-9]*[1-9][0-9]*$/.test(Number(value))
}
}) arg.extend({
checkLength: function(value) { // 判断是否为空,为空返回false
if(value.length == 0 ){
return false
}else{
return true
}
}
})
})(jQuery);

然后我们看看如何使用这些方法:

我们首先需要对哪些字段检测,那么就if去判断就可以了。代码如下所示:

 if($.checkip(dns_StartIp){   // 检测指定的值是否输入正确,这个值可以从用户输入框内获取
/* logic code */
}

8 HTML&JS等前端知识系列之jquery的自定义方法的更多相关文章

  1. 5 HTML&JS等前端知识系列之jquery基础

    preface jquery其实就是对javascript的再次封装,方便我们开发者调用,下载地址是:http://jquery.com/download/ ,下面就说说常用使用方法 选择器 基本选择 ...

  2. 7 HTML&JS等前端知识系列之jquery的事件绑定

    preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...

  3. 3 HTML&JS等前端知识系列之javascript的基础

    preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...

  4. 4 HTML&JS等前端知识系列之Dom的基础

    preface 主要聊聊dom的编程,包含下面的内容: what's the dom dom选择器 innerText 替换或写入文本 value 获取input,select,textarea的值 ...

  5. 8 HTML&JS等前端知识系列之Ajax的例子

    what is ajax ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...

  6. 9 HTML&JS等前端知识系列之Ajax post请求带有token向Django请求

    我们 在母板上写入这段代码: <script type="text/javascript"> // 个人定义大函数,不是重点,可以忽略 $(document).read ...

  7. 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  8. JS前端知识模块大全

    公司前端:小胖提供,表示感谢 1. 基础 HTML, CSS, JS 文档 W3CSCHOOL: http://www.w3schools.com/ MDN: https://developer.mo ...

  9. 前端知识复习: JS选中变色

    前端知识复习:JS选中变色 上篇文章 :前端知识复习:Html DIV 图文混排(文字放在图片下边) Js选中图片效果 <!DOCTYPE html> <html xmlns=&qu ...

随机推荐

  1. ES6之const命令

    一直以来以ecma为核心的js始终没有常量的概念,es6则弥补了这一个缺陷: const foo='foo'; foo='bar';//TypeError: Assignment to constan ...

  2. 关于 Xcode8打印JSON的时候,NSLog控制台显示不完整

    看到打印结果之后  为什么只打印了一部分???为什么呢??? 我也不知道为什么,可能是xcode8的原因. 借鉴了下国外人说了,printf可以打印全,自己写了个输出宏 #ifdef DEBUG #d ...

  3. Laravel大型项目系列教程(三)之发表文章

    Laravel大型项目系列教程(三)之发表文章 一.前言 上一节教程中完成了用户管理,这节教程将大概完成发表Markdown格式文章并展示的功能. 二.Let's go 1.数据库迁移 文章模块中我们 ...

  4. 为Ubuntu的root设置密码

    问题描述:当安装好Ubuntu系统的时候,root用户没有密码,需要设置. 解决方法:

  5. jsp中的@include与jsp:include区别详解

    1 前言 搞java开发的人也许都知道在jsp中引入项目中其他文件有如下两种方式 <%@include file="xxx.jsp"%> <jsp:include ...

  6. Azure上的几个坑

    此文用于记录在使用Azure中国版时遇到的一些“坑”. 1.虚拟机备份/还原 在某些场景中,使用备份/还原功能来创建(克隆)虚拟机比使用capture的image要方便很多.虚拟机备份后,执行还原操作 ...

  7. SCNU 2015ACM新生赛初赛【1006. 3D打印】解题报告

            题目链接详见SCNU 2015新生网络赛 1006. 3D打印 .出题思路来自codevs 3288. 积木大赛,属于模拟题.         首先我们把“选择从第L部分到第R部分”理 ...

  8. [LeetCode] Third Maximum Number 第三大的数

    Given a non-empty array of integers, return the third maximum number in this array. If it does not e ...

  9. [LeetCode] Combination Sum II 组合之和之二

    Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...

  10. NPOI操作EXCEL(四)——反射机制批量导出excel文件

    前面我们已经实现了反射机制进行excel表格数据的解析,既然有上传就得有下载,我们再来写一个通用的导出方法,利用反射机制实现对系统所有数据列表的筛选结果导出excel功能. 我们来构想一下这样一个画面 ...