Python学习第88天（jQuery的文档处理、模态对话框）

下面是jQuery的文档处理方式，同时以及几个练习题。

一、创建一个标签对象

$("") 　　等同于JavaScript中的doucoment.creatElement，后面可直接跟内容进行创建

二、内部插入

$("").append(content|fn) ----->$("p").append("Hello");　　$（“”）的下面子集后面加入"Hello"这部分内容

　　$("").appendTo(content) ----->$("p").appendTo("div");　　　　　　与上面的正好相反

$("").prepend(content|fn) ----->$("p").prepend("Hello"); 与上面两个相同，之前加在了所应用的前面

　　$("").prependTo(content) ----->$("p").prependTo("#foo");

三、外部插入

$("").after(content|fn) ----->$("p").after("Hello");　　　　直接加在被调用标签的后面

$("").before(content|fn) ----->$("p").before("Hello"); 直接加在被调用标签的前面

　　$("").insertAfter(content) ----->$("p").insertAfter("#foo");　　　　调用方向这号反过来

　　$("").insertBefore(content) ----->$("p").insertBefore("#foo");

四、替换

$("").replaceWith(content|fn) ----->$("p").replaceWith("Paragraph. ");

五、删除

　　$("").empty() 都是删除标签内容，empty只是清楚文本内容

　　$("").remove([expr])　　　　　连同标签全部删掉

六、复制

　　$("").clone([Even[,deepEven]])

clone复制样式条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
            <div class="outer">
                <div class="item">
                        <input type="button" value="+" onclick="add(this);">
                        <input type="text">
                </div>
            </div>

<script src="jquery-1.11.3.min.js"></script>
    <script>
            //var $clone_obj=$(self).parent().clone();  // $clone_obj放在这个位置可以吗?
            function add(self){
                // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
                 var $clone_obj=$(self).parent().clone();
                 $clone_obj.children(":button").val("-").attr("onclick","removed(this)");
                 $(self).parent().parent().append($clone_obj);
            }
           function removed(self){
               $(self).parent().remove()
           }
    </script>
</body>
</html>

习题练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1">
    <p>PPP</p>
</div>
<button>add</button>
<script src="jquery-3.1.1.js"></script>
<script>
        $("button").click(function () {
           //$(".c1").append("<h1>HELLO YUAN</h1>")

            var $ele=$("<h1></h1>");
            $ele.html("HELLO WORLD!");
            $ele.css("color","red");

//内部插入
            //$(".c1").append($ele);
            //$ele.appendTo(".c1")
            //$(".c1").prepend($ele);
            //$ele.prependTo(".c1")

//外部插入
            //$(".c1").after($ele)
            //$ele.insertAfter(".c1")
            //$(".c1").before($ele)
            //$ele.insertBefore(".c1")
//替换
             //$("p").replaceWith($ele)

//删除与清空
            //$(".c1").empty()
            //$(".c1").remove()

//clone
//             var $ele2= $(".c1").clone();
//             $(".c1").after($ele2)
        })
</script>
</body>
</html>

Python学习第88天（jQuery的文档处理、模态对话框）

猜你喜欢