最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我特地针对初学者整理一套前端学习资料
window对象的常用属性如下
history :用户访问过的统一资源定位符(Uniform Resource Locator,URL)信息。
location:当前的URL信息。
screen:只读属性,包含客户端显示屏幕的信息。
window对象的常用方法如下
- alert(): 显示一个带确定的警示对话框。
alert("这是一个警示对话框!");
- confirm():显示一个带确定和取消按钮的对话框
if (confirm("确定要执行这个操作吗?")) {
console.log("用户点击了确定按钮");
} else {
console.log("用户点击了取消按钮");
}
- promot():显示可提示用户输入的对话框
var name = prompt("请输入您的名字:");
console.log("您输入的名字是:" + name);
- open():打开一个新的浏览器窗口,加载给定URL所指定的文档
window.open("https://www.example.com", "\_blank");
- close():关闭浏览器窗口
window.close();//请注意,这个方法只能关闭由 JavaScript 打开的新窗口,而无法关闭当前的窗口
- setInterval():间隔指定的毫秒数不停地执行指定的代码
var intervalId = setInterval(function() {
console.log("每隔一秒执行一次");
}, 1000);
- clearInrerval():用于停止setInterval()方法的执行的函数代码
clearInterval(intervalId);
- setTimeout():在指定的毫秒数后执行指定的代码
setTimeout(function() {
console.log("两秒后执行");
}, 2000);
- clearTimeout(): 用于停止setTimeout()方法的执行的函数代码
var timeoutId = setTimeout(function() {
console.log("这段代码不会被执行");
}, 2000);
clearTimeout(timeoutId);
//timeoutId 是之前使用 setTimeout() 创建的定时任务的 ID。通过调用 clearTimeout() 方法,定时任务将被取消,代码不会在延迟后执行
2.history对象
history常用的属性和方法如下
类别 | 名称 | 作用 |
---|---|---|
属性 | length | 返回历史记录列表中的网址数 |
方法 | ||
go() | ||
加载history列表中的某个具体页面 | ||
forward() | ||
加载history中的下一个URL | ||
back() | ||
加载history中的前一个URL | ||
- 代码示例
// 后退一页
history.back();
// 前进一页
history.forward();
// 跳转到历史记录中的特定页面
history.go(-2); // 后退两页
3.location对象
location对象常用属性和方法如下
类别 | 名称 | 作用 |
---|---|---|
属性 | host | 返回服务器名称和端口号 |
hostname | 返回不带端口号的服务器名称 | |
href | 返回当前加载页面的完整URL | |
方法 | reload() | 重新加载当前文档 |
replace() | 用新的文档替换当前文档 |
<!-- 示例 -->
<p>属性示例:</p>
<ul>
<li>host: <span id="hostExample"></span></li>
<li>hostname: <span id="hostnameExample"></span></li>
<li>href: <span id="hrefExample"></span></li>
</ul>
<button onclick="getAttributeExamples()">显示属性示例</button>
<p>方法示例:</p>
<button onclick="reloadPage()">点击重新加载当前文档</button>
<button onclick="replaceDocument()">点击用新的文档替换当前文档</button>
<script>
// 属性示例
document.getElementById("hostExample").innerText = window.location.host;
document.getElementById("hostnameExample").innerText = window.location.hostname;
document.getElementById("hrefExample").innerText = window.location.href;
function getAttributeExamples() {
alert(
"host属性示例: " + window.location.host + "\n" +
"hostname属性示例: " + window.location.hostname + "\n" +
"href属性示例: " + window.location.href
);
}
// 方法示例
function reloadPage() {
location.reload();
}
function replaceDocument() {
location.replace("https://www.example.com");
}
</script>
4.document对象
方法 | 作用 |
---|---|
getElementById() | 通过元素的 ID 属性获取元素节点 |
getElementsByTagName() | 通过标签名获取元素节点的集合 |
getElementsByClassName() | 通过类名获取元素节点的集合 |
write() | 向文档写入内容 |
<!DOCTYPE html>
<html>
<head>
<title>DOM操作示例</title>
</head>
<body>
<h2>使用 getElementById 获取元素节点:</h2>
<p id="demo">这是一个示例段落。</p>
<h2>使用 getElementsByTagName 获取元素节点的集合:</h2>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<h2>使用 getElementsByClassName 获取元素节点的集合:</h2>
<p class="fruit">这些都是水果。</p>
<p class="fruit">喜欢吃水果吗?</p>
<script>
// 使用 getElementById 获取元素节点
var demoElement = document.getElementById("demo");
demoElement.style.color = "blue";
// 使用 getElementsByTagName 获取元素节点的集合
var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
listItems[i].style.fontWeight = "bold";
}
// 使用 getElementsByClassName 获取元素节点的集合
var fruitParagraphs = document.getElementsByClassName("fruit");
for (var j = 0; j < fruitParagraphs.length; j++) {
fruitParagraphs[j].style.backgroundColor = "#f9f9f9";
}
document.write("这是使用 document.write 写入的内容。");
</script>
</body>
</html>
5.Array对象
- 创建数组
var fruits = ["apple", "banana", "orange"];
- 为数组元素赋值
//方法一
var myArray = [];
// 使用 push() 方法向数组添加元素
myArray.push("apple");
myArray.push("banana");
myArray.push("orange");
//方法二
// 创建一个空数组
var myArray = [];
// 通过索引为数组元素赋值
myArray[0] = "apple";
myArray[1] = "banana";
myArray[2] = "orange";
- 数组的常用属性和方法
类别 | 名称 | 作用 |
---|---|---|
属性 | length | 表示数组的长度,即数组中元素的个数 |
方法 | ||
join() | ||
把数组的元素放入字符串,用分隔符进行分隔 | ||
sort() | ||
方法用于对数组元素进行排序 | ||
push() | ||
将一个或多个元素添加到数组的末尾,并返回修改后数组的长度 | ||
forEach() | ||
对数组中的每个元素执行一次提供的函数 | ||
// 属性示例
var myArray = [1, 2, 3, 4, 5];
console.log(myArray.length); // 输出:5
// 方法示例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var joinedFruits = fruits.join(", ");
console.log(joinedFruits); // 输出:Banana, Orange, Apple, Mango
var numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort();
console.log(numbers); // 输出:[1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
var animals = ["cat", "dog"];
animals.push("elephant", "lion");
console.log(animals); // 输出:["cat", "dog", "elephant", "lion"]
var colors = ["red", "green", "blue"];
colors.forEach(function(color) {
console.log(color);
});
// 输出:
// red
### 最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『**难的不会,会的不难**』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
**我特地针对初学者整理一套前端学习资料**
![前端路线图](https://img-blog.csdnimg.cn/img_convert/cb5c6b1c6a128c1b23daa15398cc445a.webp?x-oss-process=image/format,png)
![vue.js的36个技巧](https://img-blog.csdnimg.cn/img_convert/187ebffb8f57f64bbe61cc66f555bb60.webp?x-oss-process=image/format,png)
// 输出:
// red
### 最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『**难的不会,会的不难**』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
**我特地针对初学者整理一套前端学习资料**
[外链图片转存中...(img-0BEaB7Nu-1715171467072)]
[外链图片转存中...(img-E8yllK3l-1715171467073)]