jQuery-对标签元素 文本操作-属性操作-文档的操作

一、对标签元素文本操作

1.1 对标签中内容的操作

// js
var div1 = document.getElementById("div1");
div1.innerText
div1.innerHTML


//jQuery
var $div1 = $("#div1");
$div1.text()
$div1.html()
<!DOCTYPE html>
<html>
<head>
    <title>文本操作</title>
</head>
<body>
    <div id="div1">
        <p>
            我是div1下的p段落
        </p>
    </div>

    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 1.文本的获取
        var div1 = document.getElementById("div1");
        console.log(div1.innerText);
        console.log(div1.innerHTML);

        var $div1 = $("#div1");
        console.log($div1.text());
        console.log($div1.html());
        // 2.给元素赋值一个文本   会覆盖原来的标签和内容
        div1.innerText = "哈哈";
        console.log(div1.innerText);
        div1.innerHTML="<span>哈哈</span>"
        console.log(div1.innerHTML);

        $div1.text("呵呵")
        console.log(div1.innerText);
        $div1.html("<span>呵呵</span>")
        console.log(div1.innerHTML);

    </script>
</body>
</html>
操作文本的demo

1.2 对表单文本值的操作

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置checkbox、select的值
<!DOCTYPE html>
<html>
<head>
    <title>表单文本值的操作</title>
</head>
<body>
    <form>
        用户名:<input type="text" name="" id="i1" value="hah ">
        密码:<input type="password" name="">
        <input type="radio" name="gender" value="male" checked="checked">男
        <input type="radio" name="gender" value="female">女
        <input type="checkbox" name="hobby" value="basket" checked="checked">篮球
        <input type="checkbox" name="hobby" value="foot" checked="checked">足球
        <input type="checkbox" name="hobby" value="doublecolorball">双色球
        <select multiple id="#s1">
            <option>1</option>
            <option selected="selected">2</option>
            <option selected="selected">3</option>
            <option>4</option>
        </select>

    </form>

    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        console.log($("input[name='gender']"));
        console.log($("input[name='gender']").val());
        console.log($("#i1").val());

        // 获取多选的值    只会返回第一个选中的元素
        console.log($("input[name='hobby']:checked").val());


        // 获取多个select值
        console.log($("#s1").val());
    </script>
</body>
</html>
对表单值的操作

二、对标签元素属性操作

用于id和自定义属性:

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>标签属性的操作</title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div class="div1">
        
    </div>
    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 1.获取元素的属性值
        console.log($(".div1").attr("class"));  //div1
        // 2.为元素设置一个属性值
        $(".div1").attr("name","div1Style")
        console.log($(".div1").attr("name"));  // div1Style
        // 3.设置多个属性值
        $(".div1").attr({"k1":"v1","k2":"v2"})
        console.log($(".div1").attr("k1"));
        console.log($(".div1").attr("k2"));
        // 4.删除一个属性
        $(".div1").removeAttr("k2");
        console.log($(".div1").attr("k2")); // undefined

    </script>
</body>
</html>
用于id等属性的操作

用于radio和checkbox:

prop() // 获取属性
removeProp() // 移除属性

示例：

<!DOCTYPE html>
<html>
<head>
    <title>标签属性的操作</title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div class="div1">
        
    </div>

    <form>
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
        <input type="checkbox" name="hobby" value="basket">篮球
        <input type="checkbox" name="hobby" value="foot">足球
        
    </form>

    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 1.获取元素的属性值
        console.log($(".div1").attr("class"));  //div1
        // 2.为元素设置一个属性值
        $(".div1").attr("name","div1Style")
        console.log($(".div1").attr("name"));  // div1Style
        // 3.设置多个属性值
        $(".div1").attr({"k1":"v1","k2":"v2"})
        console.log($(".div1").attr("k1"));
        console.log($(".div1").attr("k2"));
        // 4.删除一个属性
        $(".div1").removeAttr("k2");
        console.log($(".div1").attr("k2")); // undefined


        // 对于radio 和 checkbox
        //1.获取一个属性
        console.log($("input[name='gender']").prop("value"));
        console.log($("input[name='hobby']").prop("value"));
        console.log($("input[name='gender']").prop("k1","v1"));
        console.log($("input[name='hobby']").prop("k2","v2"));

        console.log($("input[name='gender']").prop("k1"));
        console.log($("input[name='hobby']").prop("k2"));

        $("input[name='gender']").removeProp("k1")
        $("input[name='hobby']").removeProp("k2")

        console.log($("input[name='gender']").prop("k1"));// undefined
        console.log($("input[name='hobby']").prop("k2"));// undefined
    </script>
</body>
</html>
radio和checkbox的属性操作demo

三、对文档的操作

由于jQuery没有创建标签的方式，只能通过DOM对象进行创建

var div = document.createElement("div")
// $(div) 的方式，将DOM对象转化为jQuery对象

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

 移除和清空节点

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
<!DOCTYPE html>
<html>
<head>
    <title>文档的操作</title>
</head>
<body>

    <div class="div1">
        <ul class="ul1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>


    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 1.添加到指定元素内部的后面
            // 1.首先创建一个元素，jQuery没有创建元素的方法，只能通过DOM对象
            var p = document.createElement("p");
            p.innerText="我是一个段落，要添加到div1的内部所有元素的后面";// $(p).text("xxxx");
            $(".div1").append(p);
            $(".div1").append($(p));
        // 2.添加到指定元素的内部的前面

            var span = document.createElement("span");
            $(span).text("我是一个span，要添加到div1的内部所有元素的前面");
            $(".div1").prepend($(span));

        // 3.添加到指定元素外部的后面
            var div2 = document.createElement("div");
            $(div2).text("我是div2，我放在div1的后面");
            $(div2).attr("class","div2");
            $(".div1").after($(div2));  // div.after 是 div2
            $(div2).insertAfter($(".div1")) // 把div2 插入到 div1的后面
        // 4.添加到指定元素的外部的前面
            var div3 = document.createElement("div");
            $(div3).text("我是div3，我放在div1的前面");
            $(div3).insertBefore($(".div1")); // div3 插入到 div1 的前面
            $(".div1").before($(div3));// div1的前面是div3
        // 5.移除和清空元素
            $(".div2").remove();  // 从DOM中删除所有匹配的元素。  删除div2

             $(".div1").empty($(".ul1")); // 移除div1中的ul  
        // 替换
        // replaceWith() 
            var a = document.createElement("a");
            a.innerText="百度一下";
            $(".ul1").replaceWith($(a))  // 所有的 类名为 ul1的标签都会被a替换
        //replaceAll()
            $(a).replaceAll($(".ul1"));  // 使用a 替换所有的 类名为ul1 的标签



    </script>
</body>
</html>
文档操作demo

克隆(clone)

<!DOCTYPE html>
<html>
<head>
    <title>克隆</title>
</head>
<body>

    <input type="button" name="" id="btn" value="克隆"/>
    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $("#btn").on("click",function() {
            // body...
            $(this).clone(true).insertAfter(this);
        })

    </script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/weihengblog/p/8892407.html