jQuery操作dom节点

最新推荐文章于 2022-05-04 01:42:04 发布

ruiguang21

最新推荐文章于 2022-05-04 01:42:04 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery javascript

本文链接：https://blog.youkuaiyun.com/ruiguang21/article/details/79043906

jquery 同时被 2 个专栏收录

23 篇文章

订阅专栏

javascript

18 篇文章

订阅专栏

本文介绍了一个使用 jQuery 进行 DOM 操作的例子，包括创建、查找、删除节点及操作属性和样式的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>