目录

1.查找节点

2.创建节点

3.插入节点

4.案例一

4.删除元素

5.复制节点

6.替换节点

7.包裹节点

8.HTML代码/文本/值

9.样式操作

10.CSS-DOM操作

1.查找节点

  • 查找属性节点: 通过 jQuery 选择器完成

  • 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值

  • 操作文本节点:通过 text() 方法

2.创建节点

  • 使用 jQuery 的工厂函数 ​(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回

  • 注意

    • 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中

    • 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 或​(“<p></p>”), 但不能使用 或​(“<P>”)

  • 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

3.插入节点

  • 以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动

        <p>你喜欢哪个城市?</p>
        <ul id="city">
            <li id="bj">北京</li>
            <li id="sh">上海</li>
            <li id="dj">东京</li>
            <li id="se">首尔</li>
        </ul>
        <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
          $(function(){
            <!-- 将太原的节点插入到city标签内部的结尾处 -->
            $("<li id='ty'>太原</li>").appendTo($("#city"));  
            <!-- $("#city").append("<li id='ty'>太原</li>"); -->
              
            <!-- 将成都的节点插入到city标签内部的开始处 -->
            $("<li id='cd'>成都</li>").appendTo($("#city"));  
            <!-- $("#city").prepend("<li id='cd'>成都</li>"); -->
          }
        </script>

4.案例一

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        
        //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; 
        //     检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
        //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 
    
        //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. 
        
        $(function(){
            <!-- 弹出对应标签的文本内容 -->
            function showContent(li){
                alert($(li).text());
            }
            
            <!-- 给现有的li标签赋onclick事件 -->
            $("li").click(function(){
                showContent(this);
            })
​
            $(function(){
                $(":submit").click(function () {
                    <!-- 检查是否选择type -->
                    var $type=$(":radio[name='type']:checked");
                    if($type.length==0){
                        alert("请选择类型");
                        return false;
                    }
                    <!-- 检查是否有输入(去除前后空格) -->
                    var text=$(":text").val();
                    text=$.trim(text);
                    if(text==""){
                        alert("请输入内容");
                        return false;
                    }
                    <!-- 在相应的 ul 节点中添加对应的 li 节点,并添加click事件 -->
                    $("<li>"+text+"</li>").appendTo("#"+$type.val()).click(function(){showContent(this)});
                    return false;
                })
​
            })
        })  
    </script>
</head>
<body>
​
    <p>你喜欢哪个城市?</p>
    
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
        
        <br><br>
        <p>你喜欢哪款单机游戏?</p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>
        
        <br><br>
        
        <form action="ex-3.html" name="myform">
            
            <input type="radio" name="type" value="city">城市
            <input type="radio" name="type" value="game">游戏
        
            name: <input type="text" name="name"/>
        
            <input type="submit" value="Submit" id="submit"/>
            
        </form>
</body>

4.删除元素

<!-- 删除bj节点及其所有子节点 -->
$("bj").remove();
<!-- 删除city节点的所有子节点,city节点不会被删除  -->
$("#city li").empty();
​
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

5.复制节点

6.替换节点

        <p>你喜欢哪个城市?</p>
        <ul id="city">
            <li id="bj" name="BeiJing">北京</li>
            <li>上海</li>
            <li id="dj">东京</li>
            <li id="se">首尔</li>
        </ul>
        
        <br><br>
        <p>你喜欢哪款单机游戏?</p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>
​
​
        <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            <!-- 替换北京节点和红警节点
                    注意:replaceWith , replaceAll有移动节点的功能,节点互换需要先克隆节点 
             -->
            $(function(){
                <!-- 复制北京节点 -->
                var $bj=$("#bj").clone(true);
                <!-- 将红警节点替换为北京节点,返回红警节点 -->
                var $rl=$("#rl").replaceWith($bj);
                <!-- 将北京节点替换为红警节点 -->
                $("#bj").replaceWith($rl);
            })
        </script>

7.包裹节点

8.HTML代码/文本/值

9.样式操作

10.CSS-DOM操作

 

10-07 17:19