关于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() {
}
});
}
浙公网安备 33010602011771号