一.摘要

本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區(qū)分值得大家學習.

二.前言

通過前面幾章我們已經能夠完全控制jQuery包裝集了,  無論是通過選擇器選取對象, 或者從包裝集中刪除,過濾元素. 本章將講解如何使用jQuery獲取和修改元素屬性和樣式.

三. 區(qū)分DOM屬性和元素屬性

一個img標簽:

<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />

通常開發(fā)人員習慣將id, src, alt等叫做這個元素的"屬性". 我將其稱為"元素屬性". 但是在解析成DOM對象時, 實際瀏覽器最后會將標簽元素解析成"DOM對象", 并且將元素的"元素屬性"存儲為"DOM屬性". 兩者是有區(qū)別的. 
雖然我們設置了元素的src是相對路徑:images/image.1.jpg 
但是在"DOM屬性"中都會轉換成絕對路徑:http://localhost/images/image.1.jpg.

甚至有些"元素屬性"和"DOM屬性"的名稱都不一樣,比如上面的元素屬性class, 轉換為DOM屬性后對應className.

牢記, 在javascript中我們可以直接獲取或設置"DOM屬性":

    <script type="text/javascript">         $(function() {
            var img1 = document.getElementById("hibiscus");
            alert(img1.alt);
            img1.alt = "Change the alt element attribute";
            alert(img1.alt);
        })
    </script>

所以如果要設置元素的CSS樣式類, 要使用的是"DOM屬性"className"而不是"元素屬性"class:

img1.className = "classB";

一.摘要

在使用jQuery選擇器獲取到jQuery包裝集后, 我們需要對其進行操作. 本章首先講解如何動態(tài)的創(chuàng)建元素, 接著學習如何管理jQuery包裝集, 比如添加,刪除,切片等.

二.前言

本系列的2,3篇上面列舉了太多的API相信大家看著眼暈. 不過這些基礎還必須要講, 基礎要扎實.其實對于這些列表大家可以跳過, 等以后用到時再回頭看或者查詢官方的API說明.

本章內容很少, 主要講解動態(tài)創(chuàng)建元素和操作jQuery包裝集的各個函數.

一.摘要

本章講解jQuery最重要的選擇器部分的知識. 有了jQuery的選擇器我們幾乎可以獲取頁面上任意的一個或一組對象, 可以明顯減輕開發(fā)人員的工作量.

二.前言

編寫任何javascript程序我們要首先獲得對象, jQuery選擇器能徹底改變我們平時獲取對象的方式, 可以獲取幾乎任何語意的對象, 比如"擁有title屬性并且值中包含test的<a>元素", 完成這些工作只需要編寫一個jQuery選擇器字符串. 學習jQuery選擇器是學習jQuery最重要的一步.

三.Dom對象和jQuery包裝集

無論是在寫程序還是看API文檔,  我們要時刻注意區(qū)分Dom對象和jQuery包裝集.

一.摘要

本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經驗和解決方案,  即使你會使用jQuery也能在閱讀中發(fā)現些許秘籍.

本篇文章是入門第一篇, 主要是簡單介紹jQuery, 通過簡單示例指導大家如何編寫jQuery代碼以及搭建開發(fā)環(huán)境. 詳細講解了如何在Visual Studio中配合使用jQuery.

轉載請注明子秋出品!博客園首發(fā)!

二.前言

首先道個歉! "從零開始學習ASP.NET MVC"系列文章在即將介紹Filter時就沒有更新了, 原因就是最近我一直在研究和學習jQuery.看到本系列的名稱和文章標題, 看過我的MVC系列文章的人會感到很熟悉. 不久要給公司的人做培訓, 所以特意制作了本教程.

在寫作的同時我參考了網上jQuery的系列教程文章, 在博客園和Google上并沒有找到讓我滿意的系列教程. 我喜歡將知識系統(tǒng)的,深入淺出的講解.不喜歡寫那種"學習筆記"式的文章. 同時本系列將很快全部寫完(有工作壓力就是有動力), 隨后如果時間允許我會繼續(xù)更新MVC系列文章.再一次對等待MVC文章的朋友們說聲抱歉!

另外本系列文章的大部分知識點來源于圖靈出版社的"jQuery實戰(zhàn)"一書. 推薦大家購買此書, 是jQuery書籍中的經典之作.

下面讓我們開始jQuery之旅.

最近項目中使用了一些插件來做頁面，這里把jQuery UI的使用分享出來，希望 對新手有幫助。文章結尾附源碼下載。

1     jQuery UI

2     為我所用

　　2.1     Tabs

　　2.2     Accordion

　　　　2.2.1   使用基本的Accordion

　　　　2.2.2   實現打開多個標簽

　　　　2.2.3  Accordion的嵌套

3     給插件應用主題——Theme Roller

　　3.1     更改配色

　　3.2     更改圖標

一、免費且強大的Flash統(tǒng)計圖——FusionChartsFree

官方網址： http://www.fusioncharts.com/free/

效果圖：

01. Joefrey Mahusay

很炫的單頁網站模板，基于 HTML5 & CSS3 制作，適合用于設計師個人簡歷、攝影師和平面設計師的個人作品展示。

演示   下載

02. Folder

Folder是一款響應式 HTML5 網站模板，能夠自適應各種設備和瀏覽器尺寸。適合用于創(chuàng)意展示和企業(yè)網站項目。

演示   下載

作為專業(yè)的頁面構建工程師，除了在專業(yè)技能上有很高的要求以外，還需要具有一定的對設計圖的審稿能力。審圖，并非是意味著追求跟PSD一模一樣，甚至耗費大量時間截屏跟PSD去“對像素”。在我的理解中，審圖是通過對UI設計稿的分析，充分理解UI設計師的意圖，再結合UE的交互狀態(tài)，從中做到真正的“還原設計稿”。

事例一：有取有舍，方是領悟

比如，在這樣一張設計稿中

一個曾經與我一起工作過的經驗豐富的項目經理聲稱，他拿到程序員 的時間估算以后，先將它乘以π，然后轉化下一個時間數量級后，才能得到真正的值。1天轉化成3.14周。他過去因為程序員不擅長估算時間而吃盡了苦頭。我創(chuàng)建了一個用來翻譯程序員時間估算的表格，來盡量縮小估算錯誤。

在近期一個項目中，遇到一個圖片列表自適應寬度顯示的問題，需求本身并不難，借此且算是梳理和總結一下當時的解決思路吧，也期望能給有需要做這類需求而又知如何下手的同學帶來一點小啟發(fā)。實現的方法應該很多，如果你有更好的，要分享哦~~