JS与JQ的对比与提高

阅读量：6323 次

发布时间：2019-06-22

本文共 6713 字，大约阅读时间需要 22 分钟。

来吧，

案例1：先上个例子js写的省市二级联动

<!DOCTYPE html>

<html>

<head>

准备工作 : 准备数据

var provinces = [

["深圳市","东莞市","惠州市","广州市"],

["长沙市","岳阳市","株洲市","湘潭市"],

["厦门市","福州市","漳州市","泉州市"]

];

1. 确定事件: onchange

2. 函数: selectProvince()

3. 函数里面要搞事情了

得到当前操作元素

得到当前选中的是那一个省份

从数组中取出对应的城市信息

动态创建城市元素节点

添加到城市select中

function selectProvince(){

var province = document.getElementById("province");

//得到当前选中的是哪个省份

//alert(province.value);

var value = province.value;

//从数组中取出对应的城市信息

var cities = provinces[value];

var citySelect = document.getElementById("city");

//清空select中的option

citySelect.options.length = 0;

for (var i=0; i < cities.length; i++) {

// alert(cities[i]);

var cityText = cities[i];

//动态创建城市元素节点 <option>东莞市</option>

//创建option节点

var option1 = document.createElement("option"); // <option></option>

//创建城市文本节点

var textNode = document.createTextNode(cityText) ;// 东莞市

//将option节点和文本内容关联起来

option1.appendChild(textNode); //<option>东莞市</option>

// 添加到城市select中

citySelect.appendChild(option1);

}

</script>

</head>

<body>

</select>

</body>

</html>

案例2：再来个JQ写的省市二级联动

<!DOCTYPE html>

<html>

<head>

准备工作 : 准备数据

var provinces = [

["深圳市","东莞市","惠州市","广州市"],

["长沙市","岳阳市","株洲市","湘潭市"],

["厦门市","福州市","漳州市","泉州市"]

];

1. 导入JQ的文件

2. 文档加载事件:页面初始化

3. 进一步确定事件: change事件

4. 函数: 得到当前选中省份

5. 得到城市, 遍历城市数据

6. 将遍历出来的城市添加到城市的select中

$(function(){

$("#province").change(function(){

// alert(this.value);

//得到城市信息

var cities = provinces[this.value];

//清空城市select中的option

/*var $city = $("#city");

//将JQ对象转成JS对象

var citySelect = $city.get(0)

citySelect.options.length = 0;*/

$("#city").empty(); //采用JQ的方式清空

//遍历城市数据

$(cities).each(function(i,n){

$("#city").append("<option>"+n+"</option>");

});

</script>

</head>

<body>

</select>

</select>

</body>

</html>

案例3:：jq的选择器及事件

<head>

<!--

- ID选择器 : #ID的名称

- 类选择器: 以 . 开头 .类名

- 元素选择器: 标签的名称

- 通配符选择器: *

- 选择器,选择器: 选择器1,选择器2

-->

//文档加载事件,页面初始化的操作

$(function(){

//初始化操作: 给按钮绑定事件

$("#btn1").click(function(){

$("#two").css("background-color","palegreen");

});

//找出mini类的所有元素

$("#btn2").click(function(){

$(".mini").css("background-color","palegreen");

});

$("#btn3").click(function(){

$("div").css("background-color","palegreen");

});

$("#btn4").click(function(){

$("*").css("background-color","palegreen");

});

/*选择器分组*/

//找出mini类和 span元素

$("#btn5").click(function(){

$(".mini,span").css("background-color","palegreen");

});

</script>

</head>

<body>

<br />

</div>

</div>

</div>

</body>

</html>

案例4 JQ和JS的转换

<!DOCTYPE html>

<html>

<head>

function changeJS(){

var div = document.getElementById("div1");

// div.innerHTML = "JS成功修改了内容"

//将JS对象转成JQ对象

$(div).html("转成JQ对象来修改内容")

}

$(function(){

//给按钮绑定事件

$("#btn2").click(function(){

//找到div1

// $("#div1").html("JQ方式成功修改了内容");

//将JQ对象转成JS对象来调用

var $div = $("#div1");

// var jsDiv = $div.get(0);

var jsDiv = $div[0];

jsDiv.innerHTML="jq转成JS对象成功";

});

</script>

</head>

<body>

这里的内容一会要被JS/JQ代码修改掉

</div>

这里的内容一会要被JS/JQ代码修改掉1111

</div>

</body>

</html>

案例5：JQ定时弹出广告

<!DOCTYPE html>

<html>

<head>

<!--

1. 导入JQ的文件

2. 编写JQ的文档加载事件

3. 启动定时器 setTimeout("",3000);

4. 编写显示广告的函数

5. 在显示广告里面再启动一个定时器

6. 编写隐藏广告的函数

-->

//显示广告

function showAd(){

$("#img1").slideDown(2000);

setTimeout("hideAd()",3000);

}

//隐藏广告

function hideAd(){

$("#img1").slideUp(2000);

}

$(function(){

setTimeout("showAd()",3000);

});

</script>

</head>

<body>

</body>

</html>

总结：当你敲完上面代码，作为一个后端java程序员来写前端的逻辑代码已经差不多够用了，当然我们是不擅长写css滴，不管前端用vue还是用angular，当你知道你想要什么，怎么得到，怎么传递，我想应该就够了，剩下的就是逻辑判断了，这个得看业务需求。

得到节点的dom元素element对象

JS写法： document.getElementById("ID名称");

JQ写法：$("#ID名称")

以上只是得到dom对象，而dom对象会有属性如内容，风格等，而内容，风格本身也是对象。

如得到input框中的内容

JS写法： document.getElementById("ID名称").innerHTML,如果是往框中写内容document.getElementById("ID名称").innerHTML（“爱写啥写啥”）;

JQ写法：$("#ID名称").html，如果是要往里面写内容 $("#ID名称").html（“爱写啥写啥”）

JS对象和JQ对象的转换

JS对象转JQ对象：加个$,如

var div = document.getElementById("div1");

$(div).html("转成JQ对象来修改内容")

JQ转JS：JQ对象.get(0)或者JQ对象【0】如

var $div = $("#div1");

// var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML="jq转成JS对象成功";

案例6：

jq的$(function(){})也就是$(document).ready(function(){})的简写，与之对应的原生js的window.onload事件，这俩者之间到底有什么区别呢？ $(function () { console.log("ready执行"); }); $(function() { console.log("ready1执行"); }); window.onload = function () { console.log('load执行'); }; window.onload = function () { console.log('load1执行'); }

我们来看一下控制台中输出的结果：

这里可以看出两点不同：

1.$(function(){})不会被覆盖，而window.onload会被覆盖，个人感觉$(function(){})不会被覆盖的原因是将其放入到了一个队列中，在对应时机一次出队。

2. $(function(){})在window.onload执行前执行的，$(function(){})类似于原生js中的DOMContentLoaded事件，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

DOM文档加载步骤：

1.解析HTML结构

2.加载外部的脚本和样式文件

3.解析并执行脚本代码

4.执行$(function(){})内对应代码

5.加载图片等二进制资源

6.页面加载完毕，执行window.onload

循环（数组）：

JS循环：for (var i=0; i < ***.length; i++) {}；

JQ循环：$(cities).each(function(i,n){

n就是数组中的具体值;

});