大家好,又见面了,我是你们的朋友全栈君。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS快速入门</title>
</head>
<body>
<button id="btn">点我呀</button>
</body>
</html>
<script> document.getElementById("btn").onclick=function () {
alert("点我干嘛?"); } </script>
JavaScript 属于弱类型的语言,定义变量时不区分具体的数据类型。
typeof 用于判断变量的数据类型
let age = 18;
document.write(typeof(age)); // number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的获取</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" name="username"/>
</body>
<script> //1. getElementById() 根据id属性值获取元素对象 let div1 = document.getElementById("div1"); //alert(div1); //2. getElementsByTagName() 根据元素名称获取元素对象们,返回数组 let divs = document.getElementsByTagName("div"); //alert(divs.length); //3. getElementsByClassName() 根据class属性值获取元素对象们,返回数组 let cls = document.getElementsByClassName("cls"); //alert(cls.length); //4. getElementsByName() 根据name属性值获取元素对象们,返回数组 let username = document.getElementsByName("username"); //alert(username.length); //5. 子元素对象.parentElement属性 获取当前元素的父元素 let body = div1.parentElement; alert(body); </script>
</html>
事件指的就是当某些组件执行了某些操作后,会触发某些代码的执行。
绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style> table{
border: 1px solid; margin: auto; width: 500px; } td,th{
text-align: center; border: 1px solid; } div{
text-align: center; margin: 50px; } </style>
</head>
<body>
<div>
<input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
<input type="text" id="age" placeholder="请输入年龄" autocomplete="off">
<input type="text" id="gender" placeholder="请输入性别" autocomplete="off">
<input type="button" value="添加" id="add">
</div>
<table id="tb">
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>男</td>
<td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
</tr>
</table>
</body>
<script> //一、添加功能 //1.为添加按钮绑定单击事件 document.getElementById("add").onclick = function(){
//2.创建行元素 let tr = document.createElement("tr"); //3.创建4个单元格元素 let nameTd = document.createElement("td"); let ageTd = document.createElement("td"); let genderTd = document.createElement("td"); let deleteTd = document.createElement("td"); //4.将td添加到tr中 tr.appendChild(nameTd); tr.appendChild(ageTd); tr.appendChild(genderTd); tr.appendChild(deleteTd); //5.获取输入框的文本信息 let name = document.getElementById("name").value; let age = document.getElementById("age").value; let gender = document.getElementById("gender").value; //6.根据获取到的信息创建3个文本元素 let nameText = document.createTextNode(name); let ageText = document.createTextNode(age); let genderText = document.createTextNode(gender); //7.将3个文本元素添加到td中 nameTd.appendChild(nameText); ageTd.appendChild(ageText); genderTd.appendChild(genderText); //8.创建超链接元素和显示的文本以及添加href属性 let a = document.createElement("a"); let aText = document.createTextNode("删除"); a.setAttribute("href","JavaScript:void(0);"); a.setAttribute("onclick","drop(this)"); a.appendChild(aText); //9.将超链接元素添加到td中 deleteTd.appendChild(a); //10.获取table元素,将tr添加到table中 let table = document.getElementById("tb"); table.appendChild(tr); } </script>
</html>
//二、删除的功能
//1.为每个删除超链接标签添加单击事件的属性
//2.定义删除的方法
function drop(obj){
//3.获取table元素
let table = obj.parentElement.parentElement.parentElement;
//4.获取tr元素
let tr = obj.parentElement.parentElement;
//5.通过table删除tr
table.removeChild(tr);
}
在 Java 中我们学习过面向对象,核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number</title>
</head>
<body>
</body>
<script> //1. parseFloat() 将传入的字符串浮点数转为浮点数 document.write(Number.parseFloat("3.14") + "<br>"); //2. parseInt() 将传入的字符串整数转为整数 document.write(Number.parseInt("100") + "<br>"); document.write(Number.parseInt("200abc") + "<br>"); // 从数字开始转换,直到不是数字为止 </script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math</title>
</head>
<body>
</body>
<script> //1. ceil(x) 向上取整 document.write(Math.ceil(4.4) + "<br>"); // 5 //2. floor(x) 向下取整 document.write(Math.floor(4.4) + "<br>"); // 4 //3. round(x) 把数四舍五入为最接近的整数 document.write(Math.round(4.1) + "<br>"); // 4 document.write(Math.round(4.6) + "<br>"); // 5 //4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾) document.write(Math.random() + "<br>"); // 随机数 //5. pow(x,y) 幂运算 x的y次方 document.write(Math.pow(2,3) + "<br>"); // 8 </script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date</title>
</head>
<body>
</body>
<script> //构造方法 //1. Date() 根据当前时间创建对象 let d1 = new Date(); document.write(d1 + "<br>"); //2. Date(value) 根据指定毫秒值创建对象 let d2 = new Date(10000); document.write(d2 + "<br>"); //3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11) let d3 = new Date(2222,2,2,20,20,20); document.write(d3 + "<br>"); //成员方法 //1. getFullYear() 获取年份 document.write(d3.getFullYear() + "<br>"); //2. getMonth() 获取月份 document.write(d3.getMonth() + "<br>"); //3. getDate() 获取天数 document.write(d3.getDate() + "<br>"); //4. toLocaleString() 返回本地日期格式的字符串 document.write(d3.toLocaleString()); </script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String</title>
</head>
<body>
</body>
<script> //1. 构造方法创建字符串对象 let s1 = new String("hello"); document.write(s1 + "<br>"); //2. 直接赋值 let s2 = "hello"; document.write(s2 + "<br>"); //属性 //1. length 获取字符串的长度 document.write(s2.length + "<br>"); //成员方法 //1. charAt(index) 获取指定索引处的字符 document.write(s2.charAt(1) + "<br>"); //2. indexOf(value) 获取指定字符串出现的索引位置 document.write(s2.indexOf("l") + "<br>"); //3. substring(start,end) 根据指定索引范围截取字符串(含头不含尾) document.write(s2.substring(2,4) + "<br>"); //4. split(value) 根据指定规则切割字符串,返回数组 let s3 = "张三,23,男"; let arr = s3.split(","); for(let i = 0; i < arr.length; i++) {
document.write(arr[i] + "<br>"); } //5. replace(old,new) 使用新字符串替换老字符串 let s4 = "你会不会跳伞啊?让我落地成盒。你妹的。"; let s5 = s4.replace("你妹的","***"); document.write(s5 + "<br>"); </script>
</html>
正则表达式:是一种对字符串进行匹配的规则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RegExp</title>
</head>
<body>
</body>
<script> //1.验证手机号 //规则:第一位1,第二位358,第三到十一位必须是数字。总长度11 let reg1 = /^[1][358][0-9]{9}$/; document.write(reg1.test("18688888888") + "<br>"); //2.验证用户名 //规则:字母、数字、下划线组成。总长度4~16 let reg2 = /^[a-zA-Z_0-9]{4,16}$/; document.write(reg2.test("zhang_san123")); </script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array</title>
</head>
<body>
</body>
<script> let arr = [1,2,3,4,5]; //1. push(元素) 添加元素到数组的末尾 arr.push(6); document.write(arr + "<br>"); //2. pop() 删除数组末尾的元素 arr.pop(); document.write(arr + "<br>"); //3. shift() 删除数组最前面的元素 arr.shift(); document.write(arr + "<br>"); //4. includes(元素) 判断数组中是否包含指定的元素 document.write(arr.includes(2) + "<br>"); //5. reverse() 反转数组元素 arr.reverse(); document.write(arr + "<br>"); //6. sort() 对数组元素排序 arr.sort(); document.write(arr + "<br>"); </script>
</html>
JavaScript 中的 Set 集合,元素唯一,存取顺序一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set</title>
</head>
<body>
</body>
<script> // Set() 创建集合对象 let s = new Set(); // add(元素) 添加元素 s.add("a"); s.add("b"); s.add("c"); s.add("c"); // size属性 获取集合的长度 document.write(s.size + "<br>"); // 3 // keys() 获取迭代器对象 let st = s.keys(); for(let i = 0; i < s.size; i++){
document.write(st.next().value + "<br>"); } // delete(元素) 删除指定元素 document.write(s.delete("c") + "<br>"); let st2 = s.keys(); for(let i = 0; i < s.size; i++){
document.write(st2.next().value + "<br>"); } </script>
</html>
JavaScript 中的 Map 集合,key 唯一,存取顺序一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
</head>
<body>
</body>
<script> // Map() 创建Map集合对象 let map = new Map(); // set(key,value) 添加元素 map.set("张三",23); map.set("李四",24); map.set("李四",25); // size属性 获取集合的长度 document.write(map.size + "<br>"); // get(key) 根据key获取value document.write(map.get("李四") + "<br>"); // entries() 获取迭代器对象 let et = map.entries(); for(let i = 0; i < map.size; i++){
document.write(et.next().value + "<br>"); } // delete(key) 根据key删除键值对 document.write(map.delete("李四") + "<br>"); let et2 = map.entries(); for(let i = 0; i < map.size; i++){
document.write(et2.next().value + "<br>"); } </script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON</title>
</head>
<body>
</body>
<script> //定义天气对象 let weather = {
city : "北京", date : "2088-08-08", wendu : "10° ~ 23°", shidu : "22%" }; //1.将天气对象转换为JSON格式的字符串 let str = JSON.stringify(weather); document.write(str + "<br>"); //2.将JSON格式字符串解析成JS对象 let weather2 = JSON.parse(str); document.write("城市:" + weather2.city + "<br>"); document.write("日期:" + weather2.date + "<br>"); document.write("温度:" + weather2.wendu + "<br>"); document.write("湿度:" + weather2.shidu + "<br>"); </script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单校验</title>
<link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
<div class="login-form-wrap">
<h1>黑马程序员</h1>
<form class="login-form" action="#" id="regist" method="get" autocomplete="off">
<label>
<input type="text" id="username" name="username" placeholder="Username..." value="">
</label>
<label>
<input type="password" id="password" name="password" placeholder="Password..." value="">
</label>
<input type="submit" value="注册">
</form>
</div>
</body>
<script> //1.为表单绑定提交事件 document.getElementById("regist").onsubmit = function() {
//2.获取填写的用户名和密码 let username = document.getElementById("username").value; let password = document.getElementById("password").value; //3.判断用户名是否符合规则 4~16位纯字母 let reg1 = /^[a-zA-Z]{4,16}$/; if(!reg1.test(username)) {
alert("用户名不符合规则,请输入4到16位的纯字母!"); return false; } //4.判断密码是否符合规则 6位纯数字 let reg2 = /^[\d]{6}$/; if(!reg2.test(password)) {
alert("密码不符合规则,请输入6位纯数字的密码!"); return false; } //5.如果所有条件都不满足,则提交表单 return true; } </script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window窗口对象</title>
<script> //一、定时器 function fun(){
alert("该起床了!"); } //设置一次性定时器 //let d1 = setTimeout("fun()",3000); //取消一次性定时器 //clearTimeout(d1); //设置循环定时器 //let d2 = setInterval("fun()",3000); //取消循环定时器 //clearInterval(d2); //加载事件 window.onload = function(){
let div = document.getElementById("div"); alert(div); } </script>
</head>
<body>
<div id="div">dddd</div>
</body>
<!-- <script> //一、定时器 function fun(){ alert("该起床了!"); } //设置一次性定时器 //let d1 = setTimeout("fun()",3000); //取消一次性定时器 //clearTimeout(d1); //设置循环定时器 //let d2 = setInterval("fun()",3000); //取消循环定时器 //clearInterval(d2); //加载事件 let div = document.getElementById("div"); alert(div); </script> -->
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>location地址栏对象</title>
<style> p{
text-align: center; } span{
color: red; } </style>
</head>
<body>
<p>
注册成功!<span id="time">5</span>秒之后自动跳转到首页...
</p>
</body>
<script> //1.定义方法。改变秒数,跳转页面 let num = 5; function showTime() {
num--; if(num <= 0) {
//跳转首页 location.href = "index.html"; } let span = document.getElementById("time"); span.innerHTML = num; } //2.设置循环定时器,每1秒钟执行showTime方法 setInterval("showTime()",1000); </script>
</html>
<!-- 广告图片 -->
<img src="img/ad_big.jpg" id="ad_big" width="100%"/>
style="display: none;"
//1.设置定时器,3秒后显示广告图片
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "block";
},3000);
//2.设置定时器,3秒后隐藏广告图片
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "none";
},6000);
封装思想
我们之前的操作都是基于原生 JavaScript 的,比较繁琐。 JQuery 是一个前端框架技术,针对 JavaScript 进行了一系列的封装,使得操作变得非常简单! 期待吧……
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/160700.html原文链接:https://javaforall.cn