JavaScript

发表于 2026-1-26 07:35:31

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

js根本范例

1,在js中有根本范例(string,number,boolean,null,undefined,Symbol),和对象范例
Function,Array,Date,Regexp.
对象范例中除了以上的，还可以使用Object来自界说对象范例。
2. 界说方式三种：
- 第一种：使用{}
- 第二种：使用Object关键字
- 第三种：使用函数模拟构造器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js的Object类型的应用</title>
</head>
<body>
</body>
<script>
var age;
function f1() {
console.log(1 + 2);
}
var emp = {
"name": "zhangsan",
age: 21, // 属性名可以使用变量。
"gender": "男",
"sayHi": function () {
console.log(this.name + "说:我今年" + this.age + "岁");
},
"sum": f1
}
//访问对象的属性和方法
console.log(emp.name);
console.log(emp["age"]);
console.log(emp['age']);
console.log(emp.sayHi); //调用方法时，如果不带(), 其实就是调用属性，将函数当成值进行显示
console.log(emp.sayHi()); //调用方法时，应该带上(),才会执行函数的逻辑体
emp.sum()
//使用object定义
var student = new Object();
//使用变量来绑定对象的属性和方法
student.name = "michael"
student.age = 17
student.study = function () { console.log(this.name + "喜欢学习到深夜") }
student.sleep = function () { console.log(this.name + "喜欢在白天睡觉") }
//调用
console.log(student.name);
console.log(student.age);
console.log(student.study);
student.study();
//第三种方式模拟构造器
function Teacher(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.intro = function () {
console.log(this.name + "," + this.age + "," + this.gender)
};
this.getResult = function (a, b) {
return a + b;
}
}
var t1 = new Teacher("lucy", 15, 'f');
console.log(t1);
console.log(t1.name);
console.log(t1.getResult(2, 3));
console.log(t1.getResult);
</script>
</html> `

复制代码

json字符串JS对象相互转换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="f1()">json字符串(js对象/js数组)转成JS对象</button>
<button onclick="f2()">JS对象转成json字符串(js对象/js数组)</button>
</body>
<script>
function f2() {
var age;
var teacher = { "name": "王大锤", age: 21, "friends": ["王老大", "张老二"], "sayHi": function () { console.log("你好"); } }
console.log(teacher.name);
console.log(teacher.friends[1]);
teacher.sayHi();
//将js对象teacher，转成JSON字符串，调用内置的函数：JSON.stringify(),将js对象传入即可
var JSONStr = JSON.stringify(teacher);
console.log(typeof JSONStr);
console.log(JSONStr);
console.log(teacher);
}
function f1() {
//使用json格式的字符串
var student = '{"name":"michael","age":21,"hobby":["book","music"]}';
console.log(typeof student); //string
//获取字符串里的michael子串。
var str1 = student.substring(9, 16);
console.log(str1);
//将json字符串转成js对象： JSON.parse() ,只需要将json字符串传入到()里，即可
var jsObject = JSON.parse(student);
console.log(typeof jsObject);
//访问属性
console.log(jsObject.name);
console.log(jsObject.hobby[0]);
console.log(jsObject.hobby[1]);
}
</script>
</html>

复制代码

关系运算符

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var a = 10;
var b = 25;
var r1 = a + b;
var r2 = a - b;
var r3 = a * b;
var r4 = b / a;
var r5 = a % b;
var r6 = a++;
var r7 = --b;
console.log(r1, r2, r3, r4, r5, r6, r6);
//关系运算符： > >=, <,<=, ==,!=,===,!==
var x1 = 4;
var x2 = 5;
var re1 = x1 == x2;
console.log(re1);
var re2 = x1 != x2;
console.log(re2);
// 全等：判断值与类型，值和类型一样时，才会返回true
var m1 = "t";
var n1 = 2;
var re3 = m1 === n1;
// 不全等：判断值与类型，只要有一个不一样，就返回true.
var re4 = m1 !== n1;
console.log(re3, re4);
console.log(m1 == n1);
//支持三目运算符
var re5 = x2 < x1 ? "王大锤" : "张三";
console.log(re5);
//逻辑运算符
var a = 1;
var b = 2;
var c = 3;
var d = 4;
//先验证&&
var r1 = a > b && c++ < d;
console.log(r1, c); //false 3
//再验证||
var r1 = a < b || c < d++;
console.log(r1, d); // true 4
</script>
</html>

复制代码

window的对话框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="testAlert()">测试alert框：用于提示警告</button>
<button onclick="testConfirm()">测试确认框: 有确认和取消按钮的提示框</button>
<button onclick="testPrompt()">测试输入框</button>
</body>
<script>
function testAlert() {
window.alert("hello world"); //会阻塞后续的代码执行
alert("hello js");
var name = "高圆圆";
alert(name)
console.log("zhangsan"); //将内容打印到调试界面的控制台上
}
function testConfirm() {
var f = window.confirm("你确定要提交吗")
if (f) {
console.log("正在向服务器提交数据....");
} else {
console.log("不提交了....");
}
}
function testPrompt() {
//输入框：第一个参数是提示文字，第二个参数是输入框里的默认值。
var username = prompt("请输入用户名", "zhangsan")
//输入框有确认和取消按钮，确认表示提交输入框里的信息并返回，可能是具体值，也可能是
// 空字符串。取消按钮提交的null
console.log(username)
}
</script>
</html>

复制代码

window的history和location

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="f1()">history</button>
<button onclick="f2()">location</button>
</body>
<script>
/*
location: window的一个属性对象,用来表示浏览器的地址信息
*/
function f2() {
console.log(window.location);
//获取具体的url及其属性
console.log(location.href);
console.log(location.hostname);
console.log(location.pathname);
console.log(location.protocol);
//修改href的值，跳转到对应的网页地址
location.href = "http://www.baidu.com"
}
/*
history是window的一个属性对象。用来表示浏览器访问的历史记录
*/
function f1() {
var his = window.history;
console.log(his);
//向前
//his.forward(); //相当于浏览器的向右箭头
//向后
//his.back(); //相当于浏览器的向左箭头
his.go(-1); //-1 表示后退， 1表示前进，0表示刷新
}
</script>
</html>

复制代码

window的screen和navigator

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 从window上获取screen屏幕对象
console.log(window.screen.availHeight);
console.log(window.screen.availWidth);
console.log(window.screen.height);
console.log(window.screen.width);
console.log(window.screen.colorDepth); //色彩深度
console.log(window.screen.pixelDepth); //色彩分辨率
//
console.log(navigator.userAgent);
</script>
</html>

复制代码

window的计时变乱方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="testSetTimeOut()">一次性时钟：让代码延迟指定的毫秒数后再执行</button>
<button onclick="testClearTimeOut()">在执行前，取消一次性时钟</button>
<button onclick="testSetInterval()">周期性时钟：指定间隔的毫秒数重复的执行</button>
<button onclick="testClearInterval()">取消周期性时钟</button>
<p id="p1"></p>
</body>
<script>
var l;
function testSetTimeOut() {
/* setTimeout(timeHandler,delay)
第一个参数：timeHandler，要执行的代码逻辑，可以是一个函数。
第二个参数：delay, 指定的延迟时间，单位是毫秒。
*/
l = window.setTimeout(function () {
console.log("hello world")
}, 3000)
}
function testClearTimeOut() {
/* 一次性时钟，是可以在执行前进行取消的操作的
*/
window.clearTimeout(l)
}
var p =document.getElementById("p1");
var intervalTime;
function testSetInterval() {
/*
setInterval(timeHandler,period)
第一个参数：timeHandler，要重复执行的代码逻辑，可以是一个函数。
第二个参数：间隔时间，单位是毫秒
*/
intervalTime = setInterval(function () {
var d = new Date();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var time = hour + ":" + minute + ":" + second;
p.innerText = time;
}, 1000)
}
function testClearInterval() {
window.clearInterval(intervalTime);
}
</script>
</html>

复制代码

document

1. js将整个HTML文档封装到了一个window的属性document里。在document内里维护了一个树形的条理布局。在这个布局中生存了HTML的全部元素及其元素的属性和文本。
2. 可以使用document来查找想要的节点
- 通过id ： getElementById( id值 )
- 通过标署名: getElementsByTagName( 标署名)
- 通过class名： getElementsByClassName( 类名)
- 通过条理布局:
-- parentNode/parentElement: 返回的是当前节点的父节点
-- childNodes: 获取的节点个数以及节点，与换行有关系。
-- children: 会返回真正的子元素节点。
-- firstChild/firstElementChild
-- lastChild/lastElementChild
-- previousSibling/previousElementSibling
-- nextSibling/nextElementSibling

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="d1">
<div id="d2">
<p class="c1">我是一个段落1</p>
</div>
<div id="d3">
<input id="in1" class="c1" type="text" value="zhangsan">
<p>我是一个段落2</p>
</div>
<div id="d4">
</div>
</div>
</body>
<script>
// js里返回的都是对象
var input = document.getElementById("in1");
console.log(input); // 整个元素信息，包括属性，文本，子元素
console.log(input.value);
input.value = "lisi";
//通过标签名查找
var ps = document.getElementsByTagName("p");
console.log("长度：" + ps.length);
console.log(ps[0].innerText);
console.log(ps[1].innerText);
ps[0].innerText = "我是michael"
console.log(ps[0].nodeName);
console.log(ps[0].nodeType);
console.log(ps[0].nodeValue);
console.log(ps[0].innerHTML);
var d3 = document.getElementById("d3");
console.log(d3.innerText);
console.log(d3.innerHTML);
//通过类名获取节点
var cs = document.getElementsByClassName("c1");
console.log(cs.length);
console.log(cs[0].nodeName);
console.log(cs[1].nodeName);
//通过层次关系查找元素：
var input1 = document.getElementById("in1");
var parent = input1.parentElement
console.log(parent.nodeName);
//parent.innerHTML = "<button>按钮</button>"
//获取parent这个节点对象的所有孩子
var cs = parent.childNodes
console.log(cs.length);
console.log(cs);
var cs2 = parent.children;
console.log(cs2.length);
console.log(cs2);
//var c3 = parent.firstChild
var c3 = parent.firstElementChild
console.log(c3.nodeName);
console.log(c3);
//var c4 = parent.lastChild
var c4 = parent.lastElementChild
console.log(c4.nodeName);
console.log(c4);
console.log("------------------------------")
//查找兄弟
var div3 = document.getElementById("d3");
//var brother1 = div3.previousSibling
var brother1 = div3.previousElementSibling
console.log(brother1);
console.log(brother1.nodeName);
//var brother2 = div3.nextSibling
var brother2 = div3.nextElementSibling
console.log(brother2);
console.log(brother2.nodeName);
</script>
</html>

复制代码

DOM的创建节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1 {
border: 1px solid red;
width: 500px;
height: 500px;
}
#d2 {
width: 200px;
height: 200px;
background-color: aqua;
}
#d3 {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
/* window的onload事件可以绑定一个匿名函数。在函数里面写代码逻辑。
执行时机：当整个HTML被浏览器加载完毕后，才会执行该onload事件。
*/
window.onload = function () {
var p = document.createElement("p");
p.setAttribute("id", "p1")
p.setAttribute("class", "c1")
var text = document.createTextNode("我是一个段落");
p.appendChild(text);
console.log(p);
//定位d2元素
var d2 = document.getElementById("d2");
// appendChild(newNode): 添加到父节点中的最后一个子节点后。
d2.appendChild(p)
var p1 = document.createElement("p");
p1.setAttribute("name", "myP")
var txt = document.createTextNode("锄禾日当午")
p1.appendChild(txt)
//将p1插入到d3前面。 // insertBefore(newNode,reNode):
var d1 = document.getElementById("d1")
var d3 = document.getElementById("d3");
d1.insertBefore(p1, d3);
}
</script>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>

复制代码

DOM的更换和删除

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
//创建一个新的span节点
var span = document.createElement("span");
var txt = document.createTextNode("用户名已经被占用")
span.appendChild(txt);
//获取父节点
var d2 = document.getElementById("d2");
var p1 = document.getElementById("p1")
//进行替换操作
d2.replaceChild(span, p1)
//移除d2这个节点
var d1 = document.getElementById("d1")
d1.removeChild(d2)
//获取d1里的属性值
var name = d1.getAttribute("name");
console.log(name);
//移除d1里的class属性
d1.removeAttribute("class")
}
</script>
</head>
<body>
<div id="d1" class="c1" name="n1">
<div id="d2">
<p id="p1">我是一个段落</p>
</div>
</div>
<form action="">
</form>
<form action=""></form>
</body>
</html>

复制代码

变乱模子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
var bn2 = document.getElementById("bn2");
//使用DOM0级方式绑定事件
bn2.onclick = function () {
alert(Math.pow(2, 3));
}
//如果DOM0事件，连续绑定相同的事件，会进行覆盖
bn2.onclick = function () {
alert(Math.pow(3, 3));
}
//使用DOM2级方式绑定事件
var bn3 = document.getElementById("bn3");
bn3.addEventListener('click', function () {
alert("DOM2级绑定事件使用addEventListener方法")
})
//DOM2级方式，连续绑定相同的事件，不会出现覆盖情况
function f2() {
alert("hello world")
}
//绑定事件时，如果设置的是有名字的函数，不要带括号。
bn3.addEventListener('click', f2)
//取消DOM2级事件，当初绑定的事件处理函数，必须有名字，才能取消。
bn3.removeEventListener("click", f2)
}
</script>
</head>
<body>
<button onclick="alert('我是按钮')">DOM0级：HTML里添加事件</button>
<button id="bn2">DOM0级：在script标签里添加事件</button>
<button id="bn3">DOM2级：在script标签里添加事件</button>
</body>
</html>

复制代码

event对象的应用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div onclick="f1(1,event)">我是一个div</div>
<div onclick="f2()">
<p onclick="f3(event)">
<a href="http://www.baidu.com" onclick="f4(event)">我是一个链接</a>
</p>
</div>
</body>
<script>
/* event: 该对象是在事件触发式，自动产生的
如何使用该对象：将event这个值，赋值给形参即可。形参名可以是任何名字
*/
function f1(a, e) {
// target：事件源那个元素对象
console.log(e.target.nodeName);
console.log(e.currentTarget.nodeName);
//事件的名称
console.log(e.type)
console.log(e.clientX, e.clientY);
console.log(e.cancelable);
}
function f2() {
console.log("div");
}
function f3(event) {
console.log("p");
event.cancelBubble = true;
}
function f4(event) {
console.log("a");
event.preventDefault();
event.stopPropagation();
}
</script>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

JavaScript

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

瑞星