找对象、定时器、iframe

2022-05-29 08:44:25

找对象方法大全

***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对象是不需要“找”，而是直接使用。

图片.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），里面的盒子的宽度随着一个数据的变化而变化——我们这里是星星的当前数量。

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

从一个对象中删除另一个对象的基本模式为：
父对象.remoeveChild( 子对象 ); //子对象被删除
在js代码中设定事件调用函数的模式为：
对象.on事件名 = 函数名f1；
对比在html中的同样设定模式为：
<标签 on事件名 = “函数名f1()” >
在js中设定的事件调用函数通常称为“事件处理函数”，则在该函数中，this这个关键字直接就代表事件源，即无需调用函数的时候传递过来——其实想传也传不过来。

js编程模式：在某个对象上发生某个事件的时候去调用某个函数以完成某些功能。

码农公寓