10.jquery DOM操作获取和设置

来源：互联网发布：java中super关键字编辑：程序博客网时间：2024/05/18 20:06
<!DOCTYPE html><html>    <!--        jquery非常重要的部分就是可以更加方便的操作DOM        主要操作包括        获取和设置            获取或者设置内容                text() 设置或返回所选元素的文本内容                html() 设置或返回所选元素的内容（包括 HTML 标记）                val()  设置或返回表单字段的值            获取或者设置属性                attr() 方法用于设置或者获取属性值。设置时候也可以在这三个方法中传入回调函数                回调函数第一个参数表示被选元素列表中当前元素的下标，第二个参数表示原始值            ！！！获取时参数为空，设置时候参数为对应的值即可，        添加            append() - 在被选元素的结尾插入内容            prepend() - 在被选元素的开头插入内容            after() - 在被选元素之后插入内容            before() - 在被选元素之前插入内容        删除            remove() - 删除被选元素（及其子元素）            empty() - 从被选元素中删除子元素        操作css            CSS类                addClass() - 向被选元素添加一个或多个类                removeClass() - 从被选元素删除一个或多个类                toggleClass() - 对被选元素进行添加/删除类的切换操作            css方法设置获取css属性                css()设置或者返回css属性    -->    <head>        <meta charset="UTF-8">        <title>jquery DOM操作 获取和设置</title>        <script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $(document).ready(function() {                $("#btn1").click(function() {                    //获取文本内容,获取属性                    alert($("#p1").text() + " id:" + $("p").attr("id"));                });                $("#btn2").click(function() {                    //获取html（包含标记,不包含自身标记）                    alert($("#p1").html());                });                $("#btn3").click(function() {                    //获取表单内容                    alert($("#input1").val());                });                $("#btn4").click(function() {                    //设置设置文本，设置属性                    $("#p2").text("这是段落中的<b>粗体</b>文本。");                    $("#p2").attr("style", "color:red;");                });                $("#btn5").click(function() {                    //设置html                    $("#p3").html("这是段落中的<b>粗体</b>文本。");                });                $("#btn6").click(function() {                    //设置表单内容                    $("#input2").val("zzzz");                });                $("#btn7").click(function() {                    $("#p4").text(function(i, oldText) {                        //回调函数,i表示被选元素的当前下标，oldText表示原始值                        return "old Text:" + oldText + "new TExt: hello world!" + " index:" + i;                    });                });                $("#btn8").click(function() {                    $("#p5").html(function(i, oldText) {                        //回调函数,i表示被选元素的当前下标，oldText表示原始值                        return "old Text:" + oldText + "new TExt: Hello <b>world</b>!" + "  index:" + i;                    });                });            });        </script>    </head>    <body>        <h1>获取内容或者属性</h1>        <p id="p1">这是段落中的<b>粗体</b>文本。</p>        <input type="text" id="input1" value="zzzz" /><br /><br />        <button id="btn1">显示文本,获取属性</button>        <button id="btn2">显示 HTML</button>        <button id="btn3">显示表单值</button>        <hr />        <h1>设置内容或者属性</h1>        <p id="p2">ppppppppp</p>        <p id="p3">ppppppppp</p>        <input type="text" id="input2" value="" /><br /><br />        <button id="btn4">设置文本，设置属性</button>        <button id="btn5">设置 HTML</button>        <button id="btn6">设置表单值</button>        <hr />        <h1>text()、html() 和 val() 的回调函数</h1>        <p id="p4">这是<b>粗体</b>文本。</p>        <p id="p5">这是另一段<b>粗体</b>文本。</p>        <button id="btn7">显示旧/新文本</button>        <button id="btn8">显示旧/新 HTML</button>    </body></html>
0 0
10.jquery DOM操作 获取和设置

10.jquery DOM操作获取和设置
