當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

封装一个jquery库

發(fā)布時(shí)間：2023/12/18 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了封装一个jquery库小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

現(xiàn)在Javascript庫(kù)海量，流行的也多，比如jQuery，YUI等，雖然功能強(qiáng)大，但也是不萬(wàn)能的，功能不可能涉及方方面面，自己寫(xiě)一個(gè)的JS庫(kù)是對(duì)這些的補(bǔ)充，很多也比較實(shí)用，把應(yīng)用到項(xiàng)目中中去也比較方面，這也是對(duì)工作的一些積累，也加深對(duì)知識(shí)的理解。

1 (function(jQuery){ 2 /** 3 * 元素居中 4 * @return {[type]} 5 */ 6 jQuery.fn.mCenterDiv = function (){ 7 this.css("position", "absolute"); 8 this.css("border", "1px solid #ccc"); 9 this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px"); 10 this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px"); 11 this.show(100); 12 return this; 13 }; 14 })(jQuery);

html部分代碼:

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{width:400px;height:400px;background:pink;} 8 </style> 9 </head> 10 <body> 11 <div class="box"></div> 12 <script type="text/javascript" src="jquery.js"></script> 13 <script type="text/javascript" src="js.js"></script> 14 </body> 15 </html> 16 <script type="text/javascript"> 17 $(function(){ 18 $(".box").mCenterDiv(); 19 $(window).resize(function(){ 20 $(".box").mCenterDiv(); 21 }); 22 23 }); 24 </script>

轉(zhuǎn)載于:https://www.cnblogs.com/liubeimeng/p/5807829.html

總結(jié)

以上是生活随笔為你收集整理的封装一个jquery库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

jquery