JavaScript入门宝典：核心知识全攻略（下）

news2025/1/21 12:09:06

在这里插入图片描述

文章目录

  • 前言
  • 一、获取标签元素
  • 二、操作标签元素属性
    • 1. 属性的操作
    • 2. innerHTML
  • 三、数组及操作方法
    • 1. 数组的定义
    • 2. 数组的操作
  • 四、循环语句
  • 五、字符串拼接
  • 六、定时器
    • 1. 定时器的使用
    • 3. 清除定时器
  • 七、ajax
    • 1. ajax的介绍
    • 2. ajax的使用

前言

    JavaScript是前端开发不可或缺的技能。本文将引导读者掌握其核心技术，包括获取和操作HTML元素、JS数组操作、循环语句、字符串拼接、定时器使用和AJAX技术。

一、获取标签元素

可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    alert(oDiv);
</script>
<div id="div1">这是一个div元素</div>

注意：
上面的代码，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载。

解决方法有两种:

第一种方法：将javascript放到页面最下边

<div id="div1">这是一个div元素</div>

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    alert(oDiv);
</script>

第二种方法：设置页面加载完成执行的函数，在执行函数里面获取标签元素。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

说明:
onload是页面所有元素加载完成的事件，给onload设置函数时，当事件触发就会执行设置的函数。

二、操作标签元素属性

1. 属性的操作

属性名在js中的写法：

  1. html的属性和js里面属性大多数写法一样，但是“class” 属性写成 “className”
  2. “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
<style>
    .sty01{
        font-size:20px;
        color:red;
    }
    .sty02{
        font-size:30px;
        color:pink;
        text-decoration:none;
    }

</style>

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;

        // 操作class属性,需要写成“className”
        oA.className = 'sty02';

        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

<input type="text" name="setsize" id="input1" value="20px">
<a href="#" id="link01" class="sty01">这是一个链接</a>

2. innerHTML

innerHTML可以读取或者设置标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="http://www.baidu.com">百度<a/>';
    }
</script>


<div id="div1">这是一个div元素</div>

该处使用的url网络请求的数据。

三、数组及操作方法

1. 数组的定义

// 实例化对象方式创建
var aList = new Array(1,2,3);

// 字面量方式创建，推荐使用
var aList2 = [1,2,3,'asd'];

//多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组。
var aList = [[1,2,3],['a','b','c']];

2. 数组的操作

获取数组的长度：

var aList = [1,2,3,4];
alert(aList.length); // 弹出4

根据下标取值：

var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

从数组最后添加和删除数据：

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

根据下标添加和删除元素：

arr.splice(start,num,element1,.....,elementN)

参数解析：
1. start：必需，开始删除的索引。
2. num：可选，删除数组元素的个数。
3. elementN：可选，在start索引位置要插入的新元素。

ps：此方法会删除从start索引开始的num个元素，并将elementN参数插入到start索引位置。

代码示例：

var colors = ["red", "green", "blue"];
colors.splice(0,1);  //删除第一项
alert(colors);  //green,blue

colors.splice(1, 0, "yellow", "orange");  //从第一个索引位置插入两项数据
alert(colors);  //green,yellow,organge,blue

colors.splice(1, 1, "red", "purple");  //删除一项，插入两项数据
alert(colors);  //green,red,purple,orange,blue

四、循环语句

  • for
  • while
  • do-while
//for 循环
var array = [1, 4, 5];

for(var index = 0; index < array.length; index++){
    result = array[index];
    alert(result);
}

//while 循环
var array = [1, 4, 5];        
var index = 0;

while (index < array.length) {
    result = array[index];
    alert(result);
    index++;
}

//do-while 循环
var array = [1, 4, 5];
var index = 0;

do {
    result = array[index];
    alert(result);
    index++;
} while (index < array.length);

五、字符串拼接

字符串拼接使用: “+” 运算符

var iNum1 = 10;
var fNum2 = 11.1;
var sStr = 'abc';

result = iNum1 + fNum2;
alert(result); // 弹出21.1

result = fNum2 + sStr;
alert(result); // 弹出11.1abc

六、定时器

定时器就是在一段特定的时间后执行某段程序代码。

1. 定时器的使用

js 定时器有两种创建方式：

  1. setTimeout(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器
  2. setInterval(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器

setTimeout函数的参数说明:

  • 第一个参数 func , 表示定时器要执行的函数名
  • 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
  • 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。
<script> 
    function hello(){ 
        alert('hello'); 
    } 

    // 执行一次函数的定时器
    setTimeout(hello, 500);
</script>

setInterval函数的参数说明:

  • 第一个参数 func , 表示定时器要执行的函数名
  • 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
  • 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。
<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重复执行函数的定时器
    setInterval(hello, 1000);
</script>

3. 清除定时器

js 清除定时器分别是:

  • clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
  • clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)

clearTimeout函数的参数说明:

  • timeoutID 为调用 setTimeout 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout 所设定的定时执行操作。
<script>
    function hello(){
        alert('hello');
        // 清除只执行一次的定时器
        clearTimeout(t1)
    }
    // 执行一次函数的定时器
    t1 = setTimeout(hello, 500);
</script>

clearInterval函数的参数说明:

  • timeoutID 为调用 setInterval 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval 所设定的定时执行操作。
<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重复执行函数的定时器
    var t1 = setInterval(hello, 1000);

    function stop(){
        // 清除反复执行的定时器
        clearInterval(t1); 
    }  

</script> 

<input type="button" value="停止" onclick="stop();">

七、ajax

1. ajax的介绍

ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

注意：在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

2. ajax的使用

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

示例代码:

在服务端没有开启cookie的时候，可以正常请求，如果需要cookie或者session需要配置xhrFields:{withCredentials:true}

<script>
    var obj = {
        name:'站桑'
    }
    $.ajax({
    // 1.url 请求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 请求方式，默认是'GET'，常用的还有'POST'
    type:'GET',
    // 3.dataType 设置返回的数据格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 设置发送给服务器的数据, 没有参数不需要设置
	data:obj,
    // 5.success 设置请求成功后的回调函数
    success:function (response) {
        console.log(response);    
    },
    // 6.error 设置请求失败后的回调函数
    error:function () {
        alert("请求失败,请稍后再试!");
    },
    // 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
    async:true
});
</script>

ajax方法的参数说明:

  1. url 请求地址
  2. type 请求方式，默认是’GET’，常用的还有’POST’
  3. dataType 设置返回的数据格式，常用的是’json’格式
  4. data 设置发送给服务器的数据，没有参数不需要设置
  5. success 设置请求成功后的回调函数
  6. error 设置请求失败后的回调函数
  7. async 设置是否异步，默认值是’true’，表示异步，一般不用写
  8. xhrFields:{withCredentials:true}, 与后端跨域配合设置，允许携带cookie
  9. 同步和异步说明
    • 同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
    • 异步是多个ajax同时请求，不需要等待其它ajax请求完成， 好比线程异步。

ajax的简写方式:

$.ajax按照请求方式可以简写成$.get或者$.post方式

ajax简写方式的示例代码:

 <script>
    $(function(){
        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("网络异常");
        });

        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name); 
            console.log(data.time); 
        }, "json").error(function(){
            alert("网络异常");
        }); 
    });
</script>

$.get和$.post方法的参数说明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)

  1. url 请求地址
  2. data 设置发送给服务器的数据，没有参数不需要设置
  3. success 设置请求成功后的回调函数
    • data 请求的结果数据
    • status 请求的状态信息, 比如: “success”
    • xhr 底层发送http请求XMLHttpRequest对象
  4. dataType 设置返回的数据格式
    • “xml”
    • “html”
    • “text”
    • “json”
  5. error 表示错误异常处理
    • func 错误异常回调函数

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1801407.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++| 一维线性插值、imadjust函数

C++| 一维线性插值、imadjust函数

前言&#xff1a;最近要从Matlab代码改C代码&#xff0c;不能直接用Matlab生成的C代码&#xff0c;因为需要嵌入到已有项目中。Matlab本身有很多很方便的数学公式&#xff0c;但是在C里没有相关的库的话&#xff0c;需要自己实现。 一维线性插值、imadjust函数 一维线性插值原理…
阅读更多...
常见八大排序(纯C语言版)

常见八大排序(纯C语言版)

目录 基本排序 一.冒泡排序 二.选择排序 三.插入排序 进阶排序&#xff08;递归实现&#xff09; 一.快排hoare排序 1.单趟排序 快排步凑 快排的优化 &#xff08;1&#xff09;三数取中 &#xff08;2&#xff09;小区间优化 二.前后指针法(递归实现) 三.快排的非…
阅读更多...
【爬虫】使用Python爬取百度学术页面的标题、作者、摘要和关键词

【爬虫】使用Python爬取百度学术页面的标题、作者、摘要和关键词

目录 安装所需库编写爬虫代码解释运行脚本结果 在本文中&#xff0c;我将介绍如何使用Python编写一个网络爬虫&#xff0c;从百度学术页面提取研究论文的标题、作者、摘要和关键词。我们将使用 requests和 BeautifulSoup库来实现这一目标。 安装所需库 首先&#xff0c;确保…
阅读更多...
力扣hot100：155. 最小栈（栈，辅助栈存储相关信息）

力扣hot100：155. 最小栈（栈，辅助栈存储相关信息）

LeetCode&#xff1a;155. 最小栈 1、尝试单调栈 看到这题说&#xff0c;要常数时间内检索最小元素的栈&#xff0c;想到了单调栈&#xff0c;递增单调栈确实能维护最小值&#xff0c;但是这个最小值是存在一定意义的&#xff0c;即如果后面出现了最小值&#xff0c;那么前面…
阅读更多...
PostgreSQL基础（十）：PostgreSQL的并发问题

PostgreSQL基础（十）：PostgreSQL的并发问题

文章目录 PostgreSQL的并发问题 一、事务的隔离级别 二、MVCC PostgreSQL的并发问题 一、事务的隔离级别 在不考虑隔离性的前提下&#xff0c;事务的并发可能会出现的问题&#xff1a; 脏读&#xff1a;读到了其他事务未提交的数据。&#xff08;必须避免这种情况&#xf…
阅读更多...
【Java】解决Java报错：NumberFormatException

【Java】解决Java报错：NumberFormatException

文章目录 引言1. 错误详解2. 常见的出错场景2.1 字符串包含非数字字符2.2 空字符串或 null 字符串2.3 数值超出范围 3. 解决方案3.1 验证字符串格式3.2 使用异常处理3.3 处理空字符串和 null 4. 预防措施4.1 数据验证4.2 编写防御性代码4.3 单元测试 结语 引言 在Java编程中&a…
阅读更多...
【百万字详解Redis】集群

【百万字详解Redis】集群

文章目录 一、集群模式概述1.1、什么是集群模式1.2、集群模式特点1.3、集群工作方式 二、集群模式的搭建2.1、搭建前的准备2.2、修改集群配置2.3、启动redis服务2.4、创建集群2.5、查看redis服务状态2.6、进入一个节点2.7、测试操作 三、集群操作3.1、主从切换3.2、从节点操作3…
阅读更多...
微软 Windows 10 22H2 发布可选更新 19045.4474，修复窗口显示问题等

微软 Windows 10 22H2 发布可选更新 19045.4474，修复窗口显示问题等

微软今天面向 Windows 10 22H2 版本&#xff0c;发布了 KB5037849 非安全可选更新&#xff0c;用户安装后版本号升至 Build 19045.4474。 IT之家 5 月 30 日消息&#xff0c;微软今天面向 Windows 10 22H2 版本&#xff0c;发布了 KB5037849 非安全可选更新&#xff0c;用户安…
阅读更多...
搭建 Langchain-Chatchat 详细过程

搭建 Langchain-Chatchat 详细过程

前言 本文参考官网和其他多方教程&#xff0c;将搭建 Langchain-Chatchat 的详细步骤进行了整理&#xff0c;供大家参考。 我的硬件 4090 显卡win10 专业版本 搭建环境使用 chatglm2-6b 模型 1. 创建虚拟环境 chatchat &#xff0c;python 3.9 以上 conda create -n chat…
阅读更多...
【机器学习300问】110、什么是Lasso回归模型？

【机器学习300问】110、什么是Lasso回归模型？

LASSO回归的全称是Least Absolute Shrinkage and Selection Operator&#xff0c;中文叫“最小绝对收缩和选择算子”&#xff0c;用一个比喻来初步感受一下它的作用&#xff1a; 想象你在整理一个杂乱无章的房间&#xff0c;里面堆满了各种物品&#xff08;代表众多的预测变量&…
阅读更多...
python数据可视化：断续水平条形图 matplotlib.pyplot.broken_barh()

python数据可视化：断续水平条形图 matplotlib.pyplot.broken_barh()

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 python数据可视化&#xff1a; 断续水平条形图 matplotlib.pyplot.broken_barh() [太阳]选择题 关于以下代码下列说法正确的是&#xff1f; import matplotlib.pyplot as plt x [(10, 5),(…
阅读更多...
[职场] 美术学就业方向和前景 #经验分享#学习方法

[职场] 美术学就业方向和前景 #经验分享#学习方法

美术学就业方向和前景 2011年国务院学位委员会、教育部颁布了新的《学位授予和人才培养学科目录》&#xff0c;艺术学首次从文学门类中独立出来&#xff0c;成为新的第13个学科门类&#xff0c;即艺术学门类。其中&#xff0c;美术学又是艺术学门类下的五个一级学科之一。但是…
阅读更多...
立创·天空星开发板-GD32F407VE-USART

立创·天空星开发板-GD32F407VE-USART

本文以 立创天空星开发板-GD32F407VET6-青春版 作为学习的板子&#xff0c;记录学习笔记。 立创天空星开发板-GD32F407VE-USART 基础通信概念同步通信 & 异步通信串行通信 & 并行通信双工 & 单工通讯速率码元 串口通信数据帧 串口封装 基础通信概念 通信协议是网络…
阅读更多...
美颜相机「BeautyCam」v12.0.80 祛广告解索会员版（美妆相机功能，展现女神魅力）

美颜相机「BeautyCam」v12.0.80 祛广告解索会员版（美妆相机功能，展现女神魅力）

软件介绍 美颜相机&#xff0c;一款由知名移动互联网企业Meitu Inc.开发的移动设备照片编辑与美化应用&#xff0c;起初主要针对娱乐消费市场&#xff0c;随后集成了商业营销功能。目前&#xff0c;它已跻身全球最受欢迎的手机摄影应用程序之列。在中国&#xff0c;美颜相机和…
阅读更多...
Web前端指南

Web前端指南

前言 前端开发员主要负责网站的设计、外观和感觉。他们设计引人入胜的在线用户体验，激发用户兴趣，鼓励用户重复访问。他们与设计师密切合作，使网站美观、实用、快捷。 如果您喜欢创造性思维、打造更好的体验并对视觉设计感兴趣，这将是您的理想职业道路。 探讨前端、后端以…
阅读更多...
Llama模型家族之拒绝抽样(Rejection Sampling)（五）蒙特卡罗算法在拒绝抽样中：均匀分布与样本接受标准

Llama模型家族之拒绝抽样(Rejection Sampling)（五）蒙特卡罗算法在拒绝抽样中：均匀分布与样本接受标准

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…
阅读更多...
gulimall-search P125 springboot整合elasticsearch版本冲突

gulimall-search P125 springboot整合elasticsearch版本冲突

一、问题 spring-boot.version 2.2.4.RELEASE,在gulimall-search pom.xml中添加elasticsearch.version 7.4.2后&#xff0c;发现出现如下问题&#xff1a;elasticsearch版本是springboot引入的6.8.6&#xff0c;没有变为7.4.2。 二、原因 在gulimall-search 的pom文件中&#…
阅读更多...
HTML，CSS，JavaScript实例——3D骰子，跨纬度蠕虫，动态登录表单。

HTML，CSS，JavaScript实例——3D骰子，跨纬度蠕虫，动态登录表单。

文章目录 一、3D筛子1.HTML2.CSS 二、跨纬度蠕虫1.HTML2.CSS3.JS 三、动态登录表单1.HTML2.CSS 一、3D筛子 1.HTML <!--ring div starts here--> <div class"ring"><i style"--clr:#00ff0a;"></i><i style"--clr:#ff0057…
阅读更多...
UI学习笔记（一）

UI学习笔记（一）

UI学习 一&#xff1a;UIView基础frame属性隐藏视图对象&#xff1a;UIView的层级关系 二&#xff1a;UIWindow对象三&#xff1a;UIViewController基础UIViewController使用 四&#xff1a;定时器与视图移动五&#xff1a;UISwitch控件六&#xff1a;滑动条和进度条七&#xf…
阅读更多...
前端三大主流框架

前端三大主流框架

目录 1.概述 2.React 2.1.作用 2.2.诞生背景 2.3.版本历史 2.4.优缺点 2.5.应用场景 2.6.示例 2.7.未来展望 3.Vue 3.1.作用 3.2.诞生背景 3.3.版本历史 3.4.优缺点 3.5.应用场景 3.7.示例 3.8.未来展望 4.Angular 4.1.作用 4.2.诞生背景 4.3.版本历史 4…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023