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"); })