JavaScript学习

Aa_bandon

已于 2024-05-31 09:22:37 修改

阅读量324

点赞数 3

文章标签： javascript 学习前端

于 2024-05-30 18:01:05 首次发布

本文链接：https://blog.csdn.net/Aa_bandon/article/details/139331168

版权

1.DOM操作。

使用document.getElementById可以获取元素对象。

<body>
<img src="img/a.jpg" id="img1" width="500px" height="500px">
<p id="text">我是刘长吉</p>
<script>
    var img = document.getElementById("img1");
    img.src = "img/b.jpg"

    var p = document.getElementById("text");
    p.innerHTML = "我是张杰"+p.innerHTML
</script>
</body>

2.实现切图。

<body>
<img src="img/a.jpg" id = "img1" width="720" height="450">
<input type="button" value="下一张" id="next">

<script>
    var btn1 = document.getElementById("next");
    var img = document.getElementById("img1");
    var flag = 1;
    btn1.onclick = function (){
        if(flag == 1){
            img.src = "img/b.jpg"
            flag = 2
        }
        else if(flag == 2){
            img.src = "img/c.jpg"
            flag = 3
        }
        else if(flag == 3){
            img.src = "img/a.jpg"
            flag = 1
        }
    }

</script>

</body>

3.BOM 浏览器对象操作。

将浏览器各个组成部分拆分成对象
组成:
    window 窗口对象
    navigeter 浏览器对象
    location 地址栏对象
    history 历史记录对象
    Screen 显示屏对象

    //alert() 携带一个确定按钮 警告框
    window.alert("aaaa")
    
    //confirm()携带一个确定和取消按钮的提示框 确定 true 点击取消返回 false
    if(confirm("您确定删除吗?")){
        document.write("删除成功")
    }else {

        document.write("删除失败")
    }

    //prompt() 携带一个输入框的弹窗 返回值就是你输入的内容
    var str = prompt("请输入密码")
    document.write(str)

4.打开或关闭浏览器。

<body>
<input type="button" value="打开" id="btn1">
<input type="button" value="关闭" id="btn2">
<script>
    /* open() 打开一个新的浏览器窗口
     close() 关闭一个浏览器窗口 (谁调用我 我关闭谁)*/

    //获取元素对象
    var newWindow;
    document.getElementById("btn1").onclick = function () {
        newWindow =  open("https://www.baidu.com/")
    }


    //获取元素对象
    document.getElementById("btn2").onclick = function () {

        newWindow.close()
    }


</script>

</body>

5.定时器。

定时器:
        setTimeout() 设置一次性定时器
        clearTimeout() 关闭一次性定时器
        setInterval() 设置循环定时器
        clearInterval() 关闭循环定时器

<body>
<script>
    

    var st1 =  setTimeout(function () {
        alert("aaa")
    },2000)

    clearTimeout(st1)

    var st2 = setInterval(function () {
        alert("bbb")
    },2000)

    clearInterval(st2)

</script>
</body>

6.切图加循环定时器就实现了简单的轮播图。

<body>
<img src="img/a.jpg" id = "img1" width="720" height="450">
<input type="button" value="下一张" id="next" onclick="doNext()">

<script>
    var img = document.getElementById("img1");
    var flag = 1;

    function doNext(){

        if(flag == 1){
            img.src = "img/b.jpg"
            flag = 2
        }
        else if(flag == 2){
            img.src = "img/c.jpg"
            flag = 3
        }
        else if(flag == 3){
            img.src = "img/a.jpg"
            flag = 1
        }
    }
    //自制定时器轮播图
    setInterval(doNext,2000)
</script>

</body>

7.浏览器窗口对象。

<script>
/*    
location 地址栏对象
不需要创建 直接使用 location.方法（）
常用方法：
    reload（） 刷新页面
    href：跳转资源路径
*/

location.reload()
location.href = "https://www.baidu.com/"


 /*  
history 历史记录对象
不需要创建 history.方法（）
常用方法：
    farword（）前进一个历史记录
    back（）后退一个历史记录
    go（参数） 参数为正 前进几个历史记录 为负数 后退几个历史记录
*/

history.forward()
history.go(1)


</script>

8.document 文档对象

<script>
    // 1.创建 不需要创建直接使用document
    // 2.方法
    // document.getElementById() 根据id属性值 获取元素对象
    var div1Element = document.getElementById("div1");
    document.write(div1Element+"<br>")

    // document.getElementsByName()根据name属性值 获取元素对象集合
    var div2sElement = document.getElementsByName("div2");
    document.write(div2sElement.length+"<br>")
    // document.getElementsByClassName()根据class属性值 获取元素对象集合
    var div3sElement = document.getElementsByClassName("div3");
    document.write(div3sElement.length+"<br>")
    // document.getElementsByTagName()根据标签名获取元素对象集合
    var divsElement = document.getElementsByTagName("div");
    document.write(divsElement.length+"<br>")
</script>

9.Element对象。

有两个方法：

removeAttribute("href")，删除元素属性。

setAttribute("href","https://www.baidu.com")，设置元素属性值。

<body>
<a href="">只是一个超链接</a>
<input type="button" id="btn1" value="删除属性">
<input type="button" id="btn2" value="设置属性">
</body>
</html>
<script>
    document.getElementById("btn1").onclick = function (){
        var a = document.getElementsByTagName("a")[0];
        a.removeAttribute("href")

    }
    document.getElementById("btn2").onclick = function (){
        var a = document.getElementsByTagName("a")[0];
        a.setAttribute("href","https://www.baidu.com")
    }
</script>