码迷,mamicode.com
首页 > Web开发 > 详细

jQuery-文档处理

时间:2017-02-26 00:10:28      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:end   rtb   button   set   put   log   char   返回   cti   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq</title>    
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.x{
color:red;
}
.xx{
color:pink;
}

</style>
</head>
<body>

<script>
$(document).ready(function(){
    $("#but1").click(function(){
        $("p").prepend("<d>前面</d>");
    });//将d元素弄到p中的后面
    $("#but2").click(function(){
        $("p").append("<f>后面</f>")
    });//将f元素弄到p中的后面
    $("#but3").click(function(){
        $("d").prependTo("div");
    });//将d元素弄到div中的前面
    $("#but4").click(function(){
        $("f").appendTo("div");
    });//将q元素弄到div中的后面    
    $("#but5").click(function(){
        $("p").before("<z>前面</z>");
    });//将s元素弄到p的前面    
    $("#but6").click(function(){
        $("p").after("<x>后面</x>");
    });//将s元素弄到p的后面
    $("#but7").click(function(){
        $("z").insertBefore("div");
    });//设置所有 p 元素的内容
    $("#but8").click(function(){
        $("x").insertAfter("div");
    });//返回p元素的文本内容。

    
});










</script>
        <input id="but1" type="button" value="里面的前面">
        <input id="but2" type="button" value="里面的后面">
        <input id="but3" type="button" value="更改前位置">
        <input id="but4" type="button" value="更改后位置">
        
        <input id="but5" type="button" value="外面的前面">
        <input id="but6" type="button" value="外面的后面">    
        <input id="but7" type="button" value="更改外前位置">
        <input id="but8" type="button" value="更改外后位置">

        <br />
        <div>xxx</div>
        <br />
        <p>yyy</p>

        
        
</body>
</html>

 

jQuery-文档处理

标签:end   rtb   button   set   put   log   char   返回   cti   

原文地址:http://www.cnblogs.com/yjh1604600160/p/x12.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!