JQuery常用基础语法（描述篇幅短）（第3季）
1、028
<title>remove() 方法删除被选元素及其子元素</title><script>$(document).ready(function() {$("button").click(function() {$("#div1").remove();});});</script></head><body><div id="div1"style="height: 100px; width: 300px; border: 1px solid black; background-color: yellow;">This is some text in the div.<p>This is a paragraph in the div.</p><p>This is another paragraph in the div.</p></div><br><button>删除 div 元素</button></body></html>?2、029
<title>empty() 方法删除被选元素的子元素</title><script>$(document).ready(function() {$("button").click(function() {$("#div1").empty();});});</script></head><body><div id="div1"style="height: 100px; width: 300px; border: 1px solid black; background-color: yellow;">This is some text in the div.<p>This is a paragraph in the div.</p><p>This is another paragraph in the div.</p></div><br><button>清空 div 元素</button></body></html>?3、030
<title>过滤被删除的元素</title><script>$(document).ready(function() {$("button").click(function() {$("p").remove(".italic");});});</script></head><body><p>This is a paragraph in the div.</p><p 的所有 p 元素</button></body></html>?4、031
<title>addClass() 方法</title><script>$(document).ready(function() {$("button").click(function() {$("h1,h2,p").addClass("blue");$("div").addClass("important");});});</script><style type="text/css">.important {font-weight: bold;font-size: xx-large;}.blue {color: blue;}</style></head><body><h1>标题 1</h1><h2>标题 2</h2><p>这是一个段落。</p><p>这是另一个段落。</p><div>这是非常重要的文本！</div><br><button>向元素添加类</button></body></html>?5、032
<title>addClass() 方法</title><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").addClass("important blue"); });});</script><style type="text/css">.important {font-weight: bold;font-size: xx-large;}.blue {color: blue;}</style></head><body><div id="div1">这是一些文本。</div><div id="div2">这是一些文本。</div><br><button>向第一个 div 元素添加类</button></body></html>?6、033
<title>removeClass() 方法</title><script>$(document).ready(function() {$("button").click(function() {$("h1,h2,p").removeClass("blue");});});</script><style type="text/css">.important {font-weight: bold;font-size: xx-large;}.blue {color: blue;}</style></head><body><h1 name="code"><title>toggleClass() 方法</title><script>$(document).ready(function() {$("button").click(function() {$("h1,h2,p").toggleClass("blue");});});</script><style type="text/css">.blue {color: blue;}</style></head><body><h1>标题 1</h1><h2>标题 2</h2><p>这是一个段落。</p><p>这是另一个段落。</p><button>切换 CSS 类</button></body></html>?8、035
<title>css() 方法</title><script>$(document).ready(function() {$("button").click(function() {alert("Background color = " + $("p").css("background-color"));});});</script></head><body><h2>这是标题</h2><p style="background-color: #ff0000">这是一个段落。</p><p style="background-color: #00ff00">这是一个段落。</p><p style="background-color: #0000ff">这是一个段落。</p><button>返回 p 元素的背景色</button></body></html>?9、036
<title>设置 CSS 属性</title><script>$(document).ready(function() {$("button").click(function() {$("p").css("background-color", "yellow");});});</script></head><body><h2>这是标题</h2><p style="background-color: #ff0000">这是一个段落。</p><p style="background-color: #00ff00">这是一个段落。</p><p style="background-color: #0000ff">这是一个段落。</p><p>这是一个段落。</p><button>设置 p 元素的背景色</button></body></html>?10、037
<title>设置多个 CSS 属性</title><script>$(document).ready(function() {$("button").click(function() {$("p").css({"background-color" : "yellow","font-size" : "200%"});});});</script></head><body><h2>这是标题</h2><p style="background-color: #ff0000">这是一个段落。</p><p style="background-color: #00ff00">这是一个段落。</p><p style="background-color: #0000ff">这是一个段落。</p><p>这是一个段落。</p><button>为 p 元素设置多个样式</button></body></html>?11、038
<title>width() 和 height() 方法</title><script>$(document).ready(function() {$("button").click(function() {var txt = "";txt += "Width of div: " + $("#div1").width() + "</br>";txt += "Height of div: " + $("#div1").height();$("#div1").html(txt);});});</script></head><body><div id="div1"style="height: 100px; width: 300px; padding: 10px; margin: 3px; border: 1px solid blue; background-color: lightblue;"></div><br><button>显示 div 的尺寸</button><p>width() - 返回元素的宽度。</p><p>height() - 返回元素的高度。</p></body></html>?12、039
<title>width() 和 height() 方法</title><script>$(document).ready(function() {$("button").click(function() {var txt = "";txt += "Width of div: " + $("#div1").width() + "</br>";txt += "Height of div: " + $("#div1").height() + "</br>";txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";txt += "Inner height of div: " + $("#div1").innerHeight();$("#div1").html(txt);});});</script></head><body><div id="div1"style="height: 100px; width: 300px; padding: 10px; margin: 3px; border: 1px solid blue; background-color: lightblue;"></div><br><button>显示 div 的尺寸</button><p>innerWidth() - 返回元素的宽度（包括内边距）。</p><p>innerHeight() - 返回元素的高度（包括内边距）。</p></body></html>?13、040
<title>outerWidth() 和 outerHeight() 方法</title><script>$(document).ready(function() {$("button").click(function() {var txt = "";txt += "Width of div: " + $("#div1").width() + "</br>";txt += "Height of div: " + $("#div1").height() + "</br>";txt += "Outer width of div: " + $("#div1").outerWidth() + "</br>";txt += "Outer height of div: " + $("#div1").outerHeight();$("#div1").html(txt);});});</script></head><body><div id="div1"style="height: 100px; width: 300px; padding: 10px; margin: 3px; border: 1px solid blue; background-color: lightblue;"></div><br><button>显示 div 的尺寸</button><p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p><p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p></body></html>?14、041
<title>outerWidth(true) 方法/outerHeight(true)</title><script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height() + "</br>"; txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true); $("#div1").html(txt); });});</script></head><body><div id="div1"style="height: 100px; width: 300px; padding: 10px; margin: 3px; border: 1px solid blue; background-color: lightblue;"></div><br><button>显示 div 的尺寸</button><p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p><p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p></body></html>?15、042
<title>更多的 width() 和 height()</title><script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt); });});</script></head><body><button>显示文档和窗口的尺寸</button></body></html>?16、043
<title>设置指定的 <div> 元素的宽度和高度</title><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").width(320).height(320); });});</script></head><body><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br><button>调整 div 的尺寸</button></body></html>?