- 什么是jQ?
jQ的出现是为了简化js的开发,jQ里封装了很多预定义的对象和实用
函数,能帮助使用者轻松地建立有高难度交互的Web2.0特性的富客户端页面,并且兼容各大浏览器。
- 为甚学jQ?
write less , do more.
- jQ代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert("HelloWorld!"); }); $(document).ready(function(){ alert("So What?") }) </script> </head> <body> </body> </html>
- $(document).ready();有两种简写形式:
$().ready(function(){
//...
});
$(function(){
//...
});
- $(document).ready()与window.onload的区别
- 执行时机:$(document).ready();DOM结构绘制完毕就被执行。(注:理论上网页内的元素都可以访问,但并不意味着想要访问的的操作都加载出来了。)
解决上一句括号内所注问题的方法:load()方法,load()方法会在元素的onload事件中绑定一个处理函数,如果处理函数绑定在window对象(window.onload)上,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。
window.onload;必须等待网页之中的所有内容都加载完毕后(包括图片)才能被执行。
2.编写个数:
$(document).ready();能同时编写多个,每个
$(document).ready();都会执行并且每次执行都是在现有的行为上追加新的行为,不存在覆盖。
window.onload;不能同时编写多个,存在覆盖。(onload事件一次只能保存对一个函数的引用。)
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
window.onload = function(){
alert('I');//未弹出
}
</script>
<script type="text/javascript">
window.onload = function(){
alert('Love');//弹出
}
</script>