Hybrid App开发之jQuery操作DOM

前言：

前面学习了JQuery的选择器，今天开始学习新的知识，JQuery操作DOM元素。

元素属性的访问与设置

• attr(name) 获取元素属性
• attr(name,value) 单个属性设置
• attr({key:value,key1:value1,...}) 多个属性设置
• attr(name,function(index))通过函数返回的值修改属性
• removeAttr(name) 删除单个属性值

元素内容的访问与设置

• html() 获取元素的html内容
• html(val) 修改元素的html内容
• text() 获取元素的文本内容
• text(val) 设置元素的文本内容
• val()获取元素的值
• val(value)设置元素的值

元素样式操作

• css(name,value)  修改单个css样式值
• addClass(class1) 增加css样式类别
• toggleClass(class1)类别切换
• removeClass(class1)删除类别

上面几个写个小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">

        #searchText {
            height: 40px;
            width: 200px;
        }

        .searchBtnNormal {
            width: 100px;
            height: 45px;
            margin: 5px;
            background-color: deepskyblue;
            color: white;
            font-size: 16px;
            font-family: 宋体;
            border: 0;
        }

        .searchBtnClick {
            width: 100px;
            height: 45px;
            margin: 5px;
            background-color: blue;
            color: white;
            font-size: 16px;
            font-family: 宋体;
            border: 0;
        }

    </style>
    <script type="text/javascript">

        $(function () {
            $("#searchBtn").click(function () {
                //获取元素属性值
                alert($("#logo_icon").attr("src"));
                //修改元素单个属性值
                $("#logo_icon").attr("width", "135px");
                //修改元素多个属性值
                $("#logo_icon").attr({"width": "135px", "height": "80px"});
                //通过function修改元素属性值
                $("#logo_icon").attr("src", function () {
                    return 'http://www.hao123.com/redian/images/logo_new.gif';
                });
                //删除某个元素的属性值
                $("#logo_icon").removeAttr("width");
                //获取元素的html值
                var html = $("#bottomDiv").html();
                alert(html);
                //修改html元素的值
//                $("#bottomDiv").html(html + "<p>输入你要搜索的内容</p>");
                alert($("#bottomDiv>h3").text());
                $("#bottomDiv>h3").text('百度搜索天下无敌');
                alert($("#searchText").val());
                $("#searchText").val("");
                $("#searchBtn").toggleClass("searchBtnClick");
            });
        });

    </script>
</head>
<body>
<div>

    <div align="center">
        <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"
             width="270px" height="179px" id="logo_icon">
    </div>
    <div align="center" id="bottomDiv">
        <h3>百度搜索</h3>
        <input type="text" name="search" value="" id="searchText" align="center">
        <input type="button" name="search_btn" value="百度一下" id="searchBtn" class="searchBtnNormal">
    </div>
</div>

</body>
</html>

节点元素操作

• 创建节点元素
• 插入节点
• 复制节点
• 删除节点
• 替换节点
• 包裹节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        .bandDiv {
            float: left;
            font-size: 15px;
        }

    </style>
    <script type="text/javascript">
        $(function () {
            $("h5").click(function () {
                var $jdDiv = "<div class='bandDiv' id='jd'><img src='https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95541.png' alt='品牌'>京东</div>";
                //向所选择的元素中插入元素
                $("#contentDiv").append($jdDiv);
                //将选中元素中插入到目标元素
//                $($jdDiv).appendTo("#contentDiv");
                var $tbDiv = "<div class='bandDiv' id='tb'><img src='https://ss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/icon/10062.png' alt='品牌'>淘宝</div>";
                //向所选择的元素中最前面插入元素
                $("#contentDiv").prepend($tbDiv);
                //将选中元素中插入到目标元素最前面
//                $($tbDiv).prependTo("#contentDiv");
                var $nmDiv = "<div class='bandDiv' id='nm'><img src='https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/icon/9483.png' alt='品牌'>糯米</div>";
                //向所选择的元素外部后面插入元素
                $("#tb").after($nmDiv);
                var $ddDiv = "<div class='bandDiv' id='dd'><img src='https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95517.png' alt='品牌'>当当</div>";
                //向所选择的元素外部前面插入元素
                $("#tb").before($ddDiv);
                //每个被选元素后面插入一个已有元素
                $("#tb").insertBefore($("#jd"));
                // 每个被选元素前面插入一个已有元素
                $("#nm").insertAfter($("#tb"));
                //复制节点
                var $vp = $("#tb").clone(true).attr({"id": "vp"});
                $("#nm").before($vp);
                $("#vp >img").attr("src", "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95693.png");
                //替换节点
                $("#vp").replaceWith("<div class='bandDiv' id='vp'><img src='https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95517.png' alt='品牌'>唯品会</div>");
                //所有选择的元素用加粗包裹起来
                $("#contentDiv >div").wrap("<b></b>");
                //遍历元素
                $("#vp").each(function () {
                    $("#vp >img").attr("src", "https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/icon/93289.png");
                });
                //删除节点
                $("#nm").remove();
            });

        });

    </script>
</head>
<body>

<div>
    <h5>动态添加元素</h5>

    <div id="contentDiv">

    </div>
</div>

</body>
</html>

总结：

今天简单学习使用了一下JQuery操作DOM元素的一些语法。