jQuery继承extend用法详解


Posted in Javascript onOctober 10, 2016

本文实例为大家jQuery继承extend用法,供大家参考,具体内容如下

js代码

//直接基于jQuery的扩展,判断是否为空 
$.isBlank = function(obj){ 
  return(typeof(obj)=='undefined'||obj==''||obj==null); 
 } 
//直接基于jQuery的扩展,去除html标签,保留内容 
 $.htmlContent = function(tag){ 
  var reTag = /<(?:.|\s)*?>/g; 
  return tag.replace(reTag,""); 
 } 
//直接基于jQuery的扩展(方式二) 
$.xy = { 
sayhello:function(){return "hello";}, 
saybaybay:function(){return "baybay";} 
}; 
//jQuery类级别的扩展 
$.extend({ 
add:function(a,b){return a+b;}, 
diff:function(a,b){return a-b} 
}); 
//jQuery对象级别的扩展 
$.fn.extend({ 
 getvalue:function(){ 
 return this.val(); 
  } 
 });

html代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
 <base href="<%=basePath%>"> 
  
 <title>My JSP 'index.jsp' starting page</title> 
 <meta http-equiv="pragma" content="no-cache"> 
 <meta http-equiv="cache-control" content="no-cache"> 
 <meta http-equiv="expires" content="0">  
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
 <meta http-equiv="description" content="This is my page"> 
 <!-- 
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 --> 
  
 <script type="text/javascript" src="jquery-1.7.js"></script> 
 <script type="text/javascript" src="jquery-1.7.min.js"></script> 
 <script type="text/javascript" src="my.js"></script> 
 <script type="text/javascript"> 
 $(function(){ 
  var br = $("<br/>"); 
  $(".myspan").append(br); 
 }) 
 </script> 
 </head> 
 <body> 
 <script type="text/javascript"> 
  document.write("判断是否为空:"+$.isBlank(null)); 
 </script> 
 <span class="myspan"></span> 
 <script type="text/javascript"> 
  document.write("过滤html标签:"+$.htmlContent("<html><body><a id='a1'>a标签</a><div style='width:100%'>div标签</div>内容</body></html>")+"<br/>"); 
  document.write("扩展自jQuery类的xy的sayhello方法:"+ $.xy.sayhello()+"</br>"); 
  document.write("扩展自jQuery类的xy的sayhello方法:"+ $.xy.saybaybay()+"</br>"); 
  document.write("基于jQuery类的add法:"+ $.add(3,5)+"</br>"); 
  document.write("基于jQuery类的diff法:"+ $.diff(5,3)+"</br>"); 
  document.write("基于自jQuery类对象的扩展getvalue():"+$("<input type='text' value='str' />").getvalue()+"<br/>"); 
 </script> 
 </body> 
</html>

输出

jQuery继承extend用法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 #Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 #Javascript
JS命令模式例子之菜单程序
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 #Javascript
You might like
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
Python单元测试框架unittest简明使用实例
2015/04/13 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
Python ORM编程基础示例
2020/02/02 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
天网工程实施方案
2014/03/26 职场文书
初中学生期末评语
2014/04/24 职场文书
医院义诊活动总结
2014/07/04 职场文书
项目建议书
2015/02/04 职场文书
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js
Python OpenGL基本配置方式
2022/05/20 Python
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript