標籤：code arc letter 提示 data label 方案 called put
概述選取器JQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 。它相容CSS3，還相容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery2.0及興許版本號碼將不再支援IE6/7/8瀏覽器。jQuery使使用者能更方便地處理HTML（標準通用標記語言 (SGML)下的一個應用）、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對象下的
JQUERY事件託付為DOM中的非常多元素繫結同樣事件
為DOM中尚不存在的元素繫結事件$(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的一點點認識
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
