jQuery操作属性，CSS类,HTML代码，文本，值

最新推荐文章于 2022-08-13 08:43:46 发布

原创最新推荐文章于 2022-08-13 08:43:46 发布 · 2.1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery操作HTML与CSS

web前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍jQuery库中关于DOM操作的方法，包括属性的获取与设置、CSS类的添加与移除、HTML内容的读写等。此外，还展示了文档处理技巧，如元素的插入、替换与删除，以及如何通过jQuery实现页面元素的定位。

属性
attr 取/设值
removeAttr 移除属性
prop 类似attr
removeProp
prop与attr的区别：attr用于取自己定义属性，prop取固有属性。

CSS 类
addClass
removeClass

HTML
html 按标签渲染
text 纯文本
val 取固有value属性对应的值

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见

<input type="text" value="123">
<div value="456"></div>

<div id="id1">
    uuuuu
    <p>ppppp</p>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
   console.log($("div").hasClass("div11"));
   console.log($("div").attr("con"));
   console.log($("div").attr("con","c2"));

   console.log($(":checkbox:first").attr("checked"));
   console.log($(":checkbox:last").attr("checked");

   console.log($(":checkbox:first").prop("checked"));
   console.log($(":checkbox:last").prop("checked"));

   console.log($("div").prop("con"));
   console.log($("div").prop("class"));

   console.log($("#id1").html());
   console.log($("#id1").text());
    console.log($("#id1").html("<h1>YUAN</h1>"));
    console.log($("#id1").text("<h1>YUAN</h1>"));

    // 固有属性
   console.log($(":text").val());
   console.log($(":text").next().val());
   $(":text").val("789");

    $("div").css({"color":"red","background-color":"green"})


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

文档处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div class="c1">
    <p>PPP</p>

</div>

<button>add</button>
<script src="jquery-3.1.1.js"></script>
<script>
        $("button").click(function () {
           $(".c1").append("<h1>HELLO YUAN</h1>")

            var $ele=$("<h1></h1>");
            $ele.html("HELLO WORLD!");
            $ele.css("color","red");

//内部插入
            $(".c1").append($ele);
            $ele.appendTo(".c1")
            $(".c1").prepend($ele);
            $ele.prependTo(".c1")

//外部插入
            $(".c1").after($ele)
            $ele.insertAfter(".c1")
            $(".c1").before($ele)
            $ele.insertBefore(".c1")
//替换
             $("p").replaceWith($ele)

//删除与清空
            $(".c1").empty()
            $(".c1").remove()

//clone   克隆
            var $ele2= $(".c1").clone();
            $(".c1").after($ele2)
        })
</script>
</body>
</html>

jQuery实现定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .div1,.div2{
            width: 200px;
            height: 100px;
        }
        .div1{
            border: 5px solid rebeccapurple;
            padding: 20px;
            margin: 2px;
            background-color: antiquewhite;
        }
        .div2{
            background-color: rebeccapurple;
        }

        /*.outer{*/
            /*position: relative;*/
        /*}*/
    </style>
</head>
<body>

<div class="div1"></div>

<div class="outer">
<div class="div2"></div>
</div>

<script src="jquery-3.1.1.js"></script>
<script>
    // offset()相对于视口的偏移量
    console.log($(".div1").offset().top);
    console.log($(".div1").offset().left);

    console.log($(".div2").offset().top);
    console.log($(".div2").offset().left);

    //position()：相对于已经定位的父标签的偏移量

    console.log($(".div1").position().top);
    console.log($(".div1").position().left);

    console.log($(".div2").position().top);
    console.log($(".div2").position().left);
    console.log($(".div1").height("300px"));
    console.log($(".div1").innerHeight());
    console.log($(".div1").outerHeight());
    console.log($(".div1").outerHeight(true));

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

jQuery实现循环的两种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>1111</p>
<p>2222</p>
<p>3333</p>

<script src="jquery-3.1.1.js"></script>

<script>
    arr=[11,22,33];

//    for (var i=0;i<arr.length;i++){
//        $("p").eq(i).html(arr[i])
//
//    }

//方式一
    $.each(arr,function (x,y) {
        console.log(x);
        console.log(y);
    });
//方式二
    $("p").each(function () {
        console.log($(this));
        $(this).html("hello")
    })

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