web前端之JS

news2024/12/27 11:07:18

文章目录

  • 介绍
  • 一、JS引入到文件
      • 1.1 嵌入到HTML文件中
      • 1.2 引入本地独立JS文件
      • 1.3 引入网络来源文件
  • 二、JS的注释
  • 三、JS输出方式
  • 四、JS数据类型
      • 4.1 判断数据类型 typeof
      • 4.2 charAt返回指定位置的字符
      • 4.3 concat连接两个字符串
      • 4.4 substring从原字符串提取字符串并返回
      • 4.4 substr从原字符串提取字符串并返回
      • 4.5 indexof 确定在其他字符串出现的位置
      • 4.6 trim 删除部分字符串
      • 4.7 split 分割字符串
  • 五、DOM概述
      • 5.1 节点
      • 5.2 节点树
      • 5.3 document对象_方法/获取元素
          • 5.3.1 document.getElementsByTagName()
          • 5.3.2 document.getElementsByClassName()
          • 5.3.3 document.getElementByld()
      • 5.4 Element对象_方法
          • 5.4.1 Element.id
          • 5.4.2 Element.className
      • 5.5 Element获取元素位置

介绍

是一种轻量级的脚本语言，不具备开发操作系统的能力，只是用来编写控制其他大型应用程序的脚本。

一、JS引入到文件

1.1 嵌入到HTML文件中

JavaScript程序的单位是行(line),也就是一行一行的执行。一般情况下，一行就是一个语句。

<body>
	<script>
		var age=20;
	</script>
</body>

1.2 引入本地独立JS文件

<body>
	<script type="text/javascript" src="./itbaizhan.js"></script>
</body>

1.3 引入网络来源文件

<body>
	<script src="http://code.jquery.com/jquery1.2.1.min.js"></script>
</body>

二、JS的注释

// 这是单行注释

/*
这是多行注释
*/

嵌入在html中的注释

 <!-- 这样可以注释-->

快捷键注释：ctrl+/

三、JS输出方式

在浏览器中弹出一个对话框，然后把要输入的内容展示出来，alert都是把要输出的内容首先转换为字符串后输出的
alert (“要输出的内容”); //这个输出的是弹出框
document.write(“要输出的内容”); //这个直接输出到页面

在控制台输出内容
console.log(“要输出的内容”);

四、JS数据类型

4.1 判断数据类型 typeof

typeof 123  //"number",数字类型

4.2 charAt返回指定位置的字符

var s=new String("itbaizhan");
s.charAt(1);  //"t"
s.cgharAt(s.length-1);  //"n"

如果参数为负数，或大于等于字符串长度，charAt返回空字符串

"itbaizhan".charAt(-1);  //""
"itbaizhan".charAt(9);  //""

4.3 concat连接两个字符串

var st1="123";
var st2="456";
console.log(st1.concat(st2));	//123456

如果参数不是字符串，concat方法会将其转成字符串，然后再连接

var st1=123;
var st2="456";
console.log(st1.concat(st2));	//123456

4.4 substring从原字符串提取字符串并返回

它的第一个参数表示子字符符串的开始位置，第二个表示结束位置（返回结果不含该位置）

"itbaizhan".substring(0,2)  //"it"

如果省略第二个参数，则表示字符串一直到原字符串的结束

"itbaizhan".substring(2) //"baizhan"

如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置

"itbaizhan".substring(9,2); //"baizhan"
//等同于
"itbaizhan".substring(2,9); //"baizhan"

如果参数是负数，substring方法会自动将负数转为0

"itbaizhan".substring(-3);	//"baizhan"
"itbaizhan".substring(2,-3);	//"it"

4.4 substr从原字符串提取字符串并返回

substr用法与substring相同，不同的是substr第二个参数代表的是子字符串的长度。

"itbaizhan".substr(2,7); //"baizhan"

省略第二个参数，则表示从子字符串一直到原字符串的结束

"itbaizhan".substr(2); //"baizhan"

如果第一个参数是负数，表示倒数计算的字符位置。如果第二个是负数，将被自动转为0，因此会返回空字符串。

"itbaizhan".substr(-7); //"baizhan"
"itbaizhan".substr(4,-1); //""

4.5 indexof 确定在其他字符串出现的位置

用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是开始匹配的位置

"helloworld".indexof("o"); //4
"helloworld".indexof("p"); //-1

此方法还可以接受第二个参数，表示从该位置开始向后匹配

"hello world".indexof("o",6);  //7

4.6 trim 删除部分字符串

用于去除字符串两端的空格，返回一个新的字符串

" hello world ".trim();

此方法不仅能去除空格，还可以去除制表符、换行符、回车符

4.7 split 分割字符串

按照指定规则分割字符串，返回一个由分割出来的子字符串组成的数组

"it|sxt|baizhan".split("|");  //["it","sxt","baizhan"]

如果分割为空字符串，则返回原字符串的每一个字符

"a|b|c".split("");	// ["a","|","b","|","c"]

如果省略参数就会返回原字符串

"a|b|c".split();	// ["a|b|c"]

还可以接受第二个参数，限定返回数组的最大成员数量

"a|b|c".split("|",0);	// []
"a|b|c".split("|",1);	// ["a"]

五、DOM概述

DOM是JS操作网页的接口，全称是文档对象模型。作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作。
浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构(DOMTree)。所有的节点和最终的树状结构，都有规范的对外接口
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是JavaScript 语法的一部分，但是DOM 操作是JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面,JavaScript也是最常用于 DOM 操作的语言。

5.1 节点

DOM 的最小组成单位叫做节点 (node) 。文档的树形结构(DOM 树)，就是由各种不同类型的节点组成每个节点可以看作是文档树的一片叶子。
在这里插入图片描述

Document:整个文档树的顶层节点
DocumentType: doctype标签
Element: 网页的各种HTML标签
Attribute: 网页元素的属性 (比如class=“right”)
Text: 标签之间或标签包含的文本
Comment:注释
DocumentFragment: 文档的片段

5.2 节点树

一个文档的所有节点，按照所在的层级可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，层节点，下一层都是顶层节点的子节点倒过来就像一棵树。
浏览器原生提供document节点，代表整个文档。

除了根节点，其他节点都有三种层级关系

父节点关系 (parentNode)):直接的那个上级节点
子节点关系 (childNodes) : 直接的下级节点
同级节点关系 (sibling) : 拥有同一个父节点的节点

Node.nodeType 属性
不同节点的nodeType属性值和对应常量如下：

文档节点 (document) : 9，对应常量Node.DOCUMENT_NODE
元素节点 (element) : 1，对应常量Node.ELEMENT_NODE
属性节点 (attr) : 2，对应常量Node.ATTRIBUTE NODE
文本节点 (text) :3，对应常量Node.TEXT_NODE
文档片断节点 (DocumentFragment) : 11，对应常量Node.DOCUMENT FRAGMENT NODE

5.3 document对象_方法/获取元素

5.3.1 document.getElementsByTagName()

此方法搜索HTML标签名，返回符合条件的元素。它的返回值是一个类似数组对象，可以实时反应HTML文档的变化。如果没有任何匹配的元素，就返回一个空集

var paras=document.getElementsByTagName('p');

如果传入*，就可以返回文档中所有html元素

var allElements =document.getElementsByTagName('*');
5.3.2 document.getElementsByClassName()

返回一个类似数组的对象，包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中

var elements=document.getElementsByClassName(names);

由于class是保留字，所以JS一律使用classname表示CSS的class
参数可以是多个，他们之间使用空格分隔

var elements=document.getElementsByClassName('foo bar');
5.3.3 document.getElementByld()

返回匹配指定id属性的元素节点，如果没有发现匹配的节点 ，则返回null

var elem=document.getElementById('paral');

5.4 Element对象_方法

Element对象对应网页元的html元素，每一个html元素，在dom树上都会转化成一个element节点对象。

5.4.1 Element.id

Element属性返回指定元素的id属性，该属性可读写。

// html代码为<p id="foo">
var p=document.queryselector('p');
p.id;  //'foo'
5.4.2 Element.className

className属性用来读写当前元素节点的class属性，它的值是一个字符串，每个class之间用空格分割

//html代码	<div class="one two three" id="mydiv"> </div>
var div=document.getElementById('mydiv');
div.className;

5.5 Element获取元素位置

在这里插入图片描述

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

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

相关文章

java动态生成excel并且需要合并单元格

java动态生成excel并且需要合并单元格

java动态生成excel并且需要合并单元格 先上图看一下预期效果 集成poi <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.0.0</version> </dependency> <dependency><…
阅读更多...
实践分享：小程序事件系统设计

实践分享：小程序事件系统设计

微信小程序官方文档中解释说&#xff1a;事件是用于子组件向父组件传递数据&#xff0c;可以传递任意数据。 小程序开发中的事件是指视图层到逻辑层的通讯方式&#xff0c;主要是可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上&#xff0c;当达到触发事件&#…
阅读更多...
java面向对象查缺

java面向对象查缺

匿名对象 匿名对象只能使用一次 public class Test1 {public static void main(String[] args) {PhoneFactory p1 new PhoneFactory();p1.show(new Phone(1000,"black"));} } class PhoneFactory{public void show(Phone p){p.send();} } class Phone{private int…
阅读更多...
Nginx代理接口访问返回404

Nginx代理接口访问返回404

Nginx代理接口访问返回404 一、背景 因为不同业务系统间有接口调用&#xff0c;存在跨域问题&#xff0c;为了解决同源策略&#xff0c;需要将接口通过nginx去转发&#xff0c;但是配置完后通过postman请求一直存在访问404的问题。 访问地址&#xff1a;https://a.test.com/n…
阅读更多...
无代码集成明道云与更多应用连接

无代码集成明道云与更多应用连接

明道云是一个APaaS平台&#xff0c;可以帮助用户快速搭建个性化企业应用&#xff0c;用户不需要代码开发就能够搭建出用户体验上佳的销售、运营、人事、采购等核心业务应用&#xff0c;打通企业内部数据&#xff0c;也能够通过API和Webhook和其他系统对接。 场景描述&#xff…
阅读更多...
Vue实战技巧：从零开始封装全局防抖和节流函数

Vue实战技巧：从零开始封装全局防抖和节流函数

前言 你是否曾经遇到过用户频繁点击按钮或滚动页面导致反应迟钝的问题&#xff1f;这是因为事件被连续触发&#xff0c;导致性能下降。在本文中&#xff0c;我将为大家介绍 vue 中的防抖和节流策略&#xff0c;并展示如何封装全局的防抖节流函数&#xff0c;以避免频繁触发事件…
阅读更多...
酷开系统丨加入酷开会员，体验有趣的云逛荷兰海牙市立博物馆

酷开系统丨加入酷开会员，体验有趣的云逛荷兰海牙市立博物馆

夏日炎炎&#xff0c;出门是不可能的&#xff0c;还是宅在家里享受空调的吹拂吧&#xff01;如果想足不出户看展览&#xff0c;感受文化的熏陶&#xff0c;那就打开酷开系统&#xff0c;加入酷开会员&#xff0c;在云端逛逛荷兰海牙市立博物馆吧&#xff01; 荷兰海牙市立博物…
阅读更多...
格式化后数据恢复，教你3个实用方法！

格式化后数据恢复，教你3个实用方法！

“格式化后数据还能恢复吗&#xff1f;前几天因为我的电脑中了病毒&#xff0c;我不得不将它进行格式化操作。但是我电脑里有很多比较重要的文件&#xff0c;有什么方法可以帮我恢复电脑中的文件吗&#xff1f;求解答&#xff01;” 格式化是一种比较常见的数据清除方法&#x…
阅读更多...
低代码平台：初创公司的理想选择

低代码平台：初创公司的理想选择

对于初创公司而言&#xff0c;时间和资源是宝贵的。他们需要快速构建和部署应用程序&#xff0c;以满足业务需求&#xff0c;提高效率&#xff0c;并保持竞争优势。在这个背景下&#xff0c;低代码平台成为了初创公司的一个理想选择。而Zoho Creator作为一款出色的低代码平台&a…
阅读更多...
node 报错：tagOffsetsMap[tag] ??= []；...SyntaxError: Unexpected token ，‘??=‘，亲测解决

node 报错：tagOffsetsMap[tag] ??= []；...SyntaxError: Unexpected token ，‘??=‘，亲测解决

安装的 node 版本不支持空值赋值运算符(??) 更换合适的 node 版本就行&#xff0c;如图 看看版本对应支持的 更多支持请在 node.green 上查看各种语法支持的版本
阅读更多...
计算机视觉与图形学-神经渲染专题-pi-GAN and CIPS-3D

计算机视觉与图形学-神经渲染专题-pi-GAN and CIPS-3D

《pi-GAN: Periodic Implicit Generative Adversarial Networks for 3D-Aware Image Synthesis》 摘要 我们见证了3D感知图像合成的快速进展&#xff0c;利用了生成视觉模型和神经渲染的最新进展。然而&#xff0c;现有的方法在两方面存在不足&#xff1a;首先&#xff0c;它们…
阅读更多...
ELK 将数据流转换回常规索引

ELK 将数据流转换回常规索引

ELK 将数据流转换回常规索引 现象&#xff1a;创建索引模板是打开了数据流&#xff0c;导致不能创建常规索引&#xff0c;并且手动修改、删除索引模板失败 "reason" : "composable template [logs_template] with index patterns [new-pattern*], priority [2…
阅读更多...
SAP中采购文档出现定价转换因子字段溢出是何原因？

SAP中采购文档出现定价转换因子字段溢出是何原因？

近期处理了一笔用户反馈的主题问题。这个问题有意思的地方地于&#xff0c;多重错误的叠加&#xff0c;导致了问题在开始就暴露出来&#xff0c;可以将隐患消除在萌芽状态。 在公司的应用中&#xff0c;会由采购创建价格合同&#xff0c;物流参照价格合同创建计划协议。但采购…
阅读更多...
聊聊JDK动态代理原理

聊聊JDK动态代理原理

1. 示例 首先&#xff0c;定义一个接口&#xff1a; public interface Staff {void work(); }然后&#xff0c;新增一个类并实现上面的接口&#xff1a; public class Coder implements Staff {Overridepublic void work() {System.out.println("认真写bug……");…
阅读更多...
为什么说用C端产品的思维做B端产品就是死路一条？

为什么说用C端产品的思维做B端产品就是死路一条？

经常听行业大佬说起&#xff1a;如果用C端产品的思维做B端产品就是死路一条&#xff0c;那原因究竟是什么呢&#xff1f; 首先&#xff0c;需要明确的是C端产品和B端产品的用户群体和需求存在很大差异。C端产品的用户主要是消费者&#xff0c;更多的是被情感驱动。而B端产品的…
阅读更多...
Visual Studio 2022安装教程（英文版）

Visual Studio 2022安装教程（英文版）

文章目录 1.下载安装 1.下载 官网地址&#xff1a;https://visualstudio.microsoft.com/zh-hans/vs/ 选择第一个社区版本&#xff1a;Community 2022 安装 1.将下载好的文件保存到桌面&#xff0c;双击点开 2.等待visual studio installer配置好 3.点击安装后会来到配件选…
阅读更多...
消息队列(3) -封装数据库的操作

消息队列(3) -封装数据库的操作

前言 上一篇博客我们写了, 关于交换机, 队列,绑定, 写入数据库的一些建库建表的操作 这一篇博客中,我们将建库建表操作,封装一下实现层一个类来供上层服务的调用 , 并在写完该类之后, 测试代码是否完整 实现封装 在写完上述的接口类 与 xml 后, 我们想要 创建一个类 ,来调用…
阅读更多...
使用OpenCV进行目标提取详细教程（附python代码演练）

使用OpenCV进行目标提取详细教程（附python代码演练）

今天的文章将讨论并指导你识别图像中的对象&#xff0c;使用 OpenCV 对这些对象进行遮罩处理。让我们开始吧&#xff01; HSV 色标 请花一点时间观察下面的图片。每个图块似乎是不同的颜色&#xff0c;对吧&#xff1f;但是有一个有趣的地方&#xff1a;如果我们仔细思考&#…
阅读更多...
B2B2C跨境独立站后台管理--支付系统开源搭建

B2B2C跨境独立站后台管理--支付系统开源搭建

要搭建一个B2B2C跨境独立站后台管理的支付系统&#xff0c;您可以按照以下步骤进行开发&#xff1a; 1. 确定需求和功能&#xff1a;首先&#xff0c;您需要明确支付系统的功能和需求&#xff0c;包括接入第三方支付平台、实现支付功能、订单管理、退款管理、对账功能等。 2.…
阅读更多...
无涯教程-Perl - eval函数

无涯教程-Perl - eval函数

描述 该函数在执行时判断EXPR,就好像EXPR是一个单独的Perl脚本一样。这使您可以在程序中使用单独的,也许是用户提供的Perl脚本。每次调用函数时,都会分别判断eval EXPR语句。 当解析脚本的其余部分时(执行之前),第二种形式判断BLOCK。 语法 以下是此函数的简单语法- eval …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023