1,引入jquery
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
2,$ 与 jquery 的关系
$('#first') 等价于 jQuery('#first')
3,比较$(document).ready(function(){}); window.onload 及 $(function(){});
window.onload | $(document).ready() | |
---|---|---|
执行时机 | 等待网页中所有内容加载完成之后执行 (包括图片资源) | 网页中所有的dom对象加载完成之后就执行 可能dom元素关联的东西没有加载完成 |
同一页面可执行数量 | 不能执行多次 window.onload = function(){ alert("a"); }; window.onload = function(){ alert("b"); }; 结果输出 b | 可以执行多次 $(document).ready(function(){ alert("a") }); $(document).ready(function(){ alert("b") }); 结果输出 a b 两次 |
简单写法 | 无 | $(function(){ }) |
4,jquery 格式化的一些写法
- 对于同一个元素不超过3个操作的,可以直接写成一行。
$(this).show().unbind("click")
- 对于同一个元素的较多操作,建议每行写一个操作。
$(this).removeClass("mouseout") .addClass("mouseover") .stop() .fadeTo("fast", 0.6) .fadeTo("fast", 1) .unbind("click") .click(function(){ //something });
3, 对于多个元素的少量操作,可以每个对象写一行,如果涉及子元素,可以考虑适当的缩进。
$(this).addClass("highlight")
.children("li").show().end()
.siblings().removeClass("hightlight")
.children("li").hide();