JS与JQ的对比与提高

曾经终败给现在 2021-12-23 11:57 155阅读 0赞

来吧，

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

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title></title>  
<script>  
/\*  
准备工作 : 准备数据  
\*/  
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 οnchange="selectProvince()" id="province">  
<option value="-1">--请选择--</option>  
<option value="0">广东省</option>  
<option value="1">湖南省</option>  
<option value="2">福建省</option>  
</select>  
  
<select id="city"></select>  
</body>  
</html>

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

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title></title>  
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>  
<script>  
/\*  
准备工作 : 准备数据  
\*/  
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 id="province">  
<option value="-1">--请选择--</option>  
<option value="0">广东省</option>  
<option value="1">湖南省</option>  
<option value="2">福建省</option>  
</select>  
  
<select id="city">  
  
</select>  
</body>  
</html>

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

<head>  
<meta charset="UTF-8">  
<title></title>  
<link rel="stylesheet" href="../../../css/style.css" />  
  
<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>  
  
<script>  
//文档加载事件,页面初始化的操作  
$(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>  
<input type="button" value="找出ID为two的元素" id="btn1" />  
<input type="button" value="找出mini类的所有元素" id="btn2" />  
<input type="button" value="找出所有div元素" id="btn3" />  
<input type="button" value="通配符选择器" id="btn4" />  
<input type="button" value="找出mini类 和 span元素" id="btn5" />  
  
<br />  
<div id="one">  
<div class="mini">1-1</div>  
</div>  
<div id="two">  
<div class="mini">2-1</div>  
<div class="mini">2-2</div>  
</div>  
<div id="three">  
<div class="mini">3-1</div>  
<div class="mini">3-2</div>  
<div class="mini">3-3</div>  
</div>  
<span id="four">span</span>  
</body>  
</html>

案例4 JQ和JS的转换

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title></title>  
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>  
<script>  
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>  
<input type="button" value="JS修改div内容" οnclick="changeJS()" />  
<input type="button" value="JQ方式修改div内容" id="btn2" />  
<div id="div1">  
这里的内容一会要被JS/JQ代码修改掉  
</div>  
<div id="div1">  
这里的内容一会要被JS/JQ代码修改掉1111  
</div>  
</body>  
</html>

案例5：JQ定时弹出广告

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title></title>  
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>  
  
<script>  
//显示广告  
function showAd()\{  
$("\#img1").slideDown(2000);  
setTimeout("hideAd()",3000);  
\}  
  
//隐藏广告  
function hideAd()\{  
$("\#img1").slideUp(2000);  
\}  
  
  
$(function()\{  
setTimeout("showAd()",3000);  
  
\});  
</script>  
</head>  
<body>  
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c\_g.jpg" id="img1" width="100%" style="display:none" />  
</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()\{\})与window.onload的区别][jq_function_window.onload] #

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执行'); }

我们来看一下控制台中输出的结果：   
![这里写图片描述][20151213103236592]

这里可以看出两点不同：   
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就是数组中的具体值;  
\});

前端代码的执行顺序：从上而下执行，所以有时为了页面的显示速度快点的话建议把脚本写在body标签的结束前一点

后续：作为java后端开发写前端的话肯定是帮写逻辑代码，所以我们的重心应该是数据的获取及数据的判断和数据的传递

转载于:https://www.cnblogs.com/tongcc/p/10940785.html

[jq_function_window.onload]: https://www.cnblogs.com/xfcao/p/6514438.html
[20151213103236592]: /images/20211223/2e87c8c176a14d2d8e851a981f54dbed.png