1.2客户端JavaScript

最新推荐文章于 2022-01-21 13:17:06 发布

原创最新推荐文章于 2022-01-21 13:17:06 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

11 篇文章

订阅专栏

JavaScript学习指南学习笔记

5 篇文章

订阅专栏

这篇博客主要探讨客户端JavaScript的基础知识，包括DOM操作、事件处理、AJAX请求和浏览器兼容性问题，旨在提升网页交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//引入js文件
<html>
<head>
    <script src="library.js"></script>
</head>
<body>
    <p>
        This is a paragraph of HTML
    </p>
    <script>
        //嵌套到HTML中的js代码
    </script>
    <p>
        Here is more HTML.
    </p>
</body>
</html>

//js全局函数
<script>
function moveon(){
    var answer=confirm("准备好了吗")
    if(answer){
        window.location="http://taobao.com";
    } 
}
setTimeout(moveon,60000)
</script>

//通过脚本操作HTML内容
function debug(msg){//指定区域输出调试信息
    var log=document.getElementById("debuglog");
    if(!log){//不存在就创建一个
        log=document.createElement("div");
        log.id="debuglog";
        log.innerHTML="<h1>Debug Log</h1>";
        document.body.appendChild(log);
    }
    var pre=document.createElement("pre");//创建pre标签
    var text=document.createTextNode(msg);//将msg包装在文本节点中
    pre.appendChild(text);
    log.appendChild(pre);
}

//如何操作HTML中定义的web内容的元素
function hide(e,reflow){
    if(reflow){//如果第二个参数为true;隐藏元素
        e.style.display="none";
    }else{
        e.style.visibility="hidden";
    }
}
function highlight(e){
    if(!e.className){
        e.className="hilite";
    }else{
        e.className+="hilite";
    }
}

//通过事件处理程序来定义文档行为
<script src="debug.js"></script>
<script src="hide.js"></script>
Hello
<button onclick="hide(this,true);debug('hide button 1);" >Hide1</button>
<button onclick="hide(this);debug('hide button 2);">Hide2</button>
World

//load事件只有在文档加载完成以后才会触发
window.onload=function(){
    var images=document.getElementsByTagName("img");
    for(var i=0;i<images.length;i++){
        var image=images[i];
        if(image.addEventListener){//注册事件处理程序的一种方法
            image.addEventListener("click",hide,false);
        }else{
            image.attachEvent("onclick",hide);
        }
    }
    function hide(event){
        event.target.style.visibility="hidden";
    }
}

//使用js来控制页面的内容,CSS
function debug(msg){
    var log=$("#debuglog");
    if(log.length==0){
        log=$("<div id='debuglog'><h1>Debug Log<h1></div>");
        log.appendTo(document.body);//追加到body后面
    }
    log.append($("<pre/>").text(msg));
}