JavaScript-dom2

最新推荐文章于 2024-11-08 16:09:18 发布
最新推荐文章于 2024-11-08 16:09:18 发布
阅读量200 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhangkui/p/8487941.html
版权

案例-显示隐藏二维码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div>
    <a href="#">aa</a>
    <div id="er" class="hide">
        <img  src="image/2.png" alt=""/>
    </div>
</div>
<script>
    a = document.getElementsByTagName("a")[0];
    er = document.getElementById("er");

    a.onmouseover = fn1;
    a.onmouseout  =f2;
    function fn1() {
        // er.className="show";
        
        //replace可以替换类名
        er.className=er.className.replace("hide","show");
        
    }
    function f2() {
        er.className="hide";
    }
</script>
</body>
</html>

 案例-禁用文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素属性</title>
</head>
<body>
<!--disable禁止修改-->
user:<input type="text" value="nihao"/><button>禁用</button><button>解除</button><br/><br/>
password:<input type="password" value="nihao"/>

<script>
    //禁用文本框
    var inp = document.getElementsByTagName("input")[0];
    var btn1 = document.getElementsByTagName("button")[0];
    var btn2 = document.getElementsByTagName("button")[1];
    console.log(inp);
    btn1.onclick = function () {
        inp.disabled = "no";
    };
    btn2.onclick = function () {
        //解除禁用
        // inp.disabled = 0;//也可以用
        inp.removeAttribute("disabled")
    }

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

 案例-文本框获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框获取焦点</title>
    <style>
        input{
            width: 300px;
            height: 36px;
            padding-left: 5px;
            color: #ccc;
        }
        label{
            position: absolute;
            top:82px;
            left:56px;
            font-size: 12px ;
            color: #ccc;
            cursor: text;//模拟文本鼠标格式
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
京东:<input id="inp1" type="text" value="我是京东"><br><br>

<!--<lable></lable>标签，点击我是淘宝会自动选中输入框-->
淘宝:<label for="inp2">我是淘宝</label><input id="inp2" type="text" ><br><br>
placeholder:<input type="text" placeholder="placeholder">

<script>
    //京东获取焦点
    var inp1=document.getElementById("inp1");
    //获取焦点事件
    inp1.onfocus = function () {
        //如果value是我是京东，把值重制为空
        if(this.value==="我是京东"){
            inp1.style.color = "#000";
            inp1.value = "";
        }
    };
    //失去焦点事件
    inp1.onblur = function () {
        //如果value是空，把值重制为我是京东
        if(this.value === ""){
            inp1.style.color = "#ccc";
            inp1.value = "我是京东";
        }
    };


    //淘宝获取焦点
    //在input输入文字，lable标签隐藏；input标签value变成字符串，lable显示
    var inp2=document.getElementById("inp2");
    var lab=document.getElementsByTagName("label")[0];
    //绑定事件（输入事件：文字的输入和删除都会触发这个事件）
    // inp2.focus();  //自动获取插入条光标
    inp2.oninput = function () {
        //判断input值是不是为空，如果为空显示lable标签；否则隐藏lable标签
        if(this.value === ""){
            lab.className = "show";
        }else{
            lab.className = "hide";
        }
    }

</script>

</body>
</html>

 案例-用户注册高亮显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册高亮显示</title>
    <style>
        .wrong{
            border: 2px solid red;
        }
        .right{
            border: 2px solid #91B81D;
        }
    </style>
</head>
<body>
    账号:<input type="text" οnblur="fn(this)"/><br><br>
    密码:<input type="password" οnblur="fn(this)"/>

<script>
    //失去焦点的时候判断input中的值，如果6-12个字符通过,否则报错

    function fn(aaa) {

        // console.log(this);
        //只有传递的this才指的是标签本身
        // console.log(aaa.value);
        // console.log(this.value);
        if(aaa.value.length <6 || aaa.value.length>12){
            aaa.className = "wrong";
        }else{
            aaa.className = "right";
        }
    }
</script>
</body>
</html>

 案例-input for循环赋值，取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环为文本框赋值和取值</title>
</head>
<body>
    <input type="text"/><br><br>
    <input type="text"/><br><br>
    <input type="text"/><br><br>
    <input type="text"/><br><br>
    <input type="text"/><br><br>
    <input type="text"/><br><br>
    <button>赋值</button><br><br>
    <button>取值</button><br><br>

<script>
    //for循环赋值
    var inpArr=document.getElementsByTagName("input");
    var btnArr=document.getElementsByTagName("button");

    btnArr[0].onclick = function () {
        //循环为每一个input赋值
        for(var i = 0;i<inpArr.length;i++){
            inpArr[i].value = i;
        }
    };

    //获取值
    btnArr[1].onclick = function () {
        //循环为获取input值
        var newArr=[];
        for(var i = 0;i<inpArr.length;i++){
            newArr.push(inpArr[i].value);
        }
        console.log(newArr.join("-"));
    }
</script>
</body>
</html>

 案例-全选反选

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onload = function () {
        //需求1、点击上面的input，下面全选或反选
        var topInp = document.getElementById("theadInp");
        var tbody = document.getElementById("tbody");
        var bottomInpArr = tbody.getElementsByTagName("input");
        topInp.onclick = function () {

            //判断在for循环里面
            // for(var i = 0;i<bottomInpArr.length;i++){
            //     if(topInp.checked === true){
            //         bottomInpArr[i].checked = true;
            //     }else{
            //     bottomInpArr[i].checked = false;
            //     }
            // }


            //先判断
            // if(topInp.checked){
            //     for(var i = 0;i<bottomInpArr.length;i++){
            //         bottomInpArr[i].checked = true;
            //     }
            // }else{
            //     for(var i = 0;i<bottomInpArr.length;i++){
            //         bottomInpArr[i].checked = false;
            //     }
            // }

            //终极版
            for(var i=0;i<bottomInpArr.length;i++){
                bottomInpArr[i].checked = this.checked;
                }
            };
            //需求2、如果下面的全部选定，上面选中，否则相反
            for(var i=0;i<bottomInpArr.length;i++){
                bottomInpArr[i].onclick = function () {
                    //开闭原则
                    var bool = true;
                    //检测每一个input的checked的属性值
                    for(var j=0;j<bottomInpArr.length;j++){
                        if(bottomInpArr[j].checked === false){
                            bool = false;
                        }
                    }
                    topInp.checked = bool;
                }
            }

    }
</script>



    <div>
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="theadInp">
                    </th>
                    <th>菜名</th>
                    <th>饭店</th>
                </tr>
            </thead>
            <tbody id="tbody">
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>地三鲜</td>
                <td>田老师</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>红烧肉</td>
                <td>田老师</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>刀削面</td>
                <td>田老师</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>凉面</td>
                <td>田老师</td>
            </tr>
            </tbody>
        </table>
    </div>


</body>
</html>

属性的方法操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性设置</title>
</head>
<body>

<div id="box" title="主体" class="abcd">我爱你中国</div>

<script>
    var div = document.getElementById("box");
    //两种方式不能交换使用，赋值和获取值必须使用同一种方法

    //元素节点.属性(元素节点[属性])  绑定的属性值不会出现在标签上
    div.aaaa = "111";
    console.log(div.aaaa);
    //get/set/removeAttribut 绑定的属性值会出现在标签上
    div.setAttribute("bbbb","222");
    console.log(div.getAttribute("bbbb"));

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

 经典案例-tab栏切换

 tab栏切换css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏切换</title>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
        margin: 100px auto;
        overflow: hidden;
    }
    ul{
        width: 600px;
        height: 40px;
        margin-left: -1px;
        list-style:none;
    }
    li {
        float: left;
        width: 101px;
        height: 40px;
        text-align: center;
        font: 600 18px/40px "simsum";
        background: pink;
        cursor: pointer;
    }
    span{
        display: none;
        width: 500px;
        height: 360px;
        background-color: yellow;
        text-align: center;
        font: 700 150px/360px "simsum";
    }
    .show{
        display: block;
    }
    .current{
        background-color: yellow;
    }
</style>
<body>

<div class="box">
    <ul>
        <li class="current">鞋子</li>
        <li>袜子</li>
        <li>裤子</li>
        <li>裙子</li>
        <li>帽子</li>
    </ul>
    <span class="show">鞋子</span>
    <span>袜子</span>
    <span>裤子</span>
    <span>裙子</span>
    <span>帽子</span>
</div>



</body>
</html>　　
 点亮盒子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点亮盒子</title>
    <style>
        button{
            margin: 10px;
            width: 100px;
            height: 40px;
            cursor: pointer;
        }
        .current{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

<script>
    //鼠标放在那个按钮上，那个变色
    var btnArr=document.getElementsByTagName("button");
    for(var i=0;i<btnArr.length;i++){
        btnArr[i].onmouseover = function () {
            // 重点：排他思想（干掉所有人，剩下我一个）
            // 排他思想适合for循环
            for(var j=0;j<btnArr.length;j++){
                btnArr[j].className = "";
            }
            this.className = "current";
        }
    }
</script>


</body>
</html>
弹出盒子索引值 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出盒子的索引值</title>
    <style>
        button{
            margin: 10px;
            width: 100px;
            height: 40px;
            cursor: pointer;
        }
        .current{
            background-color: yellow;
        }
    </style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
    //鼠标放在那个按钮上，那个变色
    var btnArr=document.getElementsByTagName("button");
    for(var i=0;i<btnArr.length;i++){
        //每次循环绑定一个属性，属性值为该盒子索引值
        // btnArr[i].setAttribute("index",i); //可以用
        btnArr[i].index=i;

        btnArr[i].onmouseover = function () {
            // 重点：排他思想（干掉所有人，剩下我一个）
            // 排他思想适合for循环
            for(var j=0;j<btnArr.length;j++){
                btnArr[j].className = "";
            }
            this.className = "current";
            // alert(this.getAttribute("index"));
            alert(this.index)
        }
    }
</script>
</body>
</html>
 tab栏切换js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏切换</title>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
        margin: 100px auto;
        overflow: hidden;
    }
    ul{
        width: 600px;
        height: 40px;
        margin-left: -1px;
        list-style:none;
    }
    li {
        float: left;
        width: 101px;
        height: 40px;
        text-align: center;
        font: 600 18px/40px "simsum";
        background: pink;
        cursor: pointer;
    }
    span{
        display: none;
        width: 500px;
        height: 360px;
        background-color: yellow;
        text-align: center;
        font: 700 150px/360px "simsum";
    }
    .show{
        display: block;
    }
    .current{
        background-color: yellow;
    }
</style>

<script>
    window.onload = function () {
        var liArr=document.getElementsByTagName("li");
        var spanArr=document.getElementsByTagName("span");

        for(var i = 0;i<liArr.length;i++){
            //绑定索引值
            liArr[i].index=i;
            liArr[i].onmouseover = function () {
                //排他思想，点亮盒子，利用索引值显示盒子
                for(var j=0;j<liArr.length;j++){
                    liArr[j].className = " ";
                    spanArr[j].className="";
                }
                this.className = "current";
                spanArr[this.index].className = "show";

            }
        }
    }
</script>


<body>

<div class="box">
    <ul>
        <li class="current">鞋子</li>
        <li>袜子</li>
        <li>裤子</li>
        <li>裙子</li>
        <li>帽子</li>
    </ul>
    <span class="show">鞋子</span>
    <span>袜子</span>
    <span>裤子</span>
    <span>裙子</span>
    <span>帽子</span>
</div>



</body>
</html>
 tab栏切换js（复杂）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏切换</title>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
        margin: 100px auto;
        overflow: hidden;
    }
    ul{
        width: 600px;
        height: 40px;
        margin-left: -1px;
        list-style:none;
    }
    li {
        float: left;
        width: 101px;
        height: 40px;
        text-align: center;
        font: 600 18px/40px "simsum";
        background: pink;
        cursor: pointer;
    }
    span{
        display: none;
        width: 500px;
        height: 360px;
        background-color: yellow;
        text-align: center;
        font: 700 150px/360px "simsum";
    }
    .show{
        display: block;
    }
    .current{
        background-color: yellow;
    }
</style>

<script>
    window.onload = function () {
        var liArr=document.getElementsByTagName("li");
        var spanArr=document.getElementsByTagName("span");

        for(var i = 0;i<liArr.length;i++){
            //绑定索引值
            // liArr[i].index=i;
            liArr[i].setAttribute("index",i);
            liArr[i].onmouseover = function () {
                //排他思想，点亮盒子，利用索引值显示盒子
                for(var j=0;j<liArr.length;j++){
                    // liArr[j].className = " ";
                    // spanArr[j].className="";
                    liArr[j].removeAttribute("class");
                    spanArr[j].removeAttribute("class");
                }
                this.setAttribute("class","current");
                // spanArr[this.index].className = "show";
                spanArr[this.getAttribute("index")].setAttribute("class","show");
            }
        }
    }
</script>


<body>

<div class="box">
    <ul>
        <li class="current">鞋子</li>
        <li>袜子</li>
        <li>裤子</li>
        <li>裙子</li>
        <li>帽子</li>
    </ul>
    <span class="show">鞋子</span>
    <span>袜子</span>
    <span>裤子</span>
    <span>裙子</span>
    <span>帽子</span>
</div>



</body>
</html>
 tab栏切换js（封装函数）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏切换</title>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
        margin: 100px auto;
        overflow: hidden;
    }
    ul{
        width: 600px;
        height: 40px;
        margin-left: -1px;
        list-style:none;
    }
    li {
        float: left;
        width: 101px;
        height: 40px;
        text-align: center;
        font: 600 18px/40px "simsum";
        background: pink;
        cursor: pointer;
    }
    span{
        display: none;
        width: 500px;
        height: 360px;
        background-color: yellow;
        text-align: center;
        font: 700 150px/360px "simsum";
    }
    .show{
        display: block;
    }
    .current{
        background-color: yellow;
    }
</style>

<script>
    window.onload = function () {
        //获取事件源和相关元素
        var boxArr = document.getElementsByClassName("box");
        //函数调用
        // fn(boxArr[0]);
        // fn(boxArr[1]);
        for(var i=0;i<boxArr.length;i++){
            fn(boxArr[i]);
        }
        function fn(ele) {
            var liArr=ele.getElementsByTagName("li");
            var spanArr=ele.getElementsByTagName("span");

            for(var i = 0;i<liArr.length;i++){
                //绑定索引值
                // liArr[i].index=i;
                liArr[i].setAttribute("index",i);
                liArr[i].onmouseover = function () {
                    //排他思想，点亮盒子，利用索引值显示盒子
                    for(var j=0;j<liArr.length;j++){
                        // liArr[j].className = " ";
                        // spanArr[j].className="";
                        liArr[j].removeAttribute("class");
                        spanArr[j].removeAttribute("class");
                    }
                    this.setAttribute("class","current");
                    // spanArr[this.index].className = "show";
                    spanArr[this.getAttribute("index")].setAttribute("class","show");
                }
            }
        }

    }
</script>


<body>

<div class="box">
    <ul>
        <li class="current">鞋子</li>
        <li>袜子</li>
        <li>裤子</li>
        <li>裙子</li>
        <li>帽子</li>
    </ul>
    <span class="show">鞋子</span>
    <span>袜子</span>
    <span>裤子</span>
    <span>裙子</span>
    <span>帽子</span>
</div>

<div class="box">
    <ul>
        <li class="current">鞋子</li>
        <li>袜子</li>
        <li>裤子</li>
        <li>裙子</li>
        <li>帽子</li>
    </ul>
    <span class="show">鞋子</span>
    <span>袜子</span>
    <span>裤子</span>
    <span>裙子</span>
    <span>帽子</span>
</div>



</body>
</html>

访问关系（元素节点 文本节点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问关系</title>
    <style>
        li{
            list-style: none;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 5px;
        }
    </style>
</head>
<body>
<ul>
    <li class="box1"></li>
    <li class="box2"></li>
    <li id="box3"></li>
    <li class="box4"></li>
    <li class="box5"></li>
</ul>
<script>
    //parentnode父盒子
    var box3=document.getElementById("box3");
    box3.parentNode.style.backgroundColor = "blue";

    //兄弟节点（前一个previous，后一个next）
    //previousElementSibling,nextElementSibling IE6、7、8不支持文本节点
    // box3.previousElementSibling.style.backgroundColor = "red";
    // box3.nextElementSibling.style.backgroundColor = "yellow";

    //兼容性
    var pre = box3.previousElementSibling || box3.previousSibling;
    var net = box3.nextElementSibling || box3.nextSibling;
    pre.style.backgroundColor="red";
    net.style.backgroundColor="yellow";

    //单个子元素(第一个first，最后一个last)
    // box3.parentNode.firstElementChild.style.backgroundColor = "orange";
    // box3.parentNode.lastElementChild.style.backgroundColor = "green";
    var first= box3.parentNode.firstElementChild || box3.parentNode.firstChild;
    var last= box3.parentNode.lastElementChild || box3.parentNode.lastChild;
    first.style.backgroundColor="orange";
    last.style.backgroundColor="green";

    //所有子元素
    var arr=box3.parentNode.children;
    for(var i=0;i<arr.length;i++){
        arr[i].style.backgroundColor = "black";
    }

    //判断是不是元素节点，arr2[a].nodeType === 1是元素节点
    console.log(box3.parentNode.childNodes);
    var arr2=box3.parentNode.childNodes;
    for(var a = 0;a<arr2.length;a++){
        if(arr2[a].nodeType === 1){
            console.log(arr2[a]);
        }
    }
    

</script>

</body>
</html>

nodeType/nodeValue/nodeName

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nodeType和nodeValue</title>
</head>
<body>
    <div id="box" value="111">你好</div>

    <script>
        var ele = document.getElementById("box");//元素节点1
        var att = ele.getAttributeNode("id");//属性节点2
        var txt = ele.firstChild;//文本节点3
        //nodeType
        console.log(ele.nodeType);
        console.log(att.nodeType);
        console.log(txt.nodeType);

        //nodeName
        console.log(ele.nodeName); //DIV
        console.log(att.nodeName); //id
        console.log(txt.nodeName); //#text 所有文本节点都叫#text

        //nodeValue
        console.log(ele.nodeValue); //null  元素节点应该是null
        console.log(att.nodeValue); //box
        console.log(txt.nodeValue); //你好
    </script>
</body>
</html>

 案例-隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <style>
        ul{
            width: 1210px;
            margin: 100px auto;
        }
        li{
            height: 34px;
            cursor: pointer;
            list-style: none;
            font: 500 16px/34px "simsun";
        }
    </style>
</head>
<body>
    <ul>
        <li>北京股指  3001.11-22.18 (-0.72%)</li>
        <li>上海股指  3001.11-22.18 (-0.72%)</li>
        <li>广州股指  3001.11-22.18 (-0.72%)</li>
        <li>河南股指  3001.11-22.18 (-0.72%)</li>
        <li>河北股指  3001.11-22.18 (-0.72%)</li>
        <li>新疆股指  3001.11-22.18 (-0.72%)</li>
        <li>辽宁股指  3001.11-22.18 (-0.72%)</li>
        <li>固始股指  3001.11-22.18 (-0.72%)</li>
    </ul>



<script>
    //简单写法
    // var arr = document.getElementsByTagName("li");
    // for(var i=0;i<arr.length;i++){
    //     if(i%2===0){
    //         arr[i].style.backgroundColor = "#ccc";
    //     }
    // }

    
    //复杂版
    var ul = document.getElementsByTagName("ul")[0];
    var arr = ul.childNodes;
    //把元素节点重新放入一个新数组
    var newArr = [];
    for(var i=0;i<arr.length;i++){
        if(arr[i].nodeType===1){
            newArr.push(arr[i]);
        }
    }
    //隔行变色
    for(var i=0;i<newArr.length;i++){
        if(i%2!=0){
            newArr[i].style.backgroundColor = "red";
        }
    }
</script>
</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/zhangkui/p/8487941.html

diaomaofen9228
关注
JavaScript-DOM--:JavaScript DOM编程艺术源代码
03-24
在"JavaScript DOM编程艺术"这本书中，作者深入探讨了如何利用JavaScript有效地操纵DOM以实现动态网页效果。 首先，DOM的核心是将HTML或XML文档解析为一系列可编程的对象。每个HTML元素、属性、文本节点等都有对应...
Javascript-DOM编程艺术研究.docx
11-17
2. **DOM方法**： - **getElementById()**: 这个方法通过指定的ID值找到唯一的元素节点，是定位元素的常用方法。 - **getElementsByTagName()**: 返回一个包含所有指定标签名的元素的NodeList集合，可以用于选取一...
DOM2-document操作
weixin_30512089的博客
04-01 119
document对象操作 目的：找到文档元素后赋给变量，对变量进行操作。 一.找到元素 <div id="a">这是元素111</div> <div class="b">这是元素222</div> <div >这是元素333</div> <input type="button" value="按钮" name...
a标签增加onclick事件提示未定义function
qq_33380252的博客
01-14 1873
后来发现是把这个方法写在$(document).ready(function () {}）里面了 解决方法：第一个办法就是把这个function移出来第二个办法就是改成下面这种形式 window.editServer= function(value){ 　　　　　...... } ...
JavaScript-DOM-属性节点
十二的博客
04-27 2085
JavaScript-DOM-属性节点
JavaScript-DOM练习
weixin_45515107的博客
03-18 4135
1、手风琴，实现页面切换，背景也随着切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
JavaScript-DOM编程
qq_46096136的博客
09-30 7358
那么邮箱地址的正则表达式和邮箱地址进行匹配，能匹配成功，表示合法，反之表示不合法。第三：要能够独立的从网络当中搜索到你想要的正则表达式（搜索能力要有）[a-zA-Z0-9]{3,} 前面这堆中的任意字符至少出现3个。注意：数量永远匹配的都是前面的那个字符出现的次数。\W 匹配任意不是字母，数字，下划线，汉字的字符。[a-z]{1} a到z所有的字符中的任意1个。正则表达式是有一堆特殊的符号组成的一个表达式。[1-9] 没有指定数量的时候，默认是1个。其实在JS中，字符串String也是支持正则表达式的。
react-router-dom v6 使用
weixin_44051815的博客
11-19 2万+
react-router-dom react-router-dom v6 整体体验相对于 v5 ，体验要好更多，最大的一个改变，就是曾经的 Route 不可嵌套，整个路由配置必须拆分成若干小块，除非通过 react-router-config 这种插件，才可以实现对整个路由的管理，然而现在，不需要任何插件就可实现对路由配置的管理。 官网地址: react-router 当前例子，根据分支对应例子：react-router-dom-v6-example v6 与 v5 的区别 当前环境 安装 npm
JavaScript-DOM-事件冒泡
十二的博客
04-28 1167
JavaScript-DOM-事件冒泡
React - router - dom 详解
热门推荐
weixin_57519185的博客
11-17 2万+
React 路由介绍 现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）。 React路由和Vue路由其实没有区别。 前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系 使用 React 路由简单来说就是：配置路径和组件（配对） ...
JavaScript-DOM 学习（含案例源码）
weixin_45515107的博客
05-05 1988
1、DOM概念 文档对象模型（Document Object Model,简称DOM）,是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DPM接口，通过这些DOM接口可以改变网页的内容、结构和样式 1.1、DOM树 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 注意：DOM把
React 路由react-router-dom详解
m0_64875238的博客
04-08 1万+
React 路由react-router-dom详解(路由嵌套+路由传参+路由权限+路由优化 按需导入+404页面)
JavaScript-DOM实战案例
09-18
在JavaScript中，我们可以利用DOM API来创建、删除、修改或者查找这些节点，从而实现对网页内容的动态操作。 在这个"JavaScript-DOM实战案例"中，包含了两个主要的资源部分：`css`和`img`。 1. **CSS（Cascading ...
Javascript-dom-manipulation
05-01
在这个"Javascript-dom-manipulation"主题中，我们将深入探讨如何使用JavaScript有效地进行DOM操作。 1. **获取DOM元素** - `getElementById`: 通过ID查找唯一元素。 - `getElementsByClassName`: 获取指定类名的...
Javascript-DOM
03-26
JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它是一种标准的编程接口，用于HTML和...在`Javascript-DOM-main`这个项目中，可能包含了练习代码和示例，可以帮助你更好地理解和应用DOM相关知识。
vue2面试题5|[2024-11-08]
最新发布
m0_49474690的博客
11-08 300
关于vue2API的面试题
Echarts 折线图
weixin_44443380的博客
11-08 164
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 417
一天10个vue面试题喽！
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 609
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
JavaScript-DOM存储库：深入学习JavaScript中级基础
2. JavaScript-DOM的作用 JavaScript-DOM主要用于动态地创建、修改、添加或删除网页上的元素。例如，通过JavaScript-DOM，开发者可以在用户交互时改变网页的样式，响应用户的输入，或者从服务器动态加载数据并显示在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值