jQuery操作dom节点

野性酷女 2022-06-02 11:55 217阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <body>
    
    <p>你选中什么？？</p>
    <ul>
        <li title="这是乔布斯"><font color="#ff4500">乔布斯</font></li>
        <li title="这是比尔盖茨" class="lc">比尔盖茨</li>
        <li title="这是詹姆斯">詹姆斯</li>
    
    
    
    
    </ul>
    
    <style>
        .lc {
            background-color: red;
    
        }
        .lc2{
            background-color: aqua;
        }
        .lc3{
            font-weight: bold;
        }
    
    
    
    </style>
    
    <script>
    //操作dom节点 //查找dom节点 $(document).ready(function () {
            //1.查找节点 var li2=$("ul li:eq(1)");
            var li2_txt=li2.text();
            console.log(li2_txt);
            //2.创建节点 var li1=$("<li title='这是马化腾'>马化腾</li>");
            var li3=$("<li title='这是李彦宏'>李彦宏</li>");
            var li33=$("ul li:eq(1)");
            $("ul").append(li1);
            li3.insertAfter(li33);
            //3.删除节点 $("ul li:eq(4)").remove();
    
            //操作Dom属性 //获取属性的值 var li5=$("ul li:eq(0)");
            var li5_attr=li5.attr("title");
            console.log("获取属性的某个值:"+li5_attr);
            //设置属性 $("ul li:eq(1)").attr("title","用attr设置属性的值");
            //删除属性 $("ul li:eq(0)").removeAttr("title");
    
            //操作Dom节点的样式 //获取样式 var li6=$("ul li:eq(1)");
            var li6_class=li6.attr("class");
            //alert(li6_class); console.log("$('ul li:eq(1).attr(class)')"+li6_class);
    
            //设置样式 $("ul li:eq(1)").attr("class","lc2");//换样式 //追加样式 $("ul li:eq(1)").addClass("lc3");
    
            //移除样式 $("ul li:eq(1)").removeClass("lc");
    
    
    
    
        })
    
    
    </script>
    
    
    
    </body>
    </html>