Web网页基础02

最新推荐文章于 2023-04-26 11:15:55 发布

长歌暖伏生

最新推荐文章于 2023-04-26 11:15:55 发布

阅读量86

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/qq_41668667/article/details/113377867

版权

本文详细介绍了JavaScript中的BOM（Browser Object Model），包括Window、Location、History对象以及DOM（Document Object Model）的Document、Element、Node对象，并探讨了事件监听机制，涵盖点击、焦点、加载等各类事件。同时，文章还简单提及了Bootstrap框架的基础应用，如导航栏、轮播图等组件的实现。

摘要由CSDN通过智能技术生成

1.JavaScript高级

1.BOM

BOM：Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装成对象。

BOM由什么组成

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

Window：窗口对象

创建：Window对象不需要创建可以直接使用 window使用。 window.方法名();

方法

与弹出框有关的方法

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

如果用户点击确定按钮，则方法返回true
如果用户点击取消按钮，则方法返回false

prompt() 显示可提示用户输入的对话框。

返回值：获取用户输入的值或者为null

以上方法的window可以省略

代码示例

    window.alert("hello,javaScript1");
    //省略window
    alert("hello,javaScript2");

    var bool= window.confirm("hello,javaScript3"); //显示一个boolean值

    var s = window.prompt("请输入");

与打开关闭有关的方法

close() 关闭浏览器窗口

谁调用我，我关谁

open() 打开一个新的浏览器窗口

返回新的Window对象

代码示例

//打开新窗口
newWindow = window.open("https://www.baidu.com");
//关闭新窗口
window.close();

原窗口关闭，新打开一个百度的窗口

与定时器有关的方式

setTimeout() 在指定的毫秒数后调用函数或计算表达式

参数
js代码或者方法对象，毫秒值
返回值：唯一标识，用于取消定时器

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval() 取消由 setInterval() 设置的 timeout。

代码示例

    //5秒后执行fun()方法
    let timeout = window.setTimeout("fun();",5000);
    function fun(){
   
         alert('boom~~');
     }

     //取消上面5秒后执行的方法
    window.clearTimeout(timeout);



    //2秒循环执行fun方法
    var id = setInterval(fun,2000);
    function fun(){
   
        alert('boom~~');
    }
    //清除上面的循环执行fun方法
    clearInterval(id);

属性

获取其他BOM对象
history
location
Navigator
Screen
获取DOM对象
document

代码示例

    let document = window.document;
    let history = window.history;
    let location = window.location;
    let navigator = window.navigator;
    let screen = window.screen;

特点

Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。方法名();

Location：地址栏对象

创建(获取)

window.location
location

直接从创建中获取

方法

reload() 重新加载当前文档。刷新

属性

href 设置或返回完整的 URL

代码示例

<!--定义2个按钮-->
<input type="button" id="btn" value="刷新">

<input type="button" id="goItcast" value="去百度">

<script>
    
    //reload方法，定义一个按钮，点击按钮，刷新当前页面
    //1.获取按钮
    var btn = document.getElementById("btn");
    //2.绑定单击事件
    btn.onclick = function(){
   
        //3.刷新页面
        location.reload();
    }


    //获取href
    var href = location.href ;
    //alert(href);
    //点击按钮，去访问www.itcast.cn官网
    //1.获取按钮
    var goItcast = document.getElementById("goItcast");
    //2.绑定单击事件
    goItcast.onclick = function(){
   
    //3.去访问www.itcast.cn官网
    location.href = "https://www.baidu.com";
    }
    
</script>

History：历史记录对象

创建(获取)

window.history
history

方法

back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
参数：
正数：前进几个历史记录
负数：后退几个历史记录

属性

length 返回当前窗口历史列表中的 URL 数量。

代码示例

<script>

    history.back(); //加载 history 列表中的前一个 URL
    history.forward();//加载 history 列表中的下一个 URL。
    history.go(-2);//加载 history 列表中的后2个具体页面。

    let length = history.length;// 返回当前窗口历史列表中的 URL 数量。

</script>

2.DOM

概念： Document Object Model 文档对象模型，将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

在这里插入图片描述
DOM 标准有3个不同的标准

核心 DOM——针对任何结构化文档的标准模型
XML DOM——针对 XML 文档的标准模型
HTML DOM——针对 HTML 文档的标准模型

下面主要介绍核心DOM文档对象

1.Document：文档对象

创建(获取)：在html dom模型中可以使用window对象来获取

window.document
document


var document1 = window.document;
var document2 = document;

方法

获取Element对象

getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

创建其他DOM对象

createAttribute(name)
createComment()
createElement()
createTextNode()

属性
无

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>


<div id="div1">div1</div>
<div

最低0.47元/天解锁文章

长歌暖伏生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录