web前端之JS

文章目录

  • 介绍
  • 一、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.rhkb.cn/news/82812.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

netty面试题2

1、一次完整的HTTP请求的所经历的步骤 1、首先进行DNS域名解析&#xff08;本地浏览器缓存、操作系统缓存或者DNS服务器&#xff09;&#xff0c;首先会搜索浏览器自身的DNS缓存&#xff08;缓存时间比较短&#xff0c;大概只有1分钟&#xff0c;且只能容纳1000条缓存&#xff…

Python爬虫的解析(学习于b站尚硅谷)

目录 一、xpath  1.xpath插件的安装  2. xpath的基本使用  &#xff08;1&#xff09;xpath的使用方法与基本语法&#xff08;路径查询、谓词查询、内容查询&#xff08;使用text查看标签内容&#xff09;、属性查询、模糊查询、逻辑运算&#xff09;  &#xff08;2&a…

TCP三次握手、四次握手过程,以及原因分析

TCP的三次握手和四次挥手实质就是TCP通信的连接和断开。 三次握手&#xff1a;为了对每次发送的数据量进行跟踪与协商&#xff0c;确保数据段的发送和接收同步&#xff0c;根据所接收到的数据量而确认数据发送、接收完毕后何时撤消联系&#xff0c;并建立虚连接。 四次挥手&…

基于 Emscripten + WebAssembly 实现浏览器操作 Excel

一、为什么要造这个轮子 【C】使用WebAssembly在浏览器端操作Excel_wasm文件用什么打开_你的薄荷醇的博客-CSDN博客使用WebAssembly在浏览器端操作Excel_wasm文件用什么打开https://blog.csdn.net/weixin_44305576/article/details/125545900?ops_request_misc%257B%2522requ…

msvcp120.dll丢失的解决方法,哪种解决方法更实用

msvcp120.dll是Microsoft Visual C 2013库中的一个动态链接库文件。它包含了在使用Visual C 2013编译的应用程序中所需的函数和资源。这个文件通常用于在Windows操作系统上运行使用Visual C 2013编写的软件。如果缺少或损坏了msvcp120.dll文件&#xff0c;可能会导致相关软件无…

P1194 买礼物(最小生成树)(内附封面)

买礼物 题目描述 又到了一年一度的明明生日了&#xff0c;明明想要买 B B B 样东西&#xff0c;巧的是&#xff0c;这 B B B 样东西价格都是 A A A 元。 但是&#xff0c;商店老板说最近有促销活动&#xff0c;也就是&#xff1a; 如果你买了第 I I I 样东西&#xff0…

Linux基础与拓展

文章目录 虚拟机网络连接方式VIMvi和vim常用的三种模式各种模式的相互切换快捷键 用户管理权限 基本介绍&#xff1a;添加用户指定/修改密码删除用户切换用户用户组 路径命令学习mkdir命令介绍语法注意 touch 创建文件介绍语法 cat 查看文件内容介绍语法 more 查看文件内容介绍…

vue动态生成行

vue代码 <el-table :data"form.lineInfos" :bordertrue style"width: 99.99%;"> <el-table-column type"index" label"序号" width"50"></el-table-column> <el-table-column prop"unitPrice&qu…

Swagger技术-自动生成测试接口

简介 前端资源和后端资源分开&#xff0c;前端通过nginx运行&#xff0c;后端通过tomcat运行 前端技术框架&#xff1a; Swagger 作用&#xff1a;生成各种样式的接口文档&#xff0c;以及在线接口调试页面等 kinfe4j是基于mvc框架继承swagger生成api文档的增强解决方案 …

【云原生】Docker-compose中所有模块学习

compose模块 模板文件是使用 Compose 的核心&#xff0c;涉及到的指令关键字也比较多。但大家不用担心&#xff0c;这里面大部分指令跟 docker run 相关参数的含义都是类似的。 默认的模板文件名称为 docker-compose.yml&#xff0c;格式为 YAML 格式。 version: "3&quo…

Nios初体验之——Hello world!

文章目录 前言一、系统设计1、系统模块框图2、系统涉及到的模块1、时钟2、nios2_qsys3、片内存储&#xff08;onchip_rom、onchip_ram&#xff09;4、串行通信&#xff08;jtag_uart&#xff09;5、System ID&#xff08;sysid_qsys&#xff09; 二、硬件设计1、创建Qsys2、重命…

网络安全 Day27-运维安全项目-堡垒机部署

运维安全项目-堡垒机部署 1. 运维安全项目-架构概述2. 运维安全项目之堡垒机2.1 堡垒机概述2.2 堡垒机选型2.3 环境准备2.4 部署Teleport堡垒机2.4.1 下载与部署2.4.2 启动2.4.3 浏览器访问teleport2.4.4 进行配置2.4.5 安装teleport客户端 2.5 teleport连接服务器 1. 运维安全…

opencv基础48-绘制图像轮廓并切割示例-cv2.drawContours()

绘制图像轮廓&#xff1a;drawContours函数 在 OpenCV 中&#xff0c;可以使用函数 cv2.drawContours()绘制图像轮廓。该函数的语法格式是&#xff1a; imagecv2.drawContours( image, contours, contourIdx, color[, thickness[, lineType[, hierarchy[, maxLevel[, offset]]…

openGauss学习笔记-31 openGauss 高级数据管理-索引

文章目录 openGauss学习笔记-31 openGauss 高级数据管理-索引31.1 语法格式31.2 参数说明31.3 示例 openGauss学习笔记-31 openGauss 高级数据管理-索引 索引是一个指向表中数据的指针。一个数据库中的索引与一本书的索引目录是非常相似的。 索引可以用来提高数据库查询性能&…

2023河南萌新联赛第(五)场:郑州轻工业大学 --Kruskal

题目描述 给定一张nnn个点的无向完全图&#xff0c;其中两点之间的路径边权为两点编号的按位与&#xff08;编号为 (1,2,...,n)(1,2,...,n)(1,2,...,n)&#xff09;&#xff0c;即w(u,v)u&v(1≤u,v≤n)w\left(u, v \right )u\&v \left( 1 \le u, v \le n \right)w(u,v…

CSS:盒子模型 与 多种横向布局方法

目录 盒子模型块级盒子内联级盒子内联块级盒子弹性盒子display 改变模型区域划分text 内容区padding 填充区border 边框区margin 外边距直接设置盒子大小 布局横向布局方法一 float 浮起来方法二 内联块级元素实现方法三 弹性盒子模型 盒子模型 块级盒子 独占一行&#xff0c…

layui的基本使用-日期控件的业务场景使用入门实战案例一

效果镇楼; 1 前端UI层面; <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" conten…

【前端】html

HTML标签&#xff08;上&#xff09; 目标&#xff1a; -能够说出标签的书写注意规范 -能够写出HTML骨架标签 -能够写出超链接标签 -能够写出图片标签并说出alt和title的区别 -能够说出相对路径的三种形式 目录&#xff1a; HTML语法规范HTML基本结构标签开发工具HTML常用标…

Android SystemServer中Service的创建和启动方式(基于Android13)

Android SystemServer创建和启动方式(基于Android13) SystemServer 简介 Android System Server是Android框架的核心组件&#xff0c;运行在system_server进程中&#xff0c;拥有system权限。它在Android系统中扮演重要角色&#xff0c;提供服务管理和通信。 system …

浅析 C 语言的共用体、枚举和位域

前言 最近在尝试阅读一些系统库的源码&#xff0c;但是其中存在很多让我感到既熟悉又陌生的语法。经过资料查阅&#xff0c;发现是 C 语言中的共用体和位域。于是&#xff0c;趁着课本还没有扔掉&#xff0c;将一些相关的知识点记录在本文。 文章目录 前言共用体 (union)枚举…