JS与JQ的对比与提高

zoukankan html css js c++ java

JS与JQ的对比与提高
来吧，

案例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 onchange="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内容" onclick="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(){})也就是$(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就是数组中的具体值;
});

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

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

相关阅读:
session之验证码
 session之cookie封装终极版本
 临床知识库-临床路径管理
 import org.quartz.Job; 不存在
 ASP.NET DataGrid 导出EXCEL 中文变乱码
 Cannot find module '@/views/monitor/online/index'
配置包导入
 配置log4j 以便查看mybatis操作数据库的过程
 解决中文乱码问题
 ORA 环境变量

原文地址：https://www.cnblogs.com/tongcc/p/10940785.html

JS与JQ的对比与提高

案例6：jq的$(function(){})与window.onload的区别