日度归档:2021年2月22日

jquery如何删除html中的元素呢?


摘要:
下文使用jquery删除html中的元素的方法分享,如下所示:

实现思路:
    使用jquery的remove()
	 或
	 empty() 
	 方法即删除相应的元素

注意事项:
    empty方法只会清除指定元素中的内容

例:
jquery 删除元素的示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>maomao365.com-删除html页面中元素的示例</title> 
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script> 

 <style>
     div{
       margin:10px;
	   height:60px;
	   width:130px;
	   color:white;
	   background-color:green;
      } 

</style>

<script>
$(document).ready(function(){
  
  $("#btn1").click(function(){
    $("#div1").remove();
    }); 

  $("#btn2").click(function(){
    $("#div2").empty();
    });
 });
</script>

    </head>
    <body>

	<p>
 maomao365.com <br />
 jquery 删除html页面中元素的示例分享
	</p>
	<hr />
        <div id="div1">
            我是DIV1
        </div>
        <br>
        <div id="div2">
             我是DIV2
        </div>
        <button id="btn1">remove删除方法</button>
        <button id="btn2">empty清除内容</button>
    </body>
</html>
jquery删除html中元素的示例分享

jquery删除html中元素的示例分享

jquery如何向html中添加元素呢?


摘要:
下文使用jquery向html中添加元素的方法分享,如下所示:

实现思路:
    使用jquery的append()
	 prepend()
	 before()
	 after()
	 方法即可向指定元素的指定位置上
	 添加html信息

例:
jquery 向元素中添加html信息的示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>maomao365.com-向html页面添加内容的示例</title> 
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script> 

 <style>
     div{
       margin:10px;
      }
</style>

<script>
$(document).ready(function(){
 
  $("#btn1").click(function(){
    $("#p1").append(" new");
    });
 
  $("#btn2").click(function(){
    $("#p2").prepend("new ");
    });
 
    $("#btn3").click(function(){
    $("#p3").before("new ");
    });
    
    $("#btn4").click(function(){
    $("#p4").after("new ");
    });
 
});
</script>

    </head>
    <body>

	<p>
 maomao365.com <br />
 jquery 向html页面添加内容的示例分享
	</p>
	<hr />
         <p id="p1">maomao365.com</p>
        <button id="btn1">后面添加内容</button>

        <p id="p2">maomao365.com</p>
        <button id="btn2">前面添加内容</button>
         
        <p id="p3">maomao365.com</p>
        <button id="btn3">后面添加内容</button>
        <p id="p4">maomao365.com</p>
         
        <button id="btn4">前面添加内容</button>
    </body>
</html>
jquery向html中添加元素的四种方法分享

jquery向html中添加元素的四种方法分享

jquery如何html标签元素中的内容呢?


摘要:
下文使用jquery设置元素中内容的方法分享,如下所示:

实现思路:
    使用jquery的text("内容")
	即可设置元素中内容

例:
jquery 设置元素中内容的示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>maomao365.com-修改html标签元素的示例</title> 
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script> 

 <style>
     div{
       margin:10px;
      }
       #flipshow,#content,#fliphide,#fliptoogle{
            padding:5px;
            background-color:blue;
			color:white;
            text-align: center;
            border:1px solid green;
        }
        #content  {
            padding:50px;
            display:none ;
        }
</style>

<script>
$(document).ready(function(){
    $("#btn1").click(function() {
        $("#p1").text("我是点击后的内容");
         
  });
});
</script>

    </head>
    <body>

	<p>
 maomao365.com <br />
 jquery 设置元素内容的示例分享
	</p>
	<hr />
         <p id="p1">原文本内容</p>
        <button id="btn1">修改内容--点我</button>
    </body>
</html>
jquery修改元素中内容的示例分享

jquery修改元素中内容的示例分享