jquery的一點點認識
概述
JQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 。它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery2.0及興許版本號將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，並且方便地為站點提供AJAX交互。jQuery另一個比較大的優勢是，它的文檔說明非常全，並且各種應用也說得非常具體，同一時候還有很多成熟的插件可供選擇。jQuery可以使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，僅僅須要定義id就可以。
jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得很多其它)。jQuery在2006年1月由美國人John Resig在紐約的barcamp公布。吸引了來自世界各地的眾多JavaScript高手增加，由Dave Methvin率領團隊進行開發。現在。jQuery已經成為最流行的javascript庫。在世界前10000個訪問最多的站點中。有超過55%在使用jQuery。
jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計能夠使開發人員更加便捷，比如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其它功能。除此以外。jQuery提供API讓開發人員編寫插件。
其模塊化的使用方式使開發人員能夠非常輕松的開發出功能強大的靜態或動態網頁。
jQuery，顧名思議，也就是JavaScript和查詢（Query）。即是輔助JavaScript開發的庫。
選擇器
層疊選擇器
$("form input") 選擇全部的form元素中的input元素 $("#main > *") 選擇id值為main的全部的子元素 $("label + input") 選擇全部的label元素的下一個input元素節點，經測試選擇器返回的是label標簽後面直接跟一個input標簽的全部input標簽元素 $("#prev ~ div") 同胞選擇器，該選擇器返回的為id為prev的標簽元素的全部的屬於同一個父元素的div標簽
基本過濾選擇器
$("tr:first") 選擇全部tr元素的第一個 $("tr:last") 選擇全部tr元素的最後一個 $("input:not(:checked) + span")
ID
標簽
類
$("#myELement") 選擇id值等於myElement的元素。id值不能反復在文檔中僅僅能有一個id值是myElement所以得到的是唯一的元素 $("div") 選擇全部的div標簽元素，返回div元素數組 $(".myClass") 選擇使用myClass類的css的全部元素 $("*") 選擇文檔中的全部的元素。能夠運用多種的選擇方式進行聯合選擇：比如$("#myELement,div,.myclass")
屬性過濾選擇器
$("div[id]") 選擇全部含有id屬性的div元素 $("input[name='newsletter']") 選擇全部的name屬性等於'newsletter'的input元素 $("input[name!='newsletter']") 選擇全部的name屬性不等於'newsletter'的input元素 $("input[name^='news']") 選擇全部的name屬性以'news'開頭的input元素 $("input[name$='news']") 選擇全部的name屬性以'news'結尾的input元素 $("input[name*='man']") 選擇全部的name屬性包括'news'的input元素 $("input[id][name$='man']") 能夠使用多個屬性進行聯合選擇，該選擇器是得到全部的含有id屬性而且那麽屬性以man結尾的元素
表單元素選擇器
$(":input") 選擇全部的表單輸入元素。包含input, textarea, select 和 button $(":text") 選擇全部的text input元素 $(":password") 選擇全部的password input元素 $(":radio") 選擇全部的radio input元素 $(":checkbox") 選擇全部的checkbox input元素 $(":submit") 選擇全部的submit input元素 $(":image") 選擇全部的image input元素 $(":reset") 選擇全部的reset input元素 $(":button") 選擇全部的button input元素 $(":file") 選擇全部的file input元素 $(":hidden") 選擇全部類型為hidden的input元素或表單的隱藏域
事件綁定
jQuery 給全部匹配的元素附加一個事件處理函數，即使這個元素是以後再加入進來的也有效。
這種方法是基本是的 .bind() 方法的一個變體。
使用 .bind() 時。選擇器匹配的元素會附加一個事件處理函數。而以後再加入的元素則不會有。為此須要再使用一次 .bind() 才行。比方說
<body> <div class="clickme">Click here</div> </body>
能夠給這個元素綁定一個簡單的click事件：
$('.clickme').bind('click', function() { alert("Bound handler called."); });
當點擊了元素，就會彈出一個警告框。然後。想象一下這之後有還有一個元素加入進來了。
$('body').append('<div class="clickme">Another target</div>');
雖然這個新的元素也可以匹配選擇器 ".clickme" ，可是因為這個元素是在調用 .bind() 之後加入的。所以點擊這個元素不會有不論什麽效果。
.live() 就提供了相應這樣的情況的方法。假設我們是這樣綁定click事件的：
$('.clickme').live('click', function() { alert("Live handler called."); });
然後再加入一個新元素：
$('body').append('<div class="clickme">Another target</div>');
然後再點擊新增的元素，他依舊可以觸發事件處理函數。
事件冒泡
冒泡事件就是點擊子節點。會向上觸發父節點，祖先節點的點擊事件。
以下是html代碼部分：
<body> <div id="content"> 外層div元素 <span>內層span元素</span> 外層div元素 </div> <div id="msg"></div> </body>
相應的jQuery代碼例如以下：<script type="text/javascript"> $(function(){ // 為span元素綁定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";//獲取html信息 $('#msg').html(txt);// 設置html信息 }); // 為div元素綁定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>"; $('#msg').html(txt); }); // 為body元素綁定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被點擊.<p/>"; $('#msg').html(txt); }); }) </script>
當點擊span時，會觸發div與body 的點擊事件。點擊div時會觸發body的點擊事件。
怎樣防止這樣的冒泡事件發生呢？
改動例如以下：
<script type="text/javascript"> $(function(){ // 為span元素綁定click事件 $('span').bind("click",function(event){ var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 為div元素綁定click事件 $('#content').bind("click",function(event){ var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 為body元素綁定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被點擊.<p/>"; $('#msg').html(txt); }); }) </script>
event.stopPropagation(); // 阻止事件冒泡
有時候點擊提交button會有一些默認事件。
比方跳轉到別的界面。可是假設沒有通過驗證的話，就不應該跳轉。這時候能夠通過設置event.preventDefault(); //阻止默認行為 ( 表單提交 )。
以下是案例：
<script type="text/javascript"> $(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //獲取元素的值。val() 方法返回或設置被選元素的值。 if(username==""){ //推斷值是否為空 $("#msg").html("<p>文本框的值不能為空.</p>"); //提示信息 event.preventDefault(); //阻止默認行為 ( 表單提交 ) } }) }) </script>
html部分：<body> <form action="test.html"> 用戶名：<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> <div id="msg"></div> </body>
另一種防止默認行為的方法就是return false。
效果一樣。
代碼例如以下：
<script type="text/javascript"> $(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //獲取元素的值 if(username==""){ //推斷值是否為空 $("#msg").html("<p>文本框的值不能為空.</p>"); //提示信息 return false; } }) }) </script>
同理，上面的冒泡事件也能夠通過return false來處理。<script type="text/javascript"> $(function(){ // 為span元素綁定click事件 $('span').bind("click",function(event){ var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>"; $('#msg').html(txt); return false; }); // 為div元素綁定click事件 $('#content').bind("click",function(event){ var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>"; $('#msg').html(txt); return false; }); // 為body元素綁定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被點擊.<p/>"; $('#msg').html(txt); }); }) </script>
事件托付
概念
什麽是事件托付：通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件。托付呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做。完畢這個事件。
舉個列子：有三個同事估計會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞。二是托付給前臺MM代為簽收。現實其中，我們大都採用托付的方案（公司也不會容忍那麽多員工站在門口就為了等快遞）。前臺MM收到快遞後，她會推斷收件人是誰。然後依照收件人的要求簽收。甚至代為付款。這樣的方案另一個優勢，那就是即使公司裏來了新員工（無論多少），前臺MM也會在收到寄給新員工的快遞後核實並代為簽收。
原理
利用冒泡的原理，把事件加到父級上，觸發運行效果。
作用
性能要好
針對新創建的元素，直接能夠擁有事件事件源
跟this作用一樣(他不用看指向問題。誰操作的就是誰),event對象下的
使用情景
為DOM中的非常多元素綁定同樣事件
為DOM中尚不存在的元素綁定事件JQUERY事件托付
$(function(){ $('#ul1,#ul2').delegate('li','click',function(){ if(!$(this).attr('s')) { $(this).css('background','red'); $(this).attr('s',true); }else { $(this).css('background','#fff'); $(this).removeAttr('s'); } }) });
最新on()方法取替了delegate()方法
$(function(){ $('#ul1,#ul2').on('click','li',function(){ if(!$(this).attr('s')) { $(this).css('background','red'); $(this).attr('s',true); }else { $(this).css('background','#fff'); $(this).removeAttr('s'); } }) });
事件監聽
事件監聽準確一點講能夠說是js引擎對用戶鼠標、鍵盤、窗體事件等動作的監視進行的操作，也就是針對用戶對應的操作進行附加事件，經常使用的類似 btnAdd.onclick="alert(’51obj.cn’)"就是一種簡單的附加事件，僅僅只是這樣的方法不支持附加多個事件以及刪除事件。下面代 碼將實現附加事件後刪除事件（IE下）
總結
這篇對jquery的理解。主要解說基礎知識，原理性的東西比較多
jquery的一點點認識