来吧，

案例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" />

案例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后端开发写前端的话肯定是帮写逻辑代码，所以我们的重心应该是数据的获取及数据的判断和数据的传递

JS与JQ的对比与提高的更多相关文章

JS与JQ倒计时的写法
页面需要制作一个倒计时的功能:然后度娘了一遍,找到两种写法,原生JS与JQ 的,经过测试原生JS在IE可能会有不刷新的现象所以结合了一个大神的JQ写法修改好了一个. 原生JS写法: HTML: < ...
js模拟jq获取id
js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <m ...
前端双引号单引号，正则反向引用，js比较jq
1.js,jq,css,html属性必须双,如果同时出现需要嵌套使用,属性的规范是双但是也可以用单测试有效单引号现象举例:jq中获取元素标签是单引号:$('input').click:弹出也是单引号 ...
JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .ge ...
通过js或jq增加的代码，点击事件或其他一些事件不起作用时
通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...
用JS和JQ来获取子节点！
用JS和JQ来获取子节点! 在JS中,如果通过document.getElementsByTagName来获取子元素有个弊端:它不单会获取符合要求的子元素,就连同孙元素也会获取.如果有特殊要求,那 ...
JS与JQ绑定事件的几种方式.
JS与JQ绑定事件的几种方式 JS绑定事件的三种方式直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...
js或者jq 使用cookie 时在谷歌浏览器不好使
用js或者jq 写cookie时在谷歌浏览器上打开,cookie不能正常使用. 原因:浏览器没有开启cookie,打开cookie 就可以显示其次,当将代码上传至服务器,再用浏览器打开时,cooki ...
JS、JQ相关小技巧积攒
JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime() 获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...

随机推荐

java的一个简单死锁的例子
package com.deadlock; /* * 演示死锁:(由毕向东视频所得) * 一种解释:Thread—0拿到lock1锁,Thread—1拿到lock2锁,Thread—0想要lock2锁 ...
thinkphp权限管理Rbac实例
首先,先建立Rbac那五张表(用户表,角色表,节点表,权限表,角色-用户表),后面四张可以在thinkphp中Rbac类里直接复制. 第二步,根据需求往那五张表里插入数据,注意:节点表里的节点名称一定 ...
java中如何创建带路径的文件
请教各位大侠了,java中如何创建带路径的文件,说明下这个路径不存在 ------回答--------- ------其他回答(2分)--------- Java code File f = new ...
wifi方式调试android程序
1. 通过wifi, 利用adb来连接手机. 在pc的cmd中输入命令: adb connect 192.168.1.100 其中adb就是手机的ip. 如果连接成功, 就可以进入android的sh ...
青岛理工交流赛 H题素数间隙
13110581088注销素数间隙 Time Limit: 1000MS Memory limit: 262144K 题目描述 Neko猫是一个很喜欢玩数字游戏的会说话的肥猫,经常会想到很多很好玩的 ...
HDU6025 Coprime Sequence —— 前缀和 & 后缀和
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6025 Coprime Sequence Time Limit: 2000/1000 MS (Java/ ...
自动化测试框架PatatiumWebUi
PatatiumWebUi 官网:https://git.oschina.net/zhengshuheng/PatatiumWebUi 这是Java编写的框架,基于Selenium.TestNG等技术 ...
IOS开发学习笔记(2)-----UIButton 详解
1. [代码][C/C++]代码 //这里创建一个圆角矩形的按钮 UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRou ...
apeche配置虚拟主机
一.开启虚拟主机: 在apache的配置文件httpd.conf中将Include conf/extra/httpd-vhosts.conf这行打开. 二.配置虚拟主机: 在extra/httpd-v ...
windows下使用emacs+plink远程编辑erlang文件
1)plink.exe属于putty套件, 注册到环境变量;emacs的bin目录也要注册到环境变量中; 2)在.emacs中增加如下: (require 'tramp)(setq tramp-def ...

JS与JQ的对比与提高

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

JS与JQ的对比与提高的更多相关文章

随机推荐

热门专题