JQUERY操做html--獲取和設置內容、屬性、回調函數

時間 2019-11-10

原文原文鏈接

一：jQuery - 獲取內容和屬性

1.得到內容 - text()、html() 以及 val()javascript

text() - 返回所選元素的文本內容html

html() - 返回所選元素的內容（包括 HTML 標記）java

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1">聖誕快樂，<b>新年快樂</b></p>   //給p元素裏邊的文本一部分加上b標籤
<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內容  結果會包含b標籤
    
        });
});

</script>

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

<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());   結果返回表單元素的value值（nihao）
        
        });

});

</script>

2.獲取屬性 - attr()app

<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>

2、jQuery - 設置內容和屬性

1設置內容和回調函數 - text()、html() 以及 val()函數

text() - 設置所選元素的文本內容spa

html() - 設置所選元素的內容（包括 HTML 標記）code

<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("聖誕快樂，<b>新年快樂</b>") ;        //設置文本
        });
        
    $("#b2").click(function(){    
        
   $("#p1").html("聖誕快樂，<b>新年快樂</b>") ;      //設置html內容  結果會包含b標籤
    
        });
});

</script>

text()、html()回調函數htm

<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(function(){
        
        return "happy new year";         //調用函數，返回一個新的文本
        }
         ) ;        
        });
        
    $("#b2").click(function(){    
        
   $("#p1").text(function(){
        
        return "happy <b>new</b> year";     //調用函數，返回一個新的文本
        }      
    
       );
       });
});

</script>

val() - 設置表單字段的value值和回調函數 blog

<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（）的回調函數

<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.設置屬性 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()裏邊，要加{}號
       });
});

</script>

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":function(){return "http://news.baidu.com/" } } ));  //attr()裏邊，要加{}號
       });
});

</script>