HTML操作 CSS操作 AJAX和jQuery
使用 $(selector).load(url) 来改变 HTML 内容。
使用 $.ajax(options) 来改变 HTML 内容
jQuery：1.3.1,改变HTML元素内容 |
<html> <head> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").html("W3School"); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">请点击这里</button> </body> </html> jQuery：1.3.2，向HTML元素追加内容 |
<html> <head> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").append(" <b>W3School</b>."); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">请点击这里</button> </body> </html> jQuery：1.3.3,在HTML元素之后追加内容 |
<html> <head> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").after(" W3School."); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">请点击这里</button> </body> </html> jQuery：1.4.1,改变HTML元素的CSS属性 |
<html> <head> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").html("W3School"); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">请点击这里</button> </body> </html> jQuery：1.4.2，改变多个CSS属性 |
<html> <head> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color":"red","font-size":"200%"}); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html> jQuery：1.4.3,获得元素的CSS属性 |
<html> <head> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").click(function(){ $("#result").html($(this).css("background-color")); }); }); </script> </head> <body> <div style="width:100px;height:100px; background:#ff0000"></div> <p id="result">Click in the box</p> </body> </html> jQuery：1.5.1，使用 $(selector).load(url) 来改变 HTML 内 |
<html> <head> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b01").click(function(){ $('#myDiv').load('jquery/test1.txt'); }); }); </script> </head> <body> <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div> <button id="b01" type="button">改变内容</button> </body> </html> jQuery：1.5.2,使用 $.ajax(options) 来改变 HTML 内容 |
<html> <head> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"jquery/test1.txt",async:false}); $("#myDiv").html(htmlobj.responseText); }); }); </script> </head> <body> <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div> <button id="b01" type="button">改变内容</button> </body> </html>
