JQuery是一款廣泛應用于網頁前端的Javascript庫。其中,JQuery CSS模塊的源碼很是精簡而便于解析。
首先,我們來看一個簡單的代碼片段:
$('h1').addClass('blue');
這個代碼的功能是給頁面中所有的<h1>元素加上一個類名為"blue"的class屬性。讓我們來看一下這段代碼的實現:
addClass: function(value) { var classes, elem, cur, curValue, clazz, j, finalValue, i = 0; if (isFunction(value)) { return this.each(function(j) { jQuery(this).addClass(value.call(this, j, getClass(this))); }); } if (value && typeof value === "string") { classes = value.split(rspace); while ((elem = this[i++])) { curValue = getClass(elem); cur = elem.nodeType === 1 && (" " + stripAndCollapse(curValue) + " "); if (cur) { j = 0; while ((clazz = classes[j++])) { if (cur.indexOf(" " + clazz + " ")< 0) { cur += clazz + " "; } } finalValue = stripAndCollapse(cur); if (curValue !== finalValue) { elem.setAttribute("class", finalValue); } } } } return this; }
這個代碼使用了一個addClass方法,它的參數value表示將要添加的class,可以是一個函數或字符串。
如果傳入的是一個函數,那么會為每一個匹配元素調用該函數,并返回每一個元素添加上該函數返回的class。
如果傳入的是字符串,那么會對每一個匹配元素執行如下操作:
- 獲取當前元素已經有的class(并去除首尾的空格);
- 將傳入字符串按空格分隔成一個一個的class;
- 遍歷每一個傳入的class,如果當前元素沒有該class,則將該class加到元素的class屬性中;
- 最后將元素上class的值重新賦成當前元素加上新加的class的值。
總的來說,這個代碼很簡潔明了,易于理解。它主要分為兩部分,分別是處理傳入函數和處理傳入字符串。對于字符串的處理,這個代碼涵蓋了一站式的class操作功能,擁有一定的優化處理。
上一篇列表樣式css 搭配