jQuery操作dom节点-蒲公英云

jQuery操作dom节点

野性酷女 2022-06-02 11:55 426阅读 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>