JavaScript使用

Posted 2021-11-01 学无止路

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript使用相关的知识，希望对你有一定的参考价值。

1 阻止标签的默认行为

1.阻止超链接的默认提交行为。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js程序</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        function test1() {
            var name = "Adair";
            var date = new Date();
            location.href = "/xxx/xxxAction/" + name + date;
        }
    </script>
</head>
<body>
    <!--阻止超链接的默认提交行为-->
   <a href="javascript:void(0);" onclick="test1();">点击</a>
</body>
</html>

如图所示：
2.阻止表单标签的默认提交行为。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js程序</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
    </script>
</head>
<body>
    <!--阻止表单标签的默认提交行为-->
    <form action="/xxx/xxxAction" method="post" onsubmit="return false">
        name:<input type="text" name="name" /> </br>
        pwd:<input type="text" name="pwd" /> </br>
        <input type="submit" value="注册" />
    </form>
</body>
</html>

如图所示：
注意：onsubmit = “return 调用函数” 以函数的返回结果决定是否提交表单。

2 事件对象 event【了解】

演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js程序</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        function test1(){
            alert("下课！！！！");
            // 需要当前事件的一些要素 可以直接使用event
            alert(event.target);    // 事件源 发生事件的标签
            alert(event.type);      // 事件属性 click单击
            alert(event.clientX);   // 获取发生事件的横向坐标 单位：像素点
            alert(event.clientY);   // 获取发生事件的纵向坐标 单位：像素点
        }
    </script>
</head>
<body>
   <h1 onclick="test1();">下课！！！</h1>
</body>
</html>

如图所示：

3 Js事件冒泡【了解】

演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        #outer{
            border: solid 1px red;
            background-color: red;
            width: 200px;
            height: 200px;
            padding: 20px 20px;
        }
        #inner{
            border: solid 1px blue;
            background-color: blue;
            width: 100px;
            height: 100px;
        }
    </style>
    <meta charset="UTF-8">
    <title>Js事件冒泡</title>
    <script type="text/javascript">
        function test1() {
            alert("外层单击事件触发");
        }
        function test2() {
            // 阻止事件冒泡
            event.stopPropagation();
            alert("内层单击事件触发");
        }
    </script>
</head>
<body>
    <div id="outer" onclick="test1();">
        outer
        <div id="inner" onclick="test2();">
             inner
        </div>
    </div>
</body>
</html>

如图所示：

4 DOM 【重点】

1.什么是DOM Document Object Model 文档对象模型。
Js会将页面封装成一个document对象，页面当中的每个标签也会封装成对应的一个标签对象，并且以树状结构存储。
目的：方便对页面结构进行操作。
DOM = 文档对象模型树 + 相关操作方法(API)。如图所示：
2.相关操作方法
a.获取标签对象
document.getElementById(“id值”) ; //通过标签id属性值获取标签对象。
获取的时单个标签对象。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        function test1(){
            // 获取h1标签对象
            var h1 = document.getElementById(h);
            alert(h1);
        }
    </script>
</head>
<body>
    <h1 id="h">下课！！！</h1>
    <input type="button" value="点击" onclick="test1();">
</body>
</html>

如图所示：
b.操作标签属性
获取：标签对象.属性名
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        function test1(){
            // 获取h1标签对象
           // var h1 = document.getElementById(h);
            // 获取id属性值  标签对象.属性名
            //alert(h1.id);
            // 获取输入框的标签对象
            var input = document.getElementById(i1);
            // 获取标签对象的属性值
            var name = input.value;
            if (name.length >= 6 && name.length <= 16){
                alert("输入正确!");
            }else {
                alert("输入错误!");
            }
            alert(name);
        }
    </script>
</head>
<body>
    <h1 id="h">下课！！！</h1>
    姓名：<input id="i1" type="text" name="name">
    <input type="button" value="点击" onclick="test1();">
</body>
</html>

如图所示：
修改：标签对象.属性名 = “值”
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换灯泡</title>
    <script type="text/javascript" >
        function test1() {
            // 获取图片标签对象
            var image = document.getElementById("img1");
            // 判断当前图片src属性
            if (image.src == "http://localhost:63342/javascript/javascript01/web/images/1.jpg"){
                //  修改src属性
                image.src = "images/2.jpg";
            }else {
                image.src = "images/1.jpg";
            }
        }
    </script>
</head>
<body>
    <img id="img1" src="images/1.jpg" />
   <input type="button" value="换一批" onclick="test1();" />
</body>
</html>

如图所示：
c.操作标签体文本
获取：标签对象.innerText 只获取内部文本信息。
标签对象.innerHTML 获取内部文本以及子标签。
修改：
标签对象.innerText= “文本” 会覆盖标签内所有内容。
标签对象.innerHTML= “文本” 会覆盖标签内所有内容。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        function test1() {
            var div = document.getElementById("d");
           // div.innerText = "TXWang";
           // alert(div.innerHTML);
            div.innerHTML = "TXWang";
        }
    </script>
</head>
<body>
    <div id="d">
        <div>Adair</div>
    </div>
    <input type="button" value="点击" onclick="test1();">
</body>
</html>

如图所示：d.标签对象的常用属性
标签对象.parentNode 获取当前标签对象的父节点【常用】。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        function test1() {
           var li = document.getElementById("li2");
           var ol = li.parentNode;
           alert(ol);
        }
    </script>
</head>
<body>
    <ol>
        <li>Adair1</li>
        <li id="li2">Adair2</li>
        <li>Adair3</li>
        <li>Adair4</li>
    </ol>
    <input type="button" value="点击" onclick="test1();">
</body>
</html>

如图所示：
标签对象.childNodes 获取当前标签对象的子节点返回数组空格也算子节点。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        function test1() {
           var ol = document.getElementById("l");
            var lis = ol.childNodes;
            alert(lis.length);
            alert(lis[0]);
        }
    </script>
</head>
<body>
    <ol id="l">
        <li>Adair1</li>
        <li >Adair2</li>
        <li>Adair3</li>
        <li>Adair4</li>
    </ol>
    <input type="button" value="点击" onclick="test1();">
</body>
</html>

如图所示：
标签对象.firstChild 获取当前标签对象的第一个子节点。
标签对象.lastChild 获取当前标签对象的最后一个子节点。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        function test1() {
           var ol = document.getElementById("l");
            alert(ol.firstChild.innerText);
            alert(ol.lastChild.innerText);
        }
    </script>
</head>
<body>
    <ol id="l"><li>Adair1</li>
        <li >Adair2</li>
        <li>Adair3</li>
        <li>Adair4</li>
    </ol>
    <input type="button" value="点击" onclick="test1();">
</body>
</html>

如图所示：
标签对象.proviousSibling 获取当前标签对象上一个兄弟节点。
标签对象.nextSibling 获取当前标签对象下一个兄弟节点。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        function test1() {
            var li = document.getElementById("l2");
           var l3 = li.nextSibling.nextSibling;
           alert(l3.innerText);
           var l1 = li.previousSibling.previousSibling;
           alert(l1.innerText);
        }
    </script>
</head>
<body>
    <ol id="l">
        <li>Adair1</li>
        <li id="l2">Adair2</li>
        <li>Adair3</li>
        <li>Adair4</li>
    </ol>
    <input type="button" value="点击" onclick="test1();">
</body>
</html>

如图所示：
e.操作页面结构对页面元素的添加或者删除
添加：
1.创建标签对象 document.createElement(“标签名”);
2.创建文本对象 document.createTextNode(“文本”);
3.在父节点中添加子节点：父节点.appendChild(子节点);
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        function test1() {
            // 创建一个div  <div> Adair </div>
            // 1.创建div标签对象
            var  div = document.createElement("div");
            // 2.创建文本对象
            var TestNode = document.createTextNode("Adair");
            // 3.将文本放入div标签中
            div.appendChild(TestNode)以上是关于JavaScript使用的主要内容，如果未能解决你的问题，请参考以下文章 
 48个值得掌握的JavaScript代码片段（上）
 JavaScript 代码片段
 如何将此 JavaScript 代码片段翻译成 Parenscript？
 Javascript代码片段在drupal中不起作用
 VSCode自定义代码片段12——JavaScript的Promise对象
 VSCode自定义代码片段12——JavaScript的Promise对象