Maison > interface Web > js tutoriel > Comment faire fonctionner l'objet BOM en js ? Méthodes pour faire fonctionner les objets BOM dans js

Comment faire fonctionner l'objet BOM en js ? Méthodes pour faire fonctionner les objets BOM dans js

不言
Libérer: 2018-08-21 15:39:52
original
1348 Les gens l'ont consulté

Le contenu de cet article explique comment exploiter les objets BOM en js ? La méthode d'exploitation des objets BOM dans js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

Trois objets principaux :

fenêtre :
[window].alert Seul un message d'invite existe alert(message)
[window].prompt permet aux utilisateurs de saisir manuellement var obj=prompt(message)
[window].confirm aide les utilisateurs à porter des jugements Lorsque l'utilisateur clique sur OK, cela renvoie vrai,
.                                                                                                               pour renvoyer false lorsque vous cliquez sur Annuler
                        open(url) Ouvrir l'adresse URL spécifiée
close() Ferme l'onglet actuel
confirm.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>confirm弹层</title>
    <script>
        function del(){
            var flag = confirm(&#39;您确定要删除吗?&#39;);            
            if(flag){
                alert("拜拜");
            } else{
                alert("我们还嫩能够继续。");
            }
        }        function toBaidu(){
            open(&#39;https://www.baidu.com&#39;);
        }    </script></head><body>
    <!--删除按钮-->
    <!--<buttun onclick="javascript:confirm(&#39;您确定要删除吗?&#39;)">删除</buttun>-->
    <buttun onclick="del()">删除</buttun>
    <buttun onclick="toBaidu()">百度</buttun>
    <a href="history.html">去history页面</a>
    <button onclick="javascript:history.forward()">前进</button>
    </body>
    </html>
Copier après la connexion

success.html

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>欢迎页</title>
    <script>
        function closeThis(){
            close(&#39;./success.html&#39;);

        }    </script></head><body>
    <img src="./img/gaoyuanyuan.png" /> 欢迎您!    
    <button onclick="closeThis()">关闭</button>
    </body>
    </html>
Copier après la connexion
setTimeout(function(){},毫秒) 指定时间延迟操作 只操作一次 

var i=setInterval(function(){},毫秒) 指定时间延迟操作 操作多次(每隔一段时间操作一次)
clearInterval(i) 清空定时特效

onload 事件:等待页面上的所有元素加载完毕
Copier après la connexion

timing.html

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>定时函数</title>
    <script>
        function print(){
         setTimeout(         
         function(){
         alert("我叫jhz");
         },5000
         );
         }
         print();    
         </script>
    </head><body>
    <input name="btn" type="button" value="定时" onclick="print();" />
    </body>
    </html>
Copier après la connexion
<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>定时函数</title>
    <script>
        window.onload=function(){
            //保证页面上的元素加载完毕后
            var btn=document.getElementsByTagName(&#39;button&#39;);
            alert(btn);            // 元素中的文本 innerText
            alert(btn.innerText);
        }    </script>
    </head><body>
    <button id="btn">点击获取验证码</button></body></html>
Copier après la connexion

history.html

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>history对象</title></head><body>
    <!--<button onclick="javascript:history.forward()">前进</button>-->
    <button onclick="javascript:history.back()">后退</button>
    </body>
    </html>
Copier après la connexion

history:window
Historique:back() Revenir en arrière ===>go(-1)
                forward() forward ===> GO (index) peut avancer et reculer

Remarque : les boutons avant et arrière du navigateur ont le même effet.
Lorsque nous accédons à un lien à partir d'une page Web, nous pouvons revenir à la page Web, puis sur la page Web, nous pouvons avancer à nouveau vers la page de lien à laquelle nous venons de passer. (Comme les étapes précédentes et suivantes continues)
emplacement : fenêtre

    host:主机地址+端口号
    hostname:主机名
    port:端口号
    protocol:协议
    href:发送请求到指定URL
    reload() 刷新当前页面
    replace(url) 替换 以新的页面替换当前页面
Copier après la connexion

emplacement.html

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>location</title>
    <script>
        function toBaidu(){
            //get请求
            location.href="http://www.baidu.com";            Math
            Date
        }    </script></head><body>
    <button onclick="javascript:alert(location.host)">查看主机地址</button>
    <button onclick="javascript:alert(location.hostname)">查看主机名</button>
    <button onclick="javascript:alert(location.port)">查看端口</button>
    <button onclick="javascript:alert(location.protocol)">查看协议</button>
    <button onclick="javascript:alert(location.href)">查看href</button>
    <button onclick="toBaidu()">去百度</button>
    <button onclick="javascript:location.reload()">刷新</button>
    <!--get请求-->
    <button onclick="javascript:location.replace(&#39;http://www.baidu.com&#39;)">replace百度</button></body></html>
Copier après la connexion

—Objet de document XML document.getXXX()
var obj=document.getElementById("valeur de l'attribut id") L'obtention de l'objet élément en fonction de l'identifiant de l'élément de page renvoie un objet nœud unique
————————————Tous les nœuds sont renvoyés— ——— ————-
document.getElementsByName("name attribuer la valeur") obtient l'objet élément en fonction de l'attribut nom de l'élément de page

   document.getElementsByClassName("class属性值")

   document.getElementsByTagName("节点名称")
Copier après la connexion

Fonction objet intégrée de Javascript

   **Math对象:**
      Math.ceil(number)向上取整  
      Math.floor(number) 向下取整
      Math.round(number)四舍五入
      Math.random() 生成0~1的随机数

   **Date日期对象:**
    getDate = function() {};  // 获取当前日期(天)
    }
    getDay = function() {};  //一周中的第几天 

    }
    getMonth = function() {};// 一年中的第几月
    }
    getFullYear = function() {};// 返回年份 4位数
    }
    getHours = function() {};  //一天的第几个小时
    }
    getMilliseconds = function() {}; //获取毫秒 当前分钟
    }
    getMinutes = function() {};//分钟 当前小时
    }
    getSeconds = function() {}; //秒 当前分钟
    }
    getTime = function() {}; //时间  1970年1月1日 到现在的毫秒数
Copier après la connexion

date.html

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>date</title>
    <script>
        window.onload=function(){
            var date = new Date();
            alert(date.getDate());//获取当前日期(天)
            alert(date.getDay());//一周中的第几天
            alert(date.getMonth());//一年中的第几月   0-7(cong0开始)
            alert(date.getFullYear());// 返回年份 4位数
            alert(date.getHours());//一天的第几个小时
            alert(date.getMilliseconds());//获取毫秒 当前分钟
            alert(date.getMinutes ());//分钟 当前小时
            alert(date.getSeconds ());//秒 当前分钟
            alert(date.getTime());//时间  1970年1月1日 到现在的毫秒数
            document.write("结束。");
        }    </script></head><body></body></html>
Copier après la connexion
Recommandations associées :

Analyse du contenu des données d'objet date en js (avec casse)

À quoi devez-vous faire attention lors de l'écriture de composants js ? (Présentation de la méthode)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal