day_1_9 JavaWeb系列学习总结之js

最新推荐文章于 2024-07-21 12:18:49 发布

梦蓝樱飞

最新推荐文章于 2024-07-21 12:18:49 发布

阅读量1.3k

点赞数 1

分类专栏： JavaWeb JavaWeb基础系列学习总结

本文链接：https://blog.csdn.net/menglanyingfei/article/details/79088716

版权

JavaWeb 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

JavaWeb基础系列学习总结

8 篇文章 1 订阅

订阅专栏

在JavaWeb中, 常见的JS语法与Java大同小异.
我在这里主要总结一下JavaScript有关DOM操作和其内置对象的用法.

1. DOM

DOM(Document Object Model): 文档对象模型, 是JS动态操作HTML标签的依据.

a) 元素节点的获取

document.getElementById();
document.getElementsByName();
document.getElementsByTagName();

示例代码:

<!DOCTYPE html>
<html>
  <head>
    <title>dom1.html</title>
    <meta charset="UTF-8">
  </head>

  <body>
    用户名:<input type="text" name = "username" id="userid"/>
           <br/>
    性别:<input type="radio" name="sex" value="male"/> 男
        <input type = "radio" name="sex" value="female"/>女

    <button>点击</button>
    <script type="text/javascript">

//          var nameInput = document.getElementById("userid"); // 根据id获取元素节点
//          nameInput.type = "checkbox"; // 将文本框变成复选框
//          alert(nameInput.name);

//          //根据标签名来获取元素节点, 得到的是一个对象数组
//          var inputArr = document.getElementsByTagName("input");
//          alert(inputArr[1].value);

        document.getElementsByTagName("button")[0].onclick = function() {
            alert("按钮被点击了");
        }

        //根据name属性值来获取
        var arr = document.getElementsByName("sex");
        for(var i = 0; i < arr.length;i++){
            alert(arr[i].value);
        }

    </script>
  </body>
</html>

b) 动态增加内容

如在<ul>标签下动态地增加一个<li>标签:

<!DOCTYPE html>
<html>
  <head>
    <title>dom2.html</title>
    <meta charset="UTF-8">
  </head>

  <body>
    <ul>
        <li>狗娃</li>
        <li>狗剩</li>
        <li>铁蛋</li>
    </ul>
    <input type = "button" value="点击领取翠花" onclick="add()"/>

    <script type="text/javascript">
        function add(){
            //添加翠花
            //创建li元素节点
            var liElement = document.createElement("li");
            //创建 “翠花” 文本节点
            var textNode = document.createTextNode("翠花");

            //将文本节点添加到元素节点: 父节点.appendChild(子节点)
            liElement.appendChild(textNode);

            //获取ul元素节点
            var ulElement = document.getElementsByTagName("ul")[0];
            ulElement.appendChild(liElement);
        }
    </script>
  </body>
</html>

c) 操作元素节点的属性

即改变一个HTML标签的属性

<!DOCTYPE html>
<html>
  <head>
    <title>dom3.html</title>
    <meta charset="UTF-8">
  </head>

  <body>
    <input type = "text" name = "username" value = "gouwa" />
    <script type="text/javascript">

          /*
            1.   元素对象.属性名       获取属性值
            2.   元素对象.getAttribute("属性名")     获取属性值
            3.   元素对象.setAttribute("属性名","属性值");  添加或者设置属性名和对应的属性值
            4.   元素对象.removeAttribute("属性名");
          */
          alert(document.getElementsByTagName("input")[0].getAttribute("name"));//获取属性值
          //设置属性值
          document.getElementsByTagName("input")[0].setAttribute("value","狗剩");

          //移除属性
          document.getElementsByTagName("input")[0].removeAttribute("value");
    </script>
  </body>
</html>

2. JS常见内置对象

window

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。(在使用时, window对象可以省略)

alert();  弹出框
confirm(); 警告框
prompt(); 输入框

示例代码:

<!DOCTYPE html>
<html>
  <head>
    <title>window_01.html</title>

    <meta charset="UTF-8">

  </head>

  <body>
    <button onclick="delete_()">删除</button>
    <script type="text/javascript">

        function delete_(){
            var flag = confirm("一定要删除吗 ？不能后悔的！！");
            if (flag == true) {
                alert("删除成功");
            }
        }

        // prompt() 输入框
//      function delete_() {
//          var itemsID = window.prompt("请输入要删除的商品的id", "默认id");
//          alert(itemsID);
//      }
    </script>
  </body>
</html>

补充: 使用window对象实现定时器

<!DOCTYPE html>
<html>
  <head>
    <title>window_02.html</title>

    <meta charset="UTF-8">

  </head>

  <body>
    <button onclick="clear_()">清除定时任务</button>
    <script type="text/javascript">
        //定义函数
        function aaa(){
            alert("helloworld");
        }

        //定时器的实现
//      window.setTimeout("aaa()", 3000);//只会执行一次

        var interval = window.setInterval("aaa()", 2000);//循环执行

        function clear_(){
            window.clearInterval(interval);//清除定时任务
        }
    </script>
  </body>
</html>

location

location对象的href 属性, 一般用来作为页面的跳转

<!DOCTYPE html>
<html>
  <head>
    <title>location.html</title>

    <meta charset="UTF-8">

  </head>

  <body>
    <button onclick="change_()">跳转到百度页面</button>

    <script type="text/javascript">
        function change_(){
            location.href = "http://www.baidu.com";
        }
    </script>
  </body>
</html>

history

历史记录中前进/后退

<!DOCTYPE html>
<html>
  <head>
    <title>history_01.html</title>

    <meta charset="UTF-8">

  </head>

  <body>
    <input type = "button" value="向前" onclick="forword_()"/>
     <input type = "button" value="退后" onclick="back_()"/>
     <a href="history_02.html">跳转到第二个页面</a>
    <script type="text/javascript">
        /*

        history对象
        back()
        go()
        forward()
        */
        function forword_(){
            history.forward(); // 返回到上一个页面
//          history.go(1);
        }

        function back_(){
            //history.back();
            history.go(-1);
        }
    </script>
  </body>
</html>

梦蓝樱飞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day_1_9 JavaWeb系列学习总结之js

在JavaWeb中, 常见的JS语法与Java大同小异. 我在这里主要总结一下JavaScript有关DOM操作和其内置对象的用法.1. DOMDOM(Document Object Model): 文档对象模型, 是JS动态操作HTML标签的依据.a) 元素节点的获取document.getElementById();document.getElementsByN
复制链接

扫一扫