关于jQuery和JS的一些事
1.jquery的$(function(){})和$(document).ready(function({}))的区别在哪?
页面加载完成有两种事件
一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)
二是onload,指示页面包含图片等文件在内的所有元素都加载完成。
以上提到的两种都属于ready这种加载方式,其实$(function(){})和$(document).ready(function({}))他们是相同的作用,或者还可以写成另一种方式,$().ready(function()),综上,提到的这些个方法都是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是:域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。
需要注意的是如果以上提到的这两种方法同时存在的话,$(document).ready(function({}))先被执行,而$(function(){})后被执行,$(function(){.....})();和和(function (){…} ());表示函数立即执行
2.JS与Jquery的区别?
(1) jQuery的执行条件已说明,而JS的入口函数却是window.onload = function(){内部放js},。等到所有内容,以及我们的外部图片之类的文件加载完了之后,才会去执行。只能写一个入口函数。
而jQuery是在 html所有标签都加载之后,就回去执行。可以写多个入口函数3.JS与Jquery的执行顺序
(1)JavaScript中的代码块是指由
<Script>
标签分割的代码块,代码块的独立性和分享性,一个报错不会影响另外一个执行.同时一个可以调用另外一个里面的变量 (2)
<script> function Fn(){ //声明式函数 } var Fn = function(){ //赋值式函数 } </script>
区别:在js预编译时期,声明式函数会先被提取出来执行,然后再按顺序执行js代码。
(3)预编译期js会对本地代码块中所有声明的变量和函数进行处理,需要注意的是这里处理的函数只是声明式函数,而且对于所有的变量只进行了声明,并未进行初始化和赋值。
<script> Fn(); //执行结果 :声明式函数二 。如果声明了两个同名函数,则后面的函数会覆盖前的函数 //函数一 function Fn(){ console.log("声明式函数一"); } //函数二 function Fn(){ console.log("声明式函数二"); } </script>
<script> Fns(); //执行结果:声明式函数 。 可以看出声明式函数在预编译阶段被执行,而赋值式函数并没有在预编译阶段被执行 //声明式函数 function Fns(){ console.log("声明式函数"); } //赋值式函数 var Fns = function(){ console.log("赋值式函数"); } Fns(); //执行结果:赋值式函数 。 可以看出在执行阶段赋值式函数被执行,并覆盖了同名的声明式函数 </script>
<script> console.log(str_1); //执行结果:undefined 。 可以看出函数预编译阶段声明了str_1这个变量,但是并没有为他赋值。 var str_1 = "Hello JavaScript"; </script>
下面还有一个例子:
<script> Fn_1(); //执行结果:报错 Fn_1 is not defined 。 没有定义这个函数 </script> <script> function Fn_1(){ console.log("这是在代码块二中定义的函数"); } </script>
执行结果出错的原因是这样的,最上面的代码块里面并没有定义任何的变量和函数,预编译只预编译到这个代码块中声明的变量和函数,然后开始执行这个代码块。而对于后面还未加载的代码块,是没有办法预处理的,这也是边编译变处理的核心所在。
而根据HTML文档的加载顺序,需要在页面元素渲染前加载的文件应该放在<body>
元素的前面,需要在页面渲染完成后加载的文件放在</body>
元素的后面,body
标签的onload
事件是最后执行的。
(4)href="javascript:void(0);" 和 href="javascript:;" 相当于死链接,默认阻止,不进行动作。两者效果相当。但建议使用void(0)。只使用分号可能会影响before、after等操作。另 href 和 click 是有优先级的,所以有时候我们会写 <a href="javascript:void(0);" onclick=function() >。onclick 会先于 href 执行。
(5)onclick事件中onclick(this),this永远指向所在函数的拥有者.onchange 在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件
(6)JS代码封装成一个方法,参考博客:https://blog.csdn.net/AlbenXie/article/details/70213466?locationNum=12&fps=1
封装的一个例子:
$(function() { fillArea("0", "#province"); $("#province").change(function() { var ids = $(this).val(); fillArea(ids, "#city"); }); $("#city").change(function() { var ids = $(this).val(); fillArea(ids, "#area"); }); }); function fillArea(parentids, tagid) { $.ajax({ type:"post", url:"DistrictServlet", data:{ parentids:parentids }, dataType:"json", success:function(data) { if(data.success) { $(tagid).empty(); for (var i = 0; i < data.result.length; i++) { $(tagid).append("<option value='" +data.result[i].ids+"'>" +data.result[i].dname+"</option>"); } } else { alert(data.result); } }, error:function() { } }); }