JQuery扩展对象方法操作示例
网络编程 2021-07-04 16:46www.168986.cn编程入门
这篇文章主要介绍了JQuery扩展对象方法操作,结合实例形式简单分析了jQuery使用$.fn.extend方法扩展对象方法的相关操作技巧,需要的朋友可以参考下
本文实例讲述了JQuery扩展对象方法操作。分享给大家供大家参考,具体如下
应项目需求,对JQuery进行了一个扩展,需求如下
项目中需要在浏览器右下角提示操作错误和系统提示内容,并有滑动移出和关闭的效果,所以自己写了一个效果还可以的弹出框来。就是给JQuery添加了一个方法ShowMsg。
先上代码
$.fn.extend({ ShowMsg: function (width, height, msgTitle_, msgContent_) { var TopY = 0; //初始化元素距父元素的距离 $("#messageTitle").html(msgTitle_); $("#messageResDes").html(msgContent_); $(this).css("width", width + "px").css("height", height + "px"); //设置消息框的大小 $(this).slideDown(1000); //弹出 $("#messageTool").css("margin-", -height); //为内容部分创建高度 溢出 $("#message_close").click(function () {//当点击关闭按钮的时候 if (TopY == 0) { $("#message").slideUp(1000); //这里之所以用slideUp是为了兼用Firefox浏览器 } else { $("#message").animate({ : TopY + height }, "slow", function () { $("#message").hide(); }); //当TopY不等于0时 ie下和Firefox效果一样 } return false; }); $(window).scroll(function () { $("#message").css("", $(window).scrollTop() + $(window).height() - $("#message").height()); //当滚动条滚动的时候始终在屏幕的右下角 TopY = $("#message").offset().; //当滚动条滚动的时候随时设置元素距父原素距离 }); setTimeout(function () { if (TopY == 0) { $("#message").slideUp(1000); //这里之所以用slideUp是为了兼用Firefox浏览器 } else { $("#message").animate({ : TopY + height }, "slow", function () { $("#message").hide(); }); //当TopY不等于0时 ie下和Firefox效果一样 } return false; }, 8000); //8s后自动滑动关闭 } })
代码一目了然,注释很清楚。狼蚁网站SEO优化呢,主要说下怎样对JQuery进行扩展吧。
上面的扩展我用了 $.fn.extend
进行了扩展,是对JQuery的原生对象进行了方法的扩展,JQuery的扩展主要分为对JQuery本身类进行扩展(JQuery.extend
)和对对象的进行方法扩展($.fn.extend
)。狼蚁网站SEO优化分作说明
1、用JQuery.extent
对JQuery本身进行扩展
JQuery.extend({ showInfor:function(0{ //do something } });
怎么用上面这个呢,看狼蚁网站SEO优化
$.showInfor();//这样就调用到了
2、用$.fn.extend
进行方法扩展
本文开始使用例子就是,狼蚁网站SEO优化直接看调用方法
$("#messageBox").ShowMsg(230,100,"系统提示","提示信息");
说明$.fn.extend
是给JQuery的所有对象进行扩展方法,即只要JQuery可以定位到的对象,都可以使用这个方法。所以只要先定位到改对象,直接调用即可。
更多关于jQuery相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
上一篇:js实现轮播图的完整代码
下一篇:详解Vue结合后台的列表增删改案例
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程