在‘JQuery’分類底下的文章

自適網頁RWD開發心得

最近大家有發現部落格的樣子隨著日子在偷偷的改變嗎? 是的!最近我在進行部落格的版面小修改! 主要訴求是要將版面改版成具有專業感、清楚、易讀, 然後呀,本部落格現在開始支援Responsive Web Design囉!(灑花~~灑花!! 其實自適網頁說穿了,只是用多組的CSS,可以在不同瀏覽環境下切換畫面的CSS, 這可以讓同一個網頁在手機以及電腦上,呈現不一樣的樣子。 RWD一般最常見是使用media queries,利用條件設定去設定裡面所設定的CSS要在何種狀況被使用。 我的開發心得 那這次的改版過程中,下面幾點是我覺得在開發RWD時要去注意的 若有需要使用JS去做網頁動態,不要將CSS直接在JS裡面加,例如 $(“.content”).css(“display”,”none”);//js 類似上面的這種的作法都要通通避免,JS一定要避免掉所有和版面有關的設定。 像上面這種寫法,應改成: $(“.content”).addClass(“display-none”);//js .display-none{display:none;}/*CSS*/ 這樣可以避免在切換為不同顯示方式時彼 […]

繼續閱讀...

JQuery選擇器

1. 選擇所有的table $(document).ready(function() { $(‘table tr’).filter(function(index){ //…. }); }); 2. 選擇第N行(若有很多table則只會選第一個table的第N行) $(document).ready(function() { $(“tr:eq(1)”).addClass(“mytr”); $(“tr:eq(2)”).css(‘background-color’,’#663300′); }); 3. 選擇第N行(若有很多table則會選擇每個table的第N行) $(document).ready(function() { $(“table tr:nth-child(1)”).addClass(“mytr”); }); 4. 選奇偶行 $(document).ready(function() { $(“table tr:odd”).addClass(“trOdd”); $(“table tr:even”).addClass(“trEven”); }); 3. 選第一個元素 $(docu […]

繼續閱讀...