其他

今天在slideshare上看到一個有關瀏覽器解析和渲染的技術分享，感覺不錯，所以想寫些東西，總結一下順便加深印象。這屬於前端效能範疇，對此感興趣的朋友有兩本書值得一看：《high performance javascript》和《even faster

今天稍微研究了下textarea隨輸入內容自動成長的功能，通過google參考了一些實現方式。其中大部分是靠scrollHeight(非W3C標準，由IE引入)，keyup事件來完成。有一種比較有意思的是 通過“鏡像元素(mirror element)”, 和setTimeout輪詢實現。大致的實現思路如下:把一個單獨的pre元素，通過position:absolute的方式定位於client

用mootools做項目的過程中發現了mootools fade方法一個比較隱秘的問題. 我們先來還原一下問題出現的情境:<div id="main1">test1</div><button id="fade1">fade1</button>$('fade1').addEvent('click', function() {$('main1').set('tween', {duration: 300,onComplete: function(el)

在IE8以及之前的版本中如果用instanceof不當的話，會導致一定的記憶體溢出問題。有至少3個類別的對象會導致內出溢出問題，分別是：window，document，element。來個最直接的例子：if(window instanceof Object)這樣的操作能造成記憶體溢出。並且每重新整理一次頁面 增長50kb，原因在於這3種對象在IE8及之前版本中並不是真正的對象(他們沒有建構函式)，同樣地原因他們沒有本機物件（native object）的方法：hasOwnProperty,

github上關於mootools一個issue的討論很有意思，所以就想測試記錄下。感興趣的可以點擊原頁面看看。這個問題來自IE(LTE8)中對checkbox和radio

文章目錄 strict 模式(Strict Mode)JSON ECMAScript5 規範自推出以來, 對javascript的發展產生了蠻大的影響。這篇文章是我翻譯自John Resig(jQuery作者)的一篇博文《ECMAScript 5 Strict Mode, JSON, and More》之前我分析了ES5的對象和屬性系統。這是這門語言的一大亮點。同樣有許多其他新特性和API也需要我們注意。最主要的有strict

感覺自己以前寫得那些jquery小外掛程式，組織形式不是很好。看到jquery官網有一篇關於 jquery plugin最佳實務的文章。 覺得有所收穫，就寫了個progressbar外掛程式來做個練習。代碼如下，邏輯很簡單：/** * jquery progressbar plugin * author: Andrew * date: 2011-09-25 * version: 1.0.0 */;(function($) {// all plugin method //

文章目錄 標籤形式如下: 關於script的load事件不管是以標籤形式,還是以Dom對象的形式,我們都能很好的利用其load事件來做些對於此指令碼的初始化工作或者別的一些有意義的事情.目前IE9+, Chrome, Firefox都已支援script的load事件,對於IE6~8的版本,我們可以用其特有的onreadystatechange事件來做同樣的事情下面給出例子,並做一些說明.標籤形式如下:正如你看到的,這種使用方式很簡單,

任務需要,就寫了一個jQuery新聞滾動外掛程式jquery.roller.js,功能相對比較簡單,可能往後會加入ajax一段時間輪詢動態載入的功能.下面直接給出原始碼,如果需要可以直接下載 ,我在源碼裡給出了注釋,有什麼不足之處後或者可以改進的地方,希望能夠大家留言探討...(比較樸素):;(function($) {$.fn.roller = function(options) {var opts = $.extend({}, $.fn.roller.defaults, options),

setTimeout和setInterval這兩個函數, 大家肯定都不陌生, 但可能並不是每個用過這兩個方法的同學, 都瞭解其內部的實質, 甚至可能會錯誤的把兩個實現定時調用的函數理解成了類似thread一樣的東西, 認為會在一個時間片內, 並發的執行調用的函數, 似乎很好很強大, 但其實並不是如此, 實際的情況是javascript都是以單線程的方式運行於瀏覽器的javascript引擎中的,

     剛進公司不久,新人的任務也不是很多.今天用閒置時間寫了兩個不同樣式的導覽功能表,一個豎的,一個橫的,話不多說直接給出代碼,如果css或jquery有用的不到位之處,請看貼的園友們指出,共同進步.豎嚮導航菜單:    CSS如下navigation.css #navigation {width:200px;}#navigation ul {list-style:none;margin:0;padding:0;}#navigation li {border-bottom:1px

最近在看有關提高website效能的書，個人覺得挺不錯的兩本書：<<high performance websites>><<even faster

讓我們看下面一段html：<section><p>Little</p><p>Piggy</p> <!-- 定位此元素--></section>下面的2種寫法都可以達到目的p:nth-child(2) { color: red;}p:nth-of-type(2) { color: red;}但兩者是存在差異的:nth-child

文章目錄 async - html代碼defer - html代碼async & defer - 它們的區別是什麼目前哪些瀏覽器支援defer和async1.無defer和async屬性2.都給上defer屬性3.部分給上defer屬性4.都給上async屬性5.部分給async屬性

雖說js架構到處都是, 都封裝了很多實用的功能,能快速的讓我們實現如動畫,元素拖拽等功能, 不過由於好奇心的驅使, 有時想一探究竟, 看看一些功能是如何?的, 當然我們可以研究js庫的源碼, 也可以自己去發明輪子試試看, 其過程還是挺有趣的...下面我就來實現下頁面元素的拖拽功能 Handle現在就開始著手實現, 讓我們從最頂層的方法講起, 它用於初始化一個drag object, 方法的聲明如下function DragObject(cfg)這裡的cfg我們用一個對象來傳入,

昨天看到一個園友的blog中有個頁面下滾後出現用於"回到頁面頂部"按鈕的效果, 感覺挺不錯的, 所以自己也寫了一個, 用jQuery寫是再簡單不過了.下面就直接給出代碼了.scroll-up {background: #dcdcdc url('up.png') no-repeat center center;width:48px !important; /*for ff and other standard browser*/height:48px !important;_width:

今天小試一下html5中引入的localStorage特性(後來查了下localStorage應該是W3C中Web Storage的一部分,而不是Html5), 這個特性在IE8+中也已支援,其他的瀏覽器應該都已支援(像chrome, firefox一般都會自動升級到最新). 在學習的過程中也參考了一些文章,比如Diveintohtml5系列和 html5demos系列.總之網上的資源還是很多的.下面就拿出我比較簡單的測試代碼來 說明一下.首先來段工具代碼,

正好項目中有個小需求, 要求把表格指定列中內容相同的儲存格進行合并,本質上涉及的就是td的rowspan屬性, 數出含相同內容儲存格的個數, 然後給第一個與上一行內容不同的td其rowspan屬性附上正確的值即可, 為了能直觀的理解,

之前用jquery實現了一個簡單的AjaxQueue，用於管理ajax請求的發送順序。假期裡沒事就想著改進下，改得地方不多，主要有以下三點：complete回調在jquery1.5以後可以是一個函數數組，按數組順序調用。如果前一個請求未返回，新的請求發出，那麼撤銷前一個請求，也就是新的請求“覆蓋”原請求。寫成物件導向的形式，再用一個AjaxManage進行簡單的管理。代碼如下，詳細可看注釋：;(function($) { //

手頭不是很忙，突然想到了ajax queue這個概念，之前貌似有看技術文章中提到過這個，就想著用jquery來實現一下，思想比較簡單，沒什麼複雜的東西，就是用個array對象來做隊列，維護ajax請求的順序。下面給出代碼：;(function($) { $.ajaxQueue = { // 管理ajax請求的隊列 requests: new Array(), // 把待發送的ajax請求排入佇列 offer: