JQUERY操作html--獲取和設(shè)置內(nèi)容、屬性、回調(diào)函數(shù)

2019-9-25    seo達(dá)人

一：jQuery - 獲取內(nèi)容和屬性

1.獲得內(nèi)容 - text()、html() 以及 val()

      text() - 返回所選元素的文本內(nèi)容

      html() - 返回所選元素的內(nèi)容（包括 HTML 標(biāo)記） 

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1">圣誕快樂(lè)，<b>新年快樂(lè)</b></p>   //給p元素里邊的文本一部分加上b標(biāo)簽
<button id="b1">顯示文本</button>
<button id="b2">顯示html</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {

    $("#b1").click(function(){        
    alert(  $("#p1").text() );        //獲取文本
        });

    $("#b2").click(function(){        
    alert(  $("#p1").html()  );      //獲取html內(nèi)容  結(jié)果會(huì)包含b標(biāo)簽

        });
}); </script>

         val() - 返回表單字段的value值 

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip" value="nihao">
<button id="but">顯示value值</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    $("#but").click(function(){
        alert($("#ip").val());   結(jié)果返回表單元素的value值（nihao）

        });

}); </script>

 

2.獲取屬性 - attr() 

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com"></a>
<button id="but">顯示元素屬性</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
   $("#but").click(function(){
       alert($("#aa").attr("href"));
       });
}); </script>

 

 

二、jQuery - 設(shè)置內(nèi)容和屬性

1設(shè)置內(nèi)容和回調(diào)函數(shù) - text()、html() 以及 val()

         text() - 設(shè)置所選元素的文本內(nèi)容

         html() - 設(shè)置所選元素的內(nèi)容（包括 HTML 標(biāo)記） 

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1"></p>
<button id="b1">顯示文本</button>
<button id="b2">顯示html</button>

</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {

    $("#b1").click(function(){   

    $("#p1").text("圣誕快樂(lè)，<b>新年快樂(lè)</b>") ; //設(shè)置文本  });

    $("#b2").click(function(){    

   $("#p1").html("圣誕快樂(lè)，<b>新年快樂(lè)</b>") ; //設(shè)置html內(nèi)容  結(jié)果會(huì)包含b標(biāo)簽  });
}); </script>

 text()、html()回調(diào)函數(shù) 

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1">新年快樂(lè)</p>
<button id="b1">顯示文本</button>
<button id="b2">顯示html</button>

</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {

    $("#b1").click(function(){   

    $("#p1").text(function(){ return "happy new year";         //調(diào)用函數(shù)，返回一個(gè)新的文本
        }
         ) ;        
        });

    $("#b2").click(function(){    

   $("#p1").text(function(){ return "happy <b>new</b> year";     //調(diào)用函數(shù)，返回一個(gè)新的文本
        }      

       );
       });
}); </script>

     val() - 設(shè)置表單字段的value值和回調(diào)函數(shù) 

  

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip">
<button id="but">顯示value值</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    $("#but").click(function(){
        $("#ip").val("happy"); 

        });

}); </script>

val（）的回調(diào)函數(shù) 

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip">
<button id="but">顯示value值</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    $("#but").click(function(){
        $("#ip").val(function(){ return "happay";
            }); 

        });

}); </script>

 

2.設(shè)置屬性  attr（） 

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com">11111</a>
<button id="but">顯示元素屬性</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
   $("#but").click(function(){
       alert($("#aa").attr( {  "href":"http://news.baidu.com/"  } ));  //attr()里邊，要加{}號(hào)  });
}); </script>

 attr（）的回調(diào)函數(shù) 

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com"></a>
<button id="but">顯示元素屬性</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
   $("#but").click(function(){
       alert($("#aa").attr({  "href":function(){return "http://news.baidu.com/" } } )); //attr()里邊，要加{}號(hào)  }); 
    

        }); </script>
    


    

        藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

分享本文至：

日歷

鏈接

個(gè)人資料

存檔