第48天:内置对象方法、 前端基础之BOM和DOM

news/2024/12/23 5:42:37/

内置对象方法

        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

        window对象

        一些常用的Window方法:

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

         navigator对象

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

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

        history对象

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

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

        location对象

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

常用属性和方法:

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

        弹出框

        可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

        警告框

        警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。

        语法:

alert("你看到了吗?");
        确认框 

        确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

        语法:

confirm("你确定吗?")
        提示框

        提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

        语法:

prompt("请在下方输入","你的答案")

         计时相关

        通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

        setTimeout()

        语法:

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

        语法:

clearTimeout(setTimeout_variable)
        setInterval()

        setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

        语法: 

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

        clearInterval() 方法可取消由 setInterval() 设置的 timeout。clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

        语法:

clearInterval(setinterval返回的ID值)

DOM 

        DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML 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");
        添加节点
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
        获取值操作
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操作
obj.style.backgroundColor="red"

        事件

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


http://www.ppmy.cn/news/1194544.html

相关文章

JDBC数据库连接---附通用的CRUD类

文章目录 JDBC数据库连接1 导包2 编写配置文件3 编写连接数据库代码4 测试工具类5 附加1 通用的CRUD类2 测试CURD类3 测试 JDBC数据库连接 本篇文章以 MySQL 数据库为例&#xff0c;若要切换其他数据库&#xff0c;只需修改 resource文件夹中的 jdbc.properties 配置文件即可。…

Qt中正确的设置窗体的背景图片的几种方式

Qt中正确的设置窗体的背景图片的几种方式 QLabel加载图片方式之一Chapter1 Qt中正确的设置窗体的背景图片的几种方式一、利用styleSheet设置窗体的背景图片 Chapter2 Qt的主窗口背景设置方法一&#xff1a;最简单的方式是通过ui界面来设置&#xff0c;例如设置背景图片方法二 &…

商标服务展示预约小程序的效果如何

想要打造自己的品牌&#xff0c;商标是必要的一步&#xff0c;除了可以自己申请外&#xff0c;部分商家会选择通过第三方代理平台操作&#xff0c;在商城注册场景包括查询、资料提交、驳回复审等。 市场生意并不缺&#xff0c;对商标注册代理机构来说&#xff0c;需要不断拓客…

竖拍的视频怎么做二维码?竖版视频二维码制作技巧

为了方便视频的展示和传播&#xff0c;现在将视频生成二维码后来使用的方式越来越常见&#xff0c;很多做二维码工具都可以制作视频二维码&#xff0c;但是无法设置下载权限或者播放竖版视频。那么如果做有下载功能的视频码该如何制作&#xff0c;可能很多小伙伴都不知道怎么做…

金蝶云星空表单插件获取日期控件判空处理(代码示例)

文章目录 金蝶云星空表单插件获取日期控件判空处理C#实现 金蝶云星空表单插件获取日期控件判空处理 C#实现 DateTime? deliveryDate (DateTime?)this.View.Model.GetValue("FApproveDate");//审核日期long leadtime 20;//天数if (!deliveryDate.IsNullOrEmpty()…

【C++】基础语法(上)

C基础语法 此语法笔记面向算法竞赛考研&#xff0c;可供参考&#xff0c;本人的一些笔记的记录~ 失踪人口回归&#xff0c;将近半个月没有更新&#xff0c;那么接下来也会逐步开始更新分享知识内容~ 本篇将分享cpp基础语法中的变量、输出输入语句、表达式、顺序语句、条件判断…

PY32F071单片机,主频最高72 M,带一路DAC,USB

PY32F071 系列微控制器采用高性能的 32 位 ARM Cortex-M0内核&#xff0c;宽电压工作范围的 MCU。嵌入高达128 Kbytes flash 和 16 Kbytes SRAM 存储器&#xff0c;最高工作频率 72 MHz。包含多种不同封装类型多款产品。芯片集成多路 I2C、SPI、USART 等通讯外设&#xff0c;1 …

新一代数据质量平台datavines

在我实习的第一家公司的时候&#xff0c;有幸参与Apache Griffin的开发&#xff0c;也先后在一起其他公司使用过数据质量平台&#xff0c;同时也调研过一些开源的数据质量平台。 最近和朋友一起参与开发了datavines数据质量平台&#xff0c;随着在数据行业越呆越久&#xff0c…