找对象、定时器、iframe

简介: 找对象方法大全***document.getElementById(“id名”); //id属性所有标签都可以使用通过id找到一个标签对象。

找对象方法大全

  • ***document.getElementById(“id名”); //id属性所有标签都可以使用
    通过id找到一个标签对象。

  • *document.getElementsByName(“name名”); //name属性通常只用于表单上。
    通过name找到若干个标签对象——也就是集合。这里集合其实就是相当于一个数组中放了若干个对象。集合的用法跟数组完全一样。注意,即使找出的结果中只有一个对象,也是集合,也要象数组一样使用。

  • *document.getElementsByTagName(“标签名”);
    通过标签名获取到网页中所有的该标签对象——也是集合,用法同上。

  • getElementsByTagName的另一个更实用用法是:

  • **obj. getElementsByTagName(“标签名”); //obj为某个小一点的标签对象。
    在obj这个标签中获取若干个指定标签名的对象——更实用。

  • *document.body:——直接就代表网页中的body这个特定标签对象。

  • document.documentElement:——直接就代表网页中的html这个特定的标签对象。

  • document.images:——代表网页中的所有img标签对象,也是一个集合,用法同上述集合。其实其也相当于:document.getElementsByTagName(“img”);

  • document.links:——代表网页中所有a链接标签对象,也是一个集合。

  • document.anchors:——代表网页中的所有a锚点标签对象,也是一个集合

  • *document.forms:——代表网页中的所有form表单对象,也是一个集合。

  • *event.target / event.srcElement:——代表事件源——事件源就是对象

  • *this:——代表事件源

——意思是,象window对象,event对象,document对象是不需要“找”,而是直接使用。

img_f8656c1360ae3fa1f8c50eadf89e507c.png
图片.png

window对象的定时器方法

  • 反复性定时器的使用:浏览器会按指定的时间间隔反复去执行该代码(函数)。
    var t1 = window.setInterval(“ 函数() ”, 间隔时间); //创建一个反复性定时器并命名为“t1”
    window.clearInterval( t1 ) //清除(停止/销毁)该反复性定时器
    ——闹钟原理

  • 一次性定时器的使用:浏览器会在指定的时间之后去执行一次该代码(函数)。
    var t2 = window.setTimeout(“ 函数() ”, 间隔时间); //创建一个一次性定时器并命名为“t2”
    window.clearTimeout( t2 ); //清除(停止/销毁)该一次性定时器
    ——定时炸弹原理
    ——一次性定时器通常用于某种只要执行一次的代码

内嵌框架(窗口)

对比框架窗口:框架窗口是将“当前大窗口”分割为若干个小窗口,每个窗口中放一个网页。

<frameset  rows=”150, *”>
<frame src=”page1.html”  ></frame>
<frame src=”page2.html”  ></frame>
</frameset>

内嵌窗口: 是在“当前网页中”“挖”出一个区域范围来作为小窗口,该窗口可以放置其他网页。
这里,“挖”出的这个区域其实就是我们html/css中的盒子概念——矩形区域。
内嵌窗口的标签为: iframe, 使用如下:

<iframe src=”网页地址url” ></iframe>

iframe在外观上非常类似textarea标签,但使用是完全不同的。

引入外部js文件

<script  src="js文件路径url "></script>
  • 注意:js文件后缀为js,里面只能有js语法的代码,不能有<script>标签或其他标签。并且,在上述script标签的中间不能再些js代码了

进度条制作原理

无非是两个盒子,外面的的盒子的宽度固定(比如100),里面的盒子的宽度随着一个数据的变化而变化——我们这里是星星的当前数量。

看你能坚持多久案例中的新知识:

  1. 从一个对象中删除另一个对象的基本模式为:
    父对象.remoeveChild( 子对象 ); //子对象被删除
  2. 在js代码中设定事件调用函数的模式为:
    对象.on事件名 = 函数名f1;
    对比在html中的同样设定模式为:
    <标签 on事件名 = “函数名f1()” >
  3. 在js中设定的事件调用函数通常称为“事件处理函数”,则在该函数中,this这个关键字直接就代表事件源,即无需调用函数的时候传递过来——其实想传也传不过来。
  • js编程模式: 在某个对象上发生某个事件的时候去调用某个函数以完成某些功能。
相关文章
|
人工智能 自然语言处理 搜索推荐
智源研究院开源中文互联网语料库CCI3.0,1000GB数据集,498GB高质量子集,魔搭社区可下载
近日,智源研究院正式发布中文互联网语料库CCI 3.0(Chinese Corpora Internet,简称 CCI)
|
存储 安全 Java
Java版管程:Synchronized
保证共享资源的读写安全,需要一种同步机制:用于解决2方面问题:
152 0
Java版管程:Synchronized
|
13天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
5天前
|
云安全 人工智能 安全
Dify平台集成阿里云AI安全护栏,构建AI Runtime安全防线
阿里云 AI 安全护栏加入Dify平台,打造可信赖的 AI
|
12天前
|
人工智能 自然语言处理 自动驾驶
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
|
8天前
|
人工智能 运维 Java
Spring AI Alibaba Admin 开源!以数据为中心的 Agent 开发平台
Spring AI Alibaba Admin 正式发布!一站式实现 Prompt 管理、动态热更新、评测集构建、自动化评估与全链路可观测,助力企业高效构建可信赖的 AI Agent 应用。开源共建,现已上线!
776 23
|
7天前
|
人工智能 Java Nacos
基于 Spring AI Alibaba + Nacos 的分布式 Multi-Agent 构建指南
本文将针对 Spring AI Alibaba + Nacos 的分布式多智能体构建方案展开介绍,同时结合 Demo 说明快速开发方法与实际效果。
497 36