? ? ? ? 只要懂的HTML和CSS就可以完成靜態(tài)頁面捻浦，很多項目中有多部分都是由靜態(tài)構(gòu)成晤揣，但是如果每個頁面需要響應(yīng)事件或者一些界面效果的時候就需要js來控制了，jQuery是js的一個封裝的庫默勾，提供了非常便捷好用的js封裝庫碉渡，用專業(yè)的術(shù)語來說就是jQuery憑借簡潔的語法和跨平臺的兼容性聚谁，極大地簡化了JS開發(fā)人員遍歷HTML文檔母剥、操作DOM、處理時間形导、執(zhí)行動畫和開發(fā)Ajax的操作环疼。其獨特而又優(yōu)雅的代碼風格改變了JS程序員的設(shè)計思路和編寫程序的方式。
? ? ? 首先我對JS的一些基本的用法和構(gòu)建比較了解朵耕，但是沒有系統(tǒng)的學習過炫隶，所以我通過《鋒利的JQuery》開始了我的學習之旅。這本有個特點就是把jQuery和DOM進行對比講解阎曹，如果比較了解DOM操作的人去看肯定是事半功倍伪阶，但是我不了解DOM操作 所以有些內(nèi)容我就跳過了，目前我看了三章处嫌，主要最大收獲有下面幾點：
1.jQuery寫法規(guī)范問題
? ? ? ? 之前在項目中我看見過如下類似代碼：
$（".level1>a"）.click(function(){
? ? ?$(this).addClass("current")
? ? ?.next().show()
? ? ?.parent().siblings().children("a").removeClass("current")
? ? ?.next.hide();
? ? ?return false栅贴；
})
? ? ? ?我一開始認為是代碼排版除了問題于是就進行了更改
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next.hide();
改成了一行。
? ? ? ?而這種做法是不好的
? ? ? ?這一句代碼作用是當鼠標單擊到a元素（它是class含有l(wèi)eve1的子元素）的時候熏迹，給其添加一個名為current的class檐薯，然后將緊鄰其后面的元素顯示出來，同時將它的父輩的同輩元素內(nèi)部的子元素<a>都去掉一個名為current的class注暗，并且將緊鄰它們后面的元素都隱藏坛缕。
? ? ? ? 也就是說這一句代碼里進行了多個操作，僅僅只是做到了行為和內(nèi)容的分離捆昏，當別人閱讀這句代碼時就費勁了赚楚。這個時候就需要有層次結(jié)構(gòu)和規(guī)范的書寫再加上注釋就大大增加了可讀性和可維護性。
? ? ? ?$(this).addClass("current") ?//給當前元素添加“current”樣式
? ? ? ?.next().show() ? ? ? ? ? ? ? ? ? ? ? //下一個元素顯示
? ? ? ?.parent().siblings().children("a").removeClass("current") ?//父元素的同輩元素的子元素<a>移除“current”格式
? ? ? ?.next.hide(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//它們的下一個元素隱藏
? ? ? ? return false骗卜；
? ? ? 這里就是第一個收獲------jQuery有層次結(jié)構(gòu)和規(guī)范的書寫
? ? ?（1）對于同一個對象不超過3個操作的直晨，可以直接寫成一行搀军。
? ? ?（2）對于同一個對象的較多操作，建議每行寫一個操作
? ? ?（3）對于多個對象的少量操作勇皇，可以每個對象寫一行罩句，如果涉及子元素，可以考慮適當?shù)乜s進敛摘。
2.下拉框左右選擇項的添加
? ? ? ? 實現(xiàn)如下功能：
? ? ? ? （1）將選中的選項添加給對方
? ? ? ? （2）將全部選項添加給對方
? ? ? ? （3）雙擊某個選項將其添加給對方
? ? ? ? ?$（'#add'）.click(function(){
? ? ? ? ? ? ? ? var options = $('select option:selected');
? ? ? ? ? ? ? ? options.appentTo("#select2");
? ? ? ? } )//將選中的選項添加給對方
? ? ? ?$(#add_all").click(function(){
? ? ? ? ? ? ? ? var option = $('#select option');
? ? ? ? ? ? ? ? option.appentTo('#select2');
? ? ? })//將全部選項添加給對方
? ? ?$('#select').dblclick(function(){
? ? ? ? ? var options = $("option:select".this) ;
? ? ? ? ? option.appentTo('#select2');
} )/雙擊某個選項將其添加給對方
3.其他一些簡單的學習筆記
? ? ? //選取#prev之后的所有的同輩div元素
? ? ?$（"#prev~div"）.css("background","#bbffaa")
? ? ?//同上
? ? ?$("#prev").nextAll("div").css("background","#bbffaa")
? ? ?//選取#prev所有同輩div元素门烂，無論前后位置
? ? ?$("#prev").siblings("div").css("background","#bbffaa");
? ? ?改變高度：
? ? ?$comment.height( $comment.height()+50);
? ? ?改變高度（加個動畫）:
? ? $(comment).animate({height:"+=50"}.400);
? ? 選擇name為item的checkbox
? ? $（‘[name-itmes]:checkbox’）.attr('check'，true);
? ? 全選時兄淫，下面的復選框全部被選擇
? ? $("#chickall").click(function(){
? ? ? ? $('[name=items]:checkbox').attr("checked",this.checked);
? ? }}
