SOURCE

$("#btn1").click(function(){
  $("#p1").show();               
                 });
$("#btn2").click(function(){
 ($("#p1").hide());             
                 });
$("#btn5").click(function(){
 ($("#p2").append("append"));             
                 });//在被选元素的结尾插入内容
$("#btn4").click(function(){
alert( $("#div1").height());             
                 });//设置或返回被选元素的高度
$("#btn6").click(function(){
alert( $("#div1").outerWidth());             
                 });//返回元素的宽度（包含 padding 和 border）

  $("#btn3").click(function(){
    $("#p3").hide("slow",function(){
      alert("段落现在被隐藏了");
    });//speed(slow);
  });

$("#btn7").click(function(){
 ($("#p3").prepend("hello!"));             
                 });//在被选元素的开头插入内容
$("#btn8").click(function(){
 $("img").attr({width:"300",height:"300" });            
                 });//设置图像的 width 和height属性：
$("#btn9").click(function(){
		$("#p4").html("attr('checked'): " + $("input").attr('checked')
					  + "<br>prop('checked'): " + $("input").prop('checked'));
	});//prop() 和 attr() 之间的不同

<div id="div2">
<p id="p1">pargraph1</p>
<p id="p2">pargraph2</p>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn5">末尾插入</button>
<div id="div1">div1</div>
<button id="btn4">显示高度</button>
<button id="btn6">返回宽度</button><br>
<p id="p3">我们段落内容，点击“隐藏”按钮我就会消失</p>
<button id="btn3">隐藏</button>
  <button id="btn7">前端添加</button>
<br>
  <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2397310473,1512232858&fm=58" width="100" height="100"><br>
  <button id="btn8">设置</button>
  <p><b>注意:</b>确认或取消选中该复选框,然后单击按钮刷新内容。</p>
<button id="btn9">查看attr() 和 prop() 的值</button>
<br><br>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p id="p4"></p>
</div>

#div1{
  width:30px;
  height:30px;
  border:10px solid blueviolet;
  padding:50px;
  margin-left:200px;
}
#div2{
text-align:center;
  color:blueviolet;
}
button{
  color:blueviolet;
}
p{
  color:blueviolet;
  font-size:20px;
  font-family:幼圆;
    
}