内置对象和方法、前端基础之BOM和DOM

内置对象和方法

RegExp对象

// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')/*第一个注意事项，正则表达式中不能有空格*/ // 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);var reg3 = /undefined/;
reg3.test();

Math对象


abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

前端基础之BOM和DOM

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

window对象

一些常用的Window方法：

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口

当你访问一个链接的时候，如果是通过浏览器访问的，请求头中会自动携带User-Agent参数，有了这个参数，说明此时来的请求是人访问的(浏览器访问的)

我们访问一个链接地址的时候，可以通过浏览器发起请求，还可以通过程序去访问啊
爬虫：我们使用程序去获取别人家网站上的数据就是爬虫，但是人家会愿意码？对方肯定有反爬机制，阻止不让你爬啊，其中一个方式就是限制请求方式'必须是浏览器访问'

当你访问别人家的网址的时候，人家会检测你的请求头中有没有这个参数：User-Agent参数
专业的爬虫：会Python、专业的爬虫库、爬虫框架、你得会很多的前端知识(懂数据过滤、清洗等)

window的子对象

navigator对象

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

screen对象

屏幕对象，不常用。

一些属性：

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度

history对象

window.history 对象包含浏览器的历史。

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

history.forward()  // 前进一页
history.back()  // 后退一页

location对象(重要)

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法：

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

弹出框

alert("你看到了吗？");警告框
confirm("你确定吗？");确认框
prompt("请在下方输入","你的答案");提示框

计时相关

setTimeout()

var t=setTimeout("JS语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。

clearTimeout()

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval("JS语句",时间间隔)

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

clearInterval(setinterval返回的ID值)
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

function func2() {alert(123)
}
function show(){let t = setInterval(func2,3000);  // 每隔3秒执行一次function inner(){clearInterval(t)  // 清除定时器}setTimeout(inner,9000)  // 9秒中之后触发
}
show()

DOM

HTML DOM 树

DOM标准规定HTML文档中的每个成分都是一个节点(node)：
● 文档节点(document对象)：代表整个文档
● 元素节点(element 对象)：代表一个元素（标签）
● 文本节点(text对象)：代表元素（标签）中的文本
● 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
● 注释是注释节点(comment对象)

JavaScript 可以通过DOM创建动态的 HTML：
● JavaScript 能够改变页面中的所有 HTML 元素
● JavaScript 能够改变页面中的所有 HTML 属性
● JavaScript 能够改变页面中的所有 CSS 样式
● JavaScript 能够对页面中的所有事件做出反应

查找标签

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

创建节点

var divEle = document.createElement("div");

添加节点

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)；

把增加的节点放到某个节点的前边。

somenode.insertBefore(newnode,某个节点);

img.src='234.png';
img.alt='哈哈哈'
img.id='img1';
// img.username='jerry'; // 如果是点语法，只能够增加自带的属性，自定义的属性不能增加
img.setAttribute('username', 'kevin'); // 设置自定义属性的时候用setAttribute

删除节点

获得要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点

somenode.replaceChild(newnode, 某个节点);

属性节点

获取文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

设置文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
attribute操作
// 创建一个a标签出来
// 创建a标签
var a = document.createElement('a'); // <a></a>
var div = document.getElementById('d1');
// 增加属性
a.href='http://www.baidu.com';// <a href='http://www.baidu.com'></a>
a.title='点我解解困把';// <a href='http://www.baidu.com' title='点我解解困把'></a>
a.setAttribute('username',' aaa');
a.getAttribute('username')
// 增加文本内容
// a.innerText = '<h1>点我看美女</h1>';// <a href='http://www.baidu.com' title='点我解解困把'>点我看美女</a>
a.innerHTML = '<h1>点我看美女</h1>';// <a href='http://www.baidu.com' title='点我解解困把'>点我看美女</a>
console.log(a);div.appendChild(a);

获取值操作

语法：

elementNode.value

适用于以下标签：

  • .input
  • .select
  • .textarea
  • value不能获取文件数据，获取文件数据要用files
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class的操作

className  获取所有样式类名(字符串)classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

指定CSS操作

var div = document.getElementById('d1');
div.style.color = 'red';
div.style.fontSize='30px';
div.style.fontWeight='bolder';
// div.style.border='3px solid black';
// div.style.borderLeftWidth='3px'
// div.style.borderLeftColor='black'
// div.style.borderLeftStyle='solid'
div.style.borderLeft='3px black solid';

事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

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

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

相关文章

多输入多输出 | Matlab实现k-means-ELM（k均值聚类结合极限学习机）多输入多输出组合预测

多输入多输出 | Matlab实现k-means-ELM（k均值聚类结合极限学习机）多输入多输出组合预测

多输入多输出 | Matlab实现k-means-ELM&#xff08;k均值聚类结合极限学习机&#xff09;多输入多输出组合预测 目录 多输入多输出 | Matlab实现k-means-ELM&#xff08;k均值聚类结合极限学习机&#xff09;多输入多输出组合预测预测效果基本描述程序设计参考资料 预测效果 基…
阅读更多...
服务器数据恢复-VSAN环境下ESXI虚拟机无法访问的数据恢复方案

服务器数据恢复-VSAN环境下ESXI虚拟机无法访问的数据恢复方案

一、用户信息&#xff1a; 广东某单位 二、数据恢复环境&#xff1a; 主机操作系统&#xff1a;ESXI 分区类型&#xff1a;VSAN 存储介质清单 &#xff1a;一共8台服务器节点&#xff0c;每节点2个磁盘组&#xff0c;其中1个磁盘组配置1块SSD固态硬盘&#xff0c;4块1.2T机…
阅读更多...
Docker安装部署[8.x]版本Elasticsearch+Kibana+IK分词器

Docker安装部署[8.x]版本Elasticsearch+Kibana+IK分词器

文章目录 Docker安装部署elasticsearch拉取镜像创建数据卷创建网络elasticsearch容器&#xff0c;启动&#xff01;踩坑&#xff1a;虚拟机磁盘扩容 Docker安装部署Kibana拉取镜像Kibana容器&#xff0c;启动&#xff01; 安装IK分词器安装方式一&#xff1a;直接从github上下载…
阅读更多...
人工智能基础_机器学习011_梯度下降概念_梯度下降步骤_函数与导函数求解最优解---人工智能工作笔记0051

人工智能基础_机器学习011_梯度下降概念_梯度下降步骤_函数与导函数求解最优解---人工智能工作笔记0051

然后我们来看一下梯度下降,这里先看一个叫 无约束最优化问题,,值得是从一个问题的所有可能的备选方案中选最优的方案, 我们的知道,我们的正态分布这里,正规的一个正态分布,还有我们的正规方程,他的这个x,是正规的,比如上面画的这个曲线,他的这个x,就是大于0的对吧,而现实生活…
阅读更多...
论文阅读 - Detecting Social Bot on the Fly using Contrastive Learning

论文阅读 - Detecting Social Bot on the Fly using Contrastive Learning

目录 摘要&#xff1a; 引言 3 问题定义 4 CBD 4.1 框架概述 4.2 Model Learning 4.2.1 通过 GCL 进行模型预训练 4.2.2 通过一致性损失进行模型微调 4.3 在线检测 5 实验 5.1 实验设置 5.2 性能比较 5.5 少量检测研究 6 结论 https://dl.acm.org/doi/pdf/10.1145/358…
阅读更多...
nodejs express vue 点餐外卖系统源码

nodejs express vue 点餐外卖系统源码

开发环境及工具&#xff1a; nodejs&#xff0c;vscode&#xff08;webstorm&#xff09;&#xff0c;大于mysql5.5 技术说明&#xff1a; nodejs express vue elementui 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页显示搜索菜品&#xff0c;轮播图&#xf…
阅读更多...
Diango项目-简易个人博客项目

Diango项目-简易个人博客项目

项目实现功能 在admin后台自定义添加上传文档。对展示在首页的文章分页显示。在首页点击文章的阅读全文按钮可进入该文章全文详情页进行浏览。对文章实现了内容分类何以发布时间进行归档分类。使用django的whoose搜索引擎对全文实现内容的搜索。 项目涉及技术 Mysql Djan…
阅读更多...
【设计模式】第10节：结构型模式之“组合模式”

【设计模式】第10节：结构型模式之“组合模式”

一、简介 组合模式&#xff1a;将一组对象组织成树形结构&#xff0c;将单个对象和组合对象都看做树中的节点&#xff0c;以统一处理逻辑&#xff0c;并且它利用树形结构的特点&#xff0c;递归地处理每个子树&#xff0c;依次简化代码实现。使用组合模式的前提在于&#xff0…
阅读更多...
ts 简易封装 axios，统一 API

ts 简易封装 axios，统一 API

文章目录 为什么要封装目标文件结构封装通用请求方法获得类型提示http 方法文件上传使用示例实例化post 请求类型提示文件上传 总结完整代码&#xff1a; 为什么要封装 axios 本身已经很好用了&#xff0c;看似多次一举的封装则是为了让 axios 与项目解耦。比如想要将网络请求…
阅读更多...
【广州华锐互动】风景区规划VR虚拟现实教学系统

【广州华锐互动】风景区规划VR虚拟现实教学系统

风景区规划VR虚拟现实教学系统是一种新兴的教学工具&#xff0c;它可以通过虚拟现实技术&#xff0c;为学生提供一种沉浸式的、实时的、全方位的景区规划体验。 在风景区规划VR虚拟现实教学系统中&#xff0c;学生可以通过虚拟现实技术&#xff0c;实时地与景区进行交互。他们可…
阅读更多...
Spring - 手写模拟Spring底层原理

Spring - 手写模拟Spring底层原理

手写Spring 定义配置类AppConfig ComponentScan("com.spring.zsj") public class AppConfig {Beanpublic ApplicationListener applicationListener() {return new ApplicationListener() {Overridepublic void onApplicationEvent(ApplicationEvent event) {System…
阅读更多...
【WinForm详细教程五】WinForm中的MenuStrip 、ContextMenuStrip 、ToolStrip、StatusStrip控件

【WinForm详细教程五】WinForm中的MenuStrip 、ContextMenuStrip 、ToolStrip、StatusStrip控件

文章目录 1.MenuStrip2.ContextMenuStrip3.ToolStrip4.StatusStrip 1.MenuStrip MenuStrip作为一个容器可以包含多个菜单项。MenuStrip 的重要属性包括&#xff1a; Name&#xff1a;菜单的名字Dock&#xff1a;菜单的停靠位置Items&#xff1a;菜单项的集合 ToolStripMenuI…
阅读更多...
前端接口请求支持内容缓存和过期时间

前端接口请求支持内容缓存和过期时间

前端接口请求支持内容缓存和过期时间 支持用户自定义缓存时间&#xff0c;在规则时间内读取缓存内容&#xff0c;超出时间后重新请求接口 首先封装一下 axios&#xff0c;这一步可做可不做。但是在实际开发场景中都会对 axios 做二次封装&#xff0c;我们在二次封装的 axios …
阅读更多...
vue3中解析地址（address-parse插件的使用）

vue3中解析地址（address-parse插件的使用）

1.安装 npm install address-parse --save 2.使用 // 引入address-parse import AddressParse, { AREA, Utils } from "address-parse";const adressValue ref([])const getResolutionContent () > {const [result] AddressParse.parse(EnterpriseSalesDetai…
阅读更多...
JAVA虚拟机-第2章 Java自动内存管理-异常实践

JAVA虚拟机-第2章 Java自动内存管理-异常实践

Java堆溢出 堆的参数设置&#xff1a;将堆的最小值-Xms参数与最大值-Xmx参数设置 public class HeapOOM {static class OOMObject {}public static void main(String[] args) {List<OOMObject> list new ArrayList<OOMObject>();while (true) {list.add(new OO…
阅读更多...
JTS: 13 Polygonizer 多线合成面

JTS: 13 Polygonizer 多线合成面

这里写目录标题 版本代码 版本 org.locationtech.jts:jts-core:1.19.0 链接: github 代码 线段 生成之后的面 public class GeometryPolygonization {private static final GeometryFactory geometryFactory new GeometryFactory();private static final Logger LOGGER …
阅读更多...
陪诊系统|挂号陪护搭建二开陪诊师入驻就医小程序

陪诊系统|挂号陪护搭建二开陪诊师入驻就医小程序

我们的陪诊小程序拥有丰富多样的功能&#xff0c;旨在最大程度满足现代人的需求。首先&#xff0c;我们采用了智能排队系统&#xff0c;通过扫描二维码获取排号信息&#xff0c;让您从繁琐的排队过程中解放出来。其次&#xff0c;我们提供了多种支付方式&#xff0c;不仅可以实…
阅读更多...
管理类联考——数学——汇总篇——知识点突破——代数——函数、方程——记忆

管理类联考——数学——汇总篇——知识点突破——代数——函数、方程——记忆

文章目录 考点记忆/考点汇总——按大纲 整体局部 本篇思路&#xff1a;根据各方的资料&#xff0c;比如名师的资料&#xff0c;按大纲或者其他方式&#xff0c;收集/汇总考点&#xff0c;即需记忆点&#xff0c;在通过整体的记忆法&#xff0c;比如整体信息很多&#xff0c;通常…
阅读更多...
python线程（进程子单位）

python线程（进程子单位）

进程是由CPU给分配的执行单元&#xff0c;比较消耗空间和内存 创建、使用线程 import threading# 进程 # 线程 from time import sleepdef download():list1 ["girl.png", "boy.png", "child.png"]for l in list1:print(l)sleep(1.5)print(&qu…
阅读更多...
变量的作用域

变量的作用域

在javascript中&#xff0c;var定义的变量实际是有作用域的。 1 假设在函数体内声明&#xff0c;但在函数体外不可以使用 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发