找对象、定时器、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编程模式: 在某个对象上发生某个事件的时候去调用某个函数以完成某些功能。
相关文章
|
5月前
|
JavaScript 前端开发 安全
JavaScript基础-定时器:setTimeout, setInterval
【6月更文挑战第13天】JavaScript中的`setTimeout`和`setInterval`是异步编程的关键工具,用于按计划执行代码。`setTimeout`在延迟后执行一次,而`setInterval`则周期性执行。常见问题包括忘记清除定时器导致内存泄漏,递归使用`setTimeout`可能引发无限递归,以及字符串代码执行的安全隐患。解决方法包括使用`clearTimeout`和`clearInterval`,设置递归终止条件,以及优先使用函数表达式。理解定时器的非精确性并采用错误处理策略也是实践中的重要技巧。通过示例展示了如何延迟显示消息和周期性打印计数。
95 2
|
4月前
|
JavaScript 前端开发 Java
使用self.setInterval实现JavaScript定时器
使用self.setInterval实现JavaScript定时器
|
6月前
|
JavaScript 前端开发
JavaScript如何设置定时器,怎么清除定时器
JavaScript如何设置定时器,怎么清除定时器
170 3
|
6月前
|
JavaScript 前端开发
JS实现可以控制的定时器,setInterval,clearInterval
JS实现可以控制的定时器,setInterval,clearInterval
47 0
|
JavaScript 前端开发
js中的两种定时器,有什么区别?怎么清除定时器?
js中的两种定时器,有什么区别?怎么清除定时器?
100 0
|
JavaScript 前端开发
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
写在前面: 在js应用中,定时器的作用就是可以设定当到达一个时间来执行一个函数,或者每隔几秒重复执行某段函数。这里面涉及到了三个函数方法:setInterval()、setTimeout()、clearInterval(),本文将围绕这三种函数的用法,来实现定时器的功能,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望对大家有所帮助。 定时器的应用需求: 1.设定一个时间,当时间到达的时候执行函数————比如:倒计时跳转页面等等。 2.每隔一段时间重复执行某段函数————比如抢票软件,比如设定500毫秒就重复刷新一次页面等等。 倒计时跳转实现demo:
638 0
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
|
JavaScript
js中两种定时器,setTimeout和setInterval的区别
js中两种定时器,setTimeout和setInterval的区别
83 0
|
JavaScript Java
JS 清除定时器timer的两种方法
JS 清除定时器timer的两种方法
469 0
|
JavaScript API
js:定时器setInterval、clearInterval的使用
js:定时器setInterval、clearInterval的使用
137 0
多Iframe版后台,在一个iframe切换到另一个iframe,同时刷新
多Iframe版后台,在一个iframe切换到另一个iframe,同时刷新
214 0
多Iframe版后台,在一个iframe切换到另一个iframe,同时刷新