8 HTML&JS等前端知识系列之jquery的自定义方法
preface
有时候我们在前端写jquery的时候,会自己自定义些方法,这样可以不需要重复造轮子。先说说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的自定义方法的更多相关文章
- 5 HTML&JS等前端知识系列之jquery基础
preface jquery其实就是对javascript的再次封装,方便我们开发者调用,下载地址是:http://jquery.com/download/ ,下面就说说常用使用方法 选择器 基本选择 ...
- 7 HTML&JS等前端知识系列之jquery的事件绑定
preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...
- 3 HTML&JS等前端知识系列之javascript的基础
preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...
- 4 HTML&JS等前端知识系列之Dom的基础
preface 主要聊聊dom的编程,包含下面的内容: what's the dom dom选择器 innerText 替换或写入文本 value 获取input,select,textarea的值 ...
- 8 HTML&JS等前端知识系列之Ajax的例子
what is ajax ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...
- 9 HTML&JS等前端知识系列之Ajax post请求带有token向Django请求
我们 在母板上写入这段代码: <script type="text/javascript"> // 个人定义大函数,不是重点,可以忽略 $(document).read ...
- 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app
大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...
- JS前端知识模块大全
公司前端:小胖提供,表示感谢 1. 基础 HTML, CSS, JS 文档 W3CSCHOOL: http://www.w3schools.com/ MDN: https://developer.mo ...
- 前端知识复习: JS选中变色
前端知识复习:JS选中变色 上篇文章 :前端知识复习:Html DIV 图文混排(文字放在图片下边) Js选中图片效果 <!DOCTYPE html> <html xmlns=&qu ...
随机推荐
- ES6之const命令
一直以来以ecma为核心的js始终没有常量的概念,es6则弥补了这一个缺陷: const foo='foo'; foo='bar';//TypeError: Assignment to constan ...
- 关于 Xcode8打印JSON的时候,NSLog控制台显示不完整
看到打印结果之后 为什么只打印了一部分???为什么呢??? 我也不知道为什么,可能是xcode8的原因. 借鉴了下国外人说了,printf可以打印全,自己写了个输出宏 #ifdef DEBUG #d ...
- Laravel大型项目系列教程(三)之发表文章
Laravel大型项目系列教程(三)之发表文章 一.前言 上一节教程中完成了用户管理,这节教程将大概完成发表Markdown格式文章并展示的功能. 二.Let's go 1.数据库迁移 文章模块中我们 ...
- 为Ubuntu的root设置密码
问题描述:当安装好Ubuntu系统的时候,root用户没有密码,需要设置. 解决方法:
- jsp中的@include与jsp:include区别详解
1 前言 搞java开发的人也许都知道在jsp中引入项目中其他文件有如下两种方式 <%@include file="xxx.jsp"%> <jsp:include ...
- Azure上的几个坑
此文用于记录在使用Azure中国版时遇到的一些“坑”. 1.虚拟机备份/还原 在某些场景中,使用备份/还原功能来创建(克隆)虚拟机比使用capture的image要方便很多.虚拟机备份后,执行还原操作 ...
- SCNU 2015ACM新生赛初赛【1006. 3D打印】解题报告
题目链接详见SCNU 2015新生网络赛 1006. 3D打印 .出题思路来自codevs 3288. 积木大赛,属于模拟题. 首先我们把“选择从第L部分到第R部分”理 ...
- [LeetCode] Third Maximum Number 第三大的数
Given a non-empty array of integers, return the third maximum number in this array. If it does not e ...
- [LeetCode] Combination Sum II 组合之和之二
Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...
- NPOI操作EXCEL(四)——反射机制批量导出excel文件
前面我们已经实现了反射机制进行excel表格数据的解析,既然有上传就得有下载,我们再来写一个通用的导出方法,利用反射机制实现对系统所有数据列表的筛选结果导出excel功能. 我们来构想一下这样一个画面 ...