黑马day18 JQuery自定义插件
2015-07-16 09:44
661 查看
说明:使用JQuery中的JQuery.extend({//这里是json格式的数据});可以定义一个全局函数
使用JQuery中的JQuery.fn.extend({//这里是json格式的数据});可以定义一个局部函数
1.定义全局函数(来判断两个输入的数字的最大值和最小值)
test.html
结果演示:
2.自定义局部函数(提示当前元素中value的值)
test.html
使用JQuery中的JQuery.fn.extend({//这里是json格式的数据});可以定义一个局部函数
1.定义全局函数(来判断两个输入的数字的最大值和最小值)
test.html
<!DOCTYPE html> <html> <head> <title>test.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入jQuery文件 --> <script src="../../js/jquery-1.4.2.js"></script> <!-- 引入jQuery的插件文件 --> <script src="test.js"></script> </head> <script type="text/javascript"> $(function(){ $("input").click(function(){ var a=prompt("请输入一个数字"); var b=prompt("请输入一个数字"); var min=$.minValue(a,b); var max=$.maxValue(a,b); alert("最大值是"+max+"最小值是"+min); }); }) </script> <body> <input type="button" value="jQuery插件扩展测试"> </body> </html>test.js
jQuery.extend({ minValue:function(a,b){ return a<b?a:b; }, maxValue :function(a,b){ return a>b?a:b; } });
结果演示:
2.自定义局部函数(提示当前元素中value的值)
test.html
<!DOCTYPE html> <html> <head> <title>test.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../../js/jquery-1.4.2.js"></script> <script src="test.js"></script> </head> <script type="text/javascript"> $(function(){ $("input").click(function(){ //this指代页面元素input标签 $(this).test(); }); }) </script> <body> <input type="button" value="jQuery插件扩展测试"> </body> </html>test.js
////测试extend()方法 jQuery.fn.extend({ test : function(){ //谁调用test()方法,打印谁的value属性值 //this指代DOM对象还是jQuery对象?jQuery对象 //jQuery对象是数组对象,数组可以遍历 $.each(this,function(){ alert($(this).val()); }); } });结果演示:
相关文章推荐
- jQuery之常用且重要方法
- jquery 获取自定义属性(attr 和 prop的区别)
- jquery + javascript table表格 动态添加删除
- jQuery实现定时读取分析xml文件的方法
- 基于jQuery适合做图片类网站的特效
- jQuery实现定时读取分析xml文件的方法
- jQuery时间轴插件使用详解
- Jquery小知识
- ASP.NET 异步Web API + jQuery Ajax 文件上传代码小析
- jquery 连接在div中显示
- jQuery提交form表单
- jQuery提交form表单
- jQuery提交form表单
- jquery中的$(function(){});函数
- jQuery提取元数据Metadata插件
- jQuery使用技巧
- Jquery 插件集合
- 黑马day18 jquery高级特性&ajax的$.ajax()方法
- 黑马day18 jquery高级特性&Ajax的load方法
- 在jquery中用下拉框列表显示默认的值