标签归档：jquery技巧

jquery如何为一个html元素添加相应的属性呢?


摘要:
下文使用jquery为html元素添加相应属性的方法分享，如下所示:
 

实现思路:
    使用jquery的css()
	即可为元素添加相应的属性

例:
jquery 为html元素添加css属性的示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>maomao365.com-html元素添加css属性的示例</title> 
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script> 

 <style>
    
</style>

<script>
$(document).ready(function(){
   $("div").css({
     width:"100px",
     height:"100px",
     backgroundColor:"blue",
	 color:"white"
    });
      
 });
</script>

    </head>
    <body>

	<p>
 maomao365.com <br />
 jquery 为html元素添加css属性的示例分享
	</p>
	<hr />
        <div  >
            我的样式来源于jquery
        </div> 
    </body>
</html>

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中添加元素的四种方法分享