標籤：john out styles 點擊事件 xhtml 1.0 alert 動畫 設計 hid
window.onload 和 Jquery $(document).ready() 區別 * 1.用JavaScript的方式window.onload :必須等頁面上所有的元素(css/js/圖片)傳遞完畢之 後才去執行 綁定的函數中的代碼 2.用JQuery的形式來實現,只要頁面中的DOM樹形成了,就開始執行(簡單理解為傳遞完當前頁面即可執行)* 有無簡寫形式 window.onload無簡寫形式 $(document).ready(function(){}) 有簡寫形式 $(function(){});* 綁定的函數個數不一樣 window.onload 只能綁定一個函數 $(function(){}); 可以綁定任意多個函數
window.onload 只能綁定一個函數，如下代碼，只會執行two
<script type="text/javascript"> function one(){ alert("one"); } function two(){ alert("two"); } window.onload = one ; window.onload = two ;</script>
$(function(){}); 可以綁定任意多個函數，如下代碼都會執行
<script type="text/javascript"> function one(){ alert("one"); } function two(){ alert("two"); } $(document).ready(function(){ one(); }) $(document).ready(function(){ two(); })</script>
JQuery完善的事件處理機制，如果綁定失敗，下邊的代碼也會執行，只是綁定的那段不會執行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Panel</title><script src="../../jquery-1.4.2.js"></script><script type="text/javascript">$(function(){ $("#t").bind("click",function(){ alert("zzzz"); }); alert("1111"); alert("2222");});</script></head><body><pre id="tt">體會JQuery完善的事件處理機制</pre><pre> 1.體會JQuery完善的事件處理機制 2.為DM節點綁定事件 $dm.bind("",function(){});</pre></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-2-1</title><link rel="stylesheet" type="text/css" href="../css/style.css" /><script src="../../jquery-1.4.2.js"></script><script>$(function(){ /* * 擷取id為panel下的class的值為head的h5元素, * 為這個元素用JQuery的原始方式綁定點擊事件 * 讓當前元素的下一個兄弟節點顯示 */ //$("#panel .head").bind("click",function(){ //$(this).next().show(); //}); /* * 頁面載入完畢之後為id為panel下的class值為head的h5元素用原始方式綁定一個click事件, * 擷取當前節點的下一個兄弟元素$content * 當$coantent元素為的狀態為可見狀態是$dm.is(":visible")讓節點$content節點隱藏. * 否則讓節點$content節點xianshi. */ /** $("#panel .head").bind("click",function(){ var $con=$(this).next(); if($con.is(":visible")){ $con.hide(1000); }else{ $con.show(1000); } });*/ /* * 頁面載入完畢之後, * 為id為panel下的class的值為head的h5元素用原始方式綁定mouseover事件, * 讓當前節點的下一個兄弟節點顯示 * * 為id為panel下的class的值為head的h5元素用原始方式綁定mouseout事件, * 讓當前節點的下一個兄弟節點隱藏 */ /** $("#panel h5.head").bind("mouseover",function(){ $("#panel h5.head").next().show(); }).bind("mouseout",function(){ $("#panel h5.head").next().hide(); });*/ /** * 等待頁面載入完畢之後, * 為id為panel下的class值為head的h5元素用簡寫形式綁定一個mouseover事件,讓當前節點的下一個兄弟節點顯示 * 為id為panel下的class值為head的h5元素用簡寫形式綁定一個mouseout事件,讓當前節點的下一個兄弟節點隱藏 */
//簡寫
$("#panel h5.head").mouseover(function(){ $("#panel h5.head").next().show(); }).mouseout(function(){ $("#panel h5.head").next().hide(); }); });</script></head><body><div id="panel"> <h5 class="head">什麼是jQuery?</h5> <div class="content"> jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由 John Resig 建立於2006年1月的開源項目。jQuery憑藉簡潔的文法和跨平台的相容性，極大地簡化了JavaScript開發人員遍曆HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程式員的設計思路和編寫程式的方式。 </div></div><pre> 總結: 有哪些事件? 1.為節點綁定事件的方式 * $dm.bind("click",function(){ ... }); * $dm.click(function(){ ... }); $dm.click(function(){}); 2. $(this) 中this的含義,以及為什麼需要將this用$()括起來 3. $dm.show(); $dm.hide(); 都屬於節點的動畫操作 , 都可以向其中傳遞參數,參數的形式為"3000","slow","normal","fast"</pre></body></html>
*{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px }#panel { width: 300px; border: 1px solid #0050D0 }.head { padding: 5px; background: #96E555; cursor: pointer }.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }
發現我一朋友真是太有錢了，買件羽絨服就兩萬多，努力賺錢吧，以後買給自己家人
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
