JavaScript
2022/4/2 1:19:31
本文主要是介绍JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
JavaScript
(前端核心第一天)
windown常见属性
location 位置 location.href 网址地址 location.reload() 重新加载 location.search 获取从？开始的所有参数信息 history history.length 历史页面数量 history.forward() 前进 history.back() 后退
事件相关
鼠标事件
onclick
onmouseover
onmouseout
onmousedown
onmouseup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div onm ouseover="overfn()" onm ouseout="outfn()" onm ousemove="movefn()" onm ousedown="downfn()" onm ouseup="upfn()">
</div>
<script>
function upfn() {
console.log("mouse is up");
}
function downfn() {
console.log("mouse is down");
}
function movefn() {
console.log("mouse is move");
}
// function clickfn() {
// console.log("mouse is click");
// }
function overfn() {
console.log("mouse on over");
}
function outfn() {
console.log("mouse on out");
}
</script>
</body>
</html>
键盘事件
onkeydown 键盘按下
onkeyup 键盘抬起
event.keyCode 获取ASCII码
String.fromCharCode() 将ASCII码转为字符
<input type="text" onkeydown="kdfn()" onkeyup="kufn()">
<script>
function kdfn() {
console.log("键盘按下"+event.keyCode);
// event.keyCode可以获取按键的编码。
}
function kufn(){
console.log("键盘抬起"+String.fromCharCode(event.keyCode));
// String.fromCharCode转换案件编码为英文
}
</script>
状态改变事件
onblur 失去焦点事件
onchange 值改变事件
<input type="text" onblur="blurfn()">
<select name="school" onchange="changefn()">
<option>北京大学</option>
<option>清华大学</option>
</select>
<script>
function blurfn() {
console.log("文本完成");
}
function changefn() {
console.log("学校改变");
}
</script>
DOM文档对象模型
包含和页面相关内容
document.querySelector("选择器");
innerText
value
JQuery框架
对原生javaScript的封装，可以更高效的开发动态效果。 如何使用JQuery框架。 1）下载JQuery.js框架文件，然后引入本地文件。 <script src="JQuery.js"></script> 2）通过CND的方式引入远程js文件到页面中 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type="text" id="it1">
<input type="button" value="显示" id="bt1">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- <script src="JQuery.js"></script> -->
<script>
$("h1").text("引入成功");
$("#bt1").click(
function () {
var i = $("#it1");
console.log(i.val());
// i.val() 是一个方法，可以展示input框中的内容。
}
)
</script>
</body>
Js和Jq对象相互转换
js对象转jq对象
jq对象就是一个数组，用来存放js对象，因此只需要按照数组元素获取数据的方式。
js转jq：let jq = $(js);
jq转js：let js= jq[0];
<body>
<input type="text" id="t1">
<input id="it1" type="button" value="输出">
<script>
$("it1").click(function () {
let jq = $("#t1");
let js = jq[0];
alert(jq.val);
})
</script>
</body>
JQ选择器
$("")
使用$("选择器")
js对象和jq对象不一样，不能混合调用各自的方法。但都可以用var获取。
jq中的方法没有on。如onclick只需click。
CSS中的选择器，都可以在jQuery中使用，新增了一些选择器
常见选择器：
匹配所有div中的第一个：$("div:first");
匹配所有div中的最后一个：$("div:last");
匹配所有div中的第n个第div：$("div:eq(n)"); n从0开始。
给元素动态绑定事件
格式：选择器选择到元素对象.事件名(function(){})
$("#b1").click(function(){事件相关代码})
$("#b1").click(function(){
事件相关代码.
})
JQuery中的事件名比JS中少on
显示效果相关
创建元素对象
let h = $("<h1> </h1>")
添加元素到某个元素中
append()增加元素
元素对象.append(元素对象)
获取和修改元素文本内容
text() 获取
text("xxx") 修改xxx
获取和修改form表单中控件的值
控件对象.val() 获取
控件对象.val("xxx") 修改
显示隐藏
元素对象.remove() 删除元素。
元素对象.hide() 隐藏
元素对象.show() 展示
元素对象.toggle() 隐藏/展示
$("input:first") 选第一
$("input:last") 选最后
$("input:eq(n)") 选第n个
<body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tx">
<input type="button" value="查看" id="bt1">
<div></div>
<script>
let n = $("<h1> 我是h1 </h1>")
$("body").append(n);
$("input:last").click(function () {
$("div").text($("#tx").val());
})
$("h1").remove();
</script>
</body>
<body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tx">
<input type="button" value="查看" id="bt1">
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<div></div>
<script>
let n = $("<h1> 我是h1 </h1>")
$("body").append(n);
$("input:eq(1)").click(function () {
$("div").text($("#tx").val());
$("h1").remove();
})
$("input:eq(2)").click(function () {
$("h1").hide();
})
$("input:eq(3)").click(function () {
$("h1").show();
})
$("input:eq(4)").click(function () {
$("h1").toggle();
})
</script>
</body>
好友分组
元素对象.children() :该元素对象的子元素。
<body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>同事
<ul>
<li>王城</li>
<li>罗源</li>
<li>杨立</li>
</ul>
</li>
<li>朋友
<ul>
<li>董斌</li>
<li>刘清</li>
<li>流失</li>
</ul>
</li>
<li>领导
<ul>
<li>西晋</li>
<li>罗氏</li>
</ul>
</li>
</ul>
<input type="button" id="show" value="展示">
<script>
$("li>ul").hide();
$("#show").click(function () {
$("li>ul").toggle();
})
$("body>ul>li").click(function () {
// 得到点击元素的子元素，并让其展示
$(this).children().toggle();
})
</script>
</body>
英雄表
<body>
<table border="2">
<caption>英雄列表</caption>
<tr>
<th>名字</th>
<th>类型</th>
<th>价格</th>
</tr>
</table>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
let arr = [
{name: "无极剑圣", type: "刺客", price: "450"},
{name: "蛮王", type: "战士", price: "4800"},
{name: "索拉卡", type: "辅助", price: "450"}
]
for (let i = 0; i < arr.length; i++) {
let hero = arr[i];
let tr = $("<tr></tr>");
let nametd = $("<td></td>");
let typetd = $("<td></td>");
let pricetd = $("<td></td>");
nametd.text(hero.name);
typetd.text(hero.type);
pricetd.text(hero.price);
tr.append(nametd);
tr.append(typetd);
tr.append(pricetd);
$("table").append(tr);
}
</script>
</body>
员工列表
<body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="员工姓名">
<input type="text" placeholder="工资">
<input type="text" placeholder="工作">
<input type="button" value="添加" id="add">
<table border="1">
<caption>员工列表</caption>
<tr>
<th>姓名</th>
<th>工资</th>
<th>工作</th>
<th>操</th>
</tr>
</table>
<script>
$("#add").click(function () {
let tr = $("<tr></tr>");
let nametd = $("<td></td>");
let salted = $("<td></td>");
let jobtd = $("<td></td>");
let deltd = $("<td><input type='button' value='删除'> </td>");
deltd.children().click(function () {
tr.remove();
});
nametd.text($("input:eq(0)").val());
salted.text($("input:eq(1)").val());
jobtd.text($("input:eq(2)").val());
tr.append(nametd);
tr.append(salted);
tr.append(jobtd);
tr.append(deltd);
$("table").append(tr);
})
</script>
</body>
动画相关
hide：隐藏，格式hide(500)，hide(时长)。
show：显示
fadeOut：淡出
fadeIn：淡入
slideUp：上划
slideDown：下划
animate：自定义，格式
animate({"left/top":"100px"},500);
animate({"定位":"像素"},时长)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
width: 900px;
position: relative; /*相对定位*/
}
</style>
</head>
<body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="隐藏">
<input type="button" value="显示">
<input type="button" value="淡出">
<input type="button" value="淡入">
<input type="button" value="上划">
<input type="button" value="下划">
<input type="button" value="自定义">
<hr>
<img src="img.jpg" alt="">
<script>
$("input:eq(0)").click(function () {
$("img").hide(500);
})
$("input:eq(1)").click(function () {
$("img").show(500);
})
$("input:eq(2)").click(function () {
$("img").fadeOut(500);
})
$("input:eq(3)").click(function () {
$("img").fadeIn(500);
})
$("input:eq(4)").click(function () {
$("img").slideUp(500);
})
$("input:eq(5)").click(function () {
$("img").slideDown(500);
})
// 平移动画 必须设置定位方式为相对定位或绝对定位，因为left/top这些样式，默认静态定位无效。
$("input:eq(6)").click(function () {
$("img").animate({"left": "200px"}, 500).animate({"top": "200px"}, 500).animate({"left": "0px"}, 500)
.animate({"top": "0px"}, 500).animate({"width": "200px"}, 500).animate({"width":"900px"},500);
})
</script>
</body>
</html>
前端设计模式
MVC设计模式
M:Model模型，指数据模型，数据一般来自于服务器
V:View视图，指页面的各种标签
C:Controller控制器，指将数据模型展示到标签中的过程。
MVVM设计模式
此设计模式避免了大量的dom操作，遍历查询元素，从而提高了执行效率
M：Model模型，数据模型，数据来自服务器
V：View视图，指页面中的各种标签
VM：ViewModel视图模型，视图模型负责将页面中的元素和变量进行绑定，当变量发生改变时页面会自动发生改变。
VUE
VUE框架就是基于MVVM设计模式诞生的一种比较流行的框架。
如何使用？
类似JQuery，也是一个js文件，在html中引入即可。
vue引入: <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="vm_div">
<h1>{{msg}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 创建vue对象。此对象就是一个vm视图模型。负责将页面元素和变量负责绑定
let vm = new Vue({
el: "#vm_div",
data: {msg: "hello world"}
})
let count = 0;
setInterval(function () {
count++;
vm.msg=count;
},500)
// setInterval(function(){} , 1000) 1000就是1s
</script>
</body>
setInterval() 方法会不停地调用函数，直到 [clearInterval()](https://www.runoob.com/jsref/met-win-clearinterval.html) 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 **提示：** 1000 毫秒= 1 秒。
<body>
<div id="vm_div">
<h1>{{msg}}</h1>
</div>
<input type="button" value="Add">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
let vm = new Vue({
el: "#vm_div",
data: {msg: 0}
});
$("input").click(function () {
vm.msg++;
})
</script>
</body>
这篇关于JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-22项目：远程温湿度检测系统
- 2024-12-21《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》简介
- 2024-12-21后台管理系统开发教程：新手入门全指南
- 2024-12-21后台开发教程：新手入门及实战指南
- 2024-12-21后台综合解决方案教程：新手入门指南
- 2024-12-21接口模块封装教程：新手必备指南
- 2024-12-21请求动作封装教程：新手必看指南
- 2024-12-21RBAC的权限教程：从入门到实践
- 2024-12-21登录鉴权实战：新手入门教程
- 2024-12-21动态权限实战入门指南
