首頁 > 開發者 > JavaScript
一》使用<body onload="A()">的缺陷是 結構與功能過去耦合，導致代碼混亂。如果調用的A很多，需要改動很多，增加出錯可能性，增加工作量。
二》使用$(document).ready(A)的缺陷是浪費了一個命名空間，可以用更高效的方式匿名函數。
三》工廠函數$()。放到()內的元素會自動執行迴圈遍曆，並儲存到一個jQuery對象中。$其實只是對jQuery標識符的簡寫。如果引用的其他庫也使用了$標籤，會引起衝突，可以通過每個$的執行個體替換成jQuery來避免。例如：
<mce:script type="text/javascript"><!-- jQuery.noConflict();//將變數$的控制權讓渡給prototype.js jQuery(function(){ //使用jQuery jQuery("p").click(function(){ alert( jQuery(this).text() ); }); }); $("pp").style.display = 'none'; //使用prototype // --></mce:script>
當然還可以使用第二種解決方案：
<mce:script type="text/javascript"><!-- var $j = jQuery.noConflict();//自訂一個比較短捷徑 $j(function(){ //使用jQuery $j("p").click(function(){ alert( $j(this).text() ); }); }); $("pp").style.display = 'none'; //使用prototype // --></mce:script>
第三種方案：
<mce:script type="text/javascript"><!-- jQuery.noConflict();//將變數$的控制權讓渡給prototype.js jQuery(function($){ //使用jQuery $("p").click(function(){//繼續使用 $ 方法 alert( $(this).text() ); }); }); $("pp").style.display = 'none'; //使用prototype // --></mce:script>
第四種方案：
<mce:script type="text/javascript"><!-- jQuery.noConflict(); //將變數$的控制權讓渡給prototype.js (function($){ //定義匿名函數並設定形參為$ $(function(){ //匿名函數內部的$均為jQuery $("p").click(function(){ //繼續使用 $ 方法 alert($(this).text()); }); }); })(jQuery); //執行匿名函數且傳遞實參jQuery $("pp").style.display = 'none'; //使用prototype // --></mce:script>
第五種方案：
<mce:script type="text/javascript"><!-- jQuery(function(){ //直接使用 jQuery ,沒有必要調用"jQuery.noConflict()"函數。 jQuery("p").click(function(){ alert( jQuery(this).text() ); }); }); $("pp").style.display = 'none'; //使用prototype // --></mce:script>
四》表簽名：$('p')會擷取文檔中所有的段落。
ID：$('#some-id')會擷取文檔中具有對應的some-id ID的一個元素。
類：$('.some-class')會擷取文檔中帶有some-class類的所有元素。
五》元素組合符：>。例如$('#selected-id > li')，選擇id為select-id下的li標籤。
六》XPath選擇符。選擇所有帶title屬性的連結：$('a[@title]')
選擇包含一個ol元素的所有div元素：$('div[ol]')
選擇所有帶href屬性([@href])且以mailto開頭(^="mailto:")的錨元素(a)：$('a[@href^="mailto:"]')
選擇所有帶以.pdf結尾的串連：$('a[@href$=".pdf"]')
擷取所有sina.com的連結：$('a[@href*="sina.com"]')
七》jquery的一些例子程式：
$(document).ready(function(){ var $cr = $("#cr"); //jQuery對象 var cr = $cr.get(0); //DOM對象，擷取 $cr[0] $cr.click(function(){ if(cr.checked){ //DOM方式判斷 alert("感謝你的支援!你可以繼續操作!"); } }) }); <input type="checkbox" id="cr"/> <label for="cr">我已經閱讀了上面制度</label>$(document).ready(function(){ var $cr = $("#cr"); //jQuery對象 $cr.click(function(){ if($cr.is(":checked")){ //jQuery方式判斷 alert("感謝你的支援!你可以繼續操作。"); } }) }); <input type="checkbox" id="cr"/> <label for="cr">我已經閱讀了上面制度.</label>
八》jquery的元素組合符例子：
//選擇 body內的所有div元素. $('#btn1').click(function(){ $('body div').css("background","#bbffaa"); }) //在body內的選擇 元素名是div 的子項目. $('#btn2').click(function(){ $('body > div').css("background","#bbffaa"); }) //選擇 所有class為one 的下一個div元素. $('#btn3').click(function(){ $('.one + div').css("background","#bbffaa"); }) //選擇 id為two的元素後面的所有div兄弟元素. $('#btn4').click(function(){ $('#two ~ div').css("background","#bbffaa"); })
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
