jQuery —— DOM属性,值及内容操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            // 设置属性
            $("input").eq(0).click(function () {
                $(this).attr("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 () {
                $("#txt").val("动态设置的值");
            });
            // 获取值
            $("input").eq(4).click(function () {
                console.log($("#txt").val());
            });
            // 设置html内容
            $("input").eq(5).click(function () {
                $("div").html("<P>我是html内容</P>");
            });
            // 获取html内容
            $("input").eq(6).click(function () {
                console.log($("div").html());
            });
            // 设置文本内容
            $("input").eq(7).click(function () {
                $("div").text("动态创建文本内容");
            });
            // 获取文本内容
            $("input").eq(8).click(function () {
                console.log($("div").text());
            });

        })
    </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内容">
<input type="button" value="获取text内容">
<div>
    <input type="text" id="txt">
</div>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容