前端JavaScript入门学习资源资源-CSDN文库

共23个文件

html：21个

js：1个

jpg：1个

需积分: 5 164 浏览量 2024-02-24 17:01:56 上传评论收藏 16KB 7Z 举报

JavaScript是前端开发中不可或缺的一部分，它是网页动态效果和交互的核心技术。这个压缩包包含了一系列针对初学者的JavaScript学习资源，涵盖了从基础到进阶的重要概念。让我们从基础开始，了解一下JavaScript的数据类型。JavaScript有两种主要的数据类型：基本类型（如字符串、数字、布尔值、null和undefined）和引用类型（主要是对象）。其中，变量（Variables）是用来存储数据的容器，可以用来保存任何数据类型的值。在JavaScript中，声明变量时通常使用`var`、`let`或`const`关键字。接下来，我们来看看对象（Objects），这是JavaScript的一个关键特性。对象是由键值对组成的复杂数据结构，允许我们创建复杂的逻辑和数据模型。你可以通过花括号 `{}` 来创建一个对象，并用点号 `.` 或方括号 `[]` 访问其属性。关于DOM操作，压缩包中的"创建和插入节点.html"、"获取节点.html"和"获取input元素.html"都是这一主题的重要部分。DOM（文档对象模型）是HTML和XML文档的编程接口，它将网页内容表示为树形结构。通过JavaScript，我们可以创建新的DOM节点，插入到现有文档中，或者检索已有的DOM节点。例如，`document.createElement()`用于创建新节点，`appendChild()`或`insertBefore()`用于插入节点，`getElementById()`、`getElementsByClassName()`等方法则用于获取特定的节点。事件处理是JavaScript实现用户交互的关键。"事件处理程序.html"和"常用事件.html"讲解了如何响应用户的动作，如点击、滚动、输入等。事件监听器（Event Listeners）如`addEventListener()`用于注册事件处理函数，而事件触发后，对应的函数会被调用执行相应的逻辑。常见的事件有`click`、`mouseover`、`keydown`等。时间函数如`setTimeout()`和`setInterval()`在JavaScript中也十分常见。它们允许我们延迟执行代码或周期性执行任务。例如，`setTimeout(func, delay)`会在指定延迟后调用函数，而`setInterval(func, interval)`则会每隔一定时间重复执行函数。系统对话框如`alert()`, `prompt()`, 和 `confirm()`在前端开发中用于与用户进行简单交互。`alert()`显示警告消息，`prompt()`用来获取用户输入，`confirm()`则显示确认对话框并返回用户的选择。这个压缩包提供了一个全面的JavaScript入门学习路径，覆盖了从基础语法到DOM操作、事件处理、时间函数以及用户交互等多个重要方面，是初学者理想的自学资源。通过深入学习和实践这些内容，你将能够掌握JavaScript的基本技能，为进一步的前端开发打下坚实的基础。

资源推荐

资源详情

资源评论

收起资源包目录

JavaScript.7z （23个子文件）

系统对话框.html 1KB

常用事件.html 2KB

函数.html 744B

时间函数.html 1KB

事件.html 784B

location对象.html 697B

创建和插入节点.html 6KB

打开窗口.html 877B

相等和全等.html 342B

数据类型.html 2KB

对象的序列化和反序列化.html 701B

获取单选按钮.html 1017B

获取input元素.html 2KB

变量.html 2KB

类型转换.html 1KB

事件处理程序.html 2KB

hello.jpg 7KB

对象.html 2KB

test.js 21B

获取节点.html 3KB

基本用法.html 1KB

数组.html 946B

JS表单.html 1KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建和插入节点</title>  </head> <body> <button onclick="addPara()">添加段落</button> <button onclick="addImg()">添加图片</button> <button onclick="addTxt()">添加文本框</button> <button onclick="addOptions()">添加选项</button> <select name="music"> <option value="-1">你心中的一首歌</option> <option value="0">浪子归心</option> <option value="1">不可犹豫</option> </select> <hr /> <div id="container"> </div> <ul> <li id="red">红色</li> <li>绿色</li> </ul> <hr /> </body> <script type="text/javascript"> // 添加段落 function addPara(){ /*方式一*/ /* // 创建p元素 var p=document.createElement("p"); console.log(p); // 创建文本节点 var txt=document.createTextNode("这是一段文本"); console.log(txt); // 将文本节点追加到元素节点当中 p.appendChild(txt); console.log(p); // 获取容器 var div=document.getElementById("container"); // 将p标签设置到div中 div.appendChild(p); */ /*方式二*/ // 创建p元素 /* var p=document.createElement("p"); // 给p元素赋值 p.innerHTML="这是一段文本"; console.log(p); // 获取容器 var div=document.getElementById("container"); // 将p标签设置到div中 div.appendChild(p); */ /*方式三*/ var p="<p>这是文本</p>"; // 获取容器 var div=document.getElementById("container"); div.innerHTML+=p; } // 添加图片 function addImg(){ // 获取容器 var div=document.getElementById("container"); /*方式一*/ /* // 创建img元素 var img=document.createElement("img"); console.log(img); // 设置属性 img.src="hello.jpg"; // 设置宽高属性 img.width=200; img.height=200; // 将图片设置到div容器中 div.appendChild(img); */ /*方式二*/ /* // 创建img元素 var img=document.createElement("img"); img.setAttribute("src","hello.jpg"); // 将图片设置div容器中 div.appendChild(img); */ /*方式三*/ var img="<img src='hello.jpg' />"; div.innerHTML+=img; //加入+才会连续添加 } // 添加文本框 function addTxt(){ // 得到容器元素 var div=document.getElementById("container"); /*方式一*/ /* // 创建input元素 var inp=document.createElement("input"); // 指定input元素的类型 inp.type="text"; //文本框input类型 inp.value="今天天气不错!"; // 文本框的值 // 将input设置到容器中 div.appendChild(inp); */ /*方式二*/ /* // 创建input元素 var inp=document.createElement("input"); // 设置属性 inp.setAttribute("type","text"); inp.setAttribute("value","您好"); // 将input设置到容器中 div.appendChild(inp); */ /*方式三*/ var inp="<input type='text' value='hello' />"; div.innerHTML+=inp; } // 添加下拉框 function addOptions(){ // 通过name属性值获取下拉框对象 var music=document.getElementsByName("music")[0]; /*方式一*/ /* // 创建下拉选项 var opt=document.createElement("option"); // 设置文本和值 opt.value="2"; opt.text="晴天"; // 给下拉框添加下拉选项 music.appendChild(opt); */ /*方式二*/ /* // 创建下拉选项 var opt=document.createElement("option"); opt.value="2"; opt.text="青花瓷"; // 将option添加到下拉列表中 console.log(music.options); music.options.add(opt); */ /*方式三*/ var opt='<option value="2">千里之外</option>'; music.innerHTML+=opt; } // write将任意的字符串插入到文档中 document.write("<h2>您好</h2>"); // insertBefore() var li=document.createElement("li"); var txt=document.createTextNode("粉色"); li.appendChild(txt); document.getElementById("red").parentElement.insertBefore(li,document.getElementById("red")); </script> </html>

评论收藏

内容反馈