1 获取 text、html、value
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#ptest").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#ptest").html()); }); $("#btn3").click(function(){ alert("Value: " + $("#btest").val()); }); }); </script> </head> <body> <p id="ptest">这是段落中的 <b>粗体</b> 文本。</p> <p>名称: <input type="text" id="btest" value="菜鸟教程"></p> <button id="btn1">显示文本</button> <button id="btn2">显示 HTML</button> <button id="btn3">显示值</button> </body> </html>
2 设置 text、html、value
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello lizi text!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello lizi html!</b>"); }); $("#btn3").click(function(){ $("#test3").val("lizi value"); }); }); </script> </head> <body> <p id="test1">替换为text......</p> <p id="test2">替换为html......</p> <p>输入框: <input type="text" id="test3" value="替换为value......"></p> <button id="btn1">替换文本</button> <button id="btn2">替换HTML</button> <button id="btn3">替换value</button> </body> </html>
3 html 添加元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" 追加一个文本<br>"); }); $("#btn2").click(function(){ $("div").append("<input type=‘text‘>  <a href=‘http://www.百度.com‘>删除</a><br>"); }); }); </script> </head> <body> <p> 在下面追加文本<br> </p> <div> </div> <button id="btn1">添加文本</button> <button id="btn2">添加控件</button> </body> </html>
4 删除元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").remove(".italic"); }); $("#btn2").click(function(){ $("#div1").empty(); }); $("#btn3").click(function(){ $("#div1").remove(); }); }); </script> </head> <body> <div id="div1" style="height:150px;width:300px;border:1px solid black;background-color:yellow;"> <p>这个段落不会被移除</p> <p class="italic"><i>这个段落会被移除</i></p> <p class="italic"><i>这个段落会被移除</i></p> </div> <button id="btn1">移除所有 class="italic" 的 p 元素</button><br> <button id="btn2">清空div元素</button><br> <button id="btn3">移除div</button><br> </body> </html>
5 添加删除样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); }); </script> <style type="text/css"> .blue { color:blue; } </style> </head> <body> <h1 class="blue">标题 1</h1> <h2 class="blue">标题 2</h2> <p class="blue">这是一个段落。</p> <br> <button>切换 class</button> </body> </html>
6 设置html样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <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>
7 元素尺寸
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="div 宽度: " + $("#div1").width() + "</br>"; txt+="div 高度: " + $("#div1").height() + "</br>"; txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>"; txt+="div 高度，包含内边距: " + $("#div1").innerHeight() + "</br>"; txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>"; txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight(); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:150px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightgreen;"></div> <br> <button>显示 div 元素的尺寸</button> </body> </html>