02jquery02-07常用DOM操作

最新推荐文章于 2024-11-14 10:39:07 发布

原创最新推荐文章于 2024-11-14 10:39:07 发布 · 347 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

02jquery

本文通过一个具体的示例展示了如何使用jQuery进行DOM的操作，包括设置和获取元素属性、修改元素的内容等。具体操作涉及到了设置属性、获取属性、移除属性、设置元素值、获取元素值、设置HTML内容、获取HTML内容及设置文本内容。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            //设置属性
            $("input:eq(0)").click(function () {
                $(this).attr("title","我是动态设置的title");
            });
            //获取属性
            $("input:eq(1)").click(function () {
                var attr = $("input:eq(0)").attr("title");
                console.log(attr);
            });
            //移除属性
            $("input:eq(2)").click(function () {
                $("input:eq(0)").removeAttr("title");
            });
            //设置值
            $("input:eq(3)").click(function () {
                $("div input").val("我是动态设置的值2");
            });
            //获取值
            $("input:eq(4)").click(function () {
                var attr = $("div input").val();
                console.log(attr);
            });
            //设置html内容
            $("input:eq(5)").click(function () {
                $("div").html("<h1>我是html内容</h1>");
            });
            //获取html内容
            $("input:eq(6)").click(function () {
                var val = $("div").html();
                console.log(val);
            });
            //设置text文本内容
            $("input:eq(7)").click(function () {
                $("div").text("<h1>我是html内容</h1>");
            });
        });
    </script>
</head>
<body>
<input type="button" value="设置属性"/>
<input type="button" value="获取属性"/>
<input type="button" value="移除属性"/>
<input type="button" value="设置值"/>
<input type="button" value="获取值"/>
<input type="button" value="设置html内容"/>
<input type="button" value="获取html内容"/>
<input type="button" value="设置文本text内容"/>
<div>
    <input type="text"/>
</div>
</body>
</html>