jQuery 操作 HTML 元素和属性的方法

一、获取HTML 元素的内容和属性

(1) 获得内容
1.text() 设置或返回所选元素的文本内容
参数：不给任何参数，就是获取文本内容
给参数，就是设置文本内容

 $(function(){
    $("#getBtn").click(function(){
         // 获取这个div的文本
         var text = $(".div1").text();
         console.log(text);
     })
     $("#setBtn").click(function(){
         // 我要给div1这个盒子设置文本
         $(".div1").text("<a>我是新设置的text</a>");
     })
     
 });

注意： 设置文本会覆盖元素原本的文本 包括子元素
如果新设置的文本中中包括了标签 那么它是不会解析标签的 来解析当前文本内容
2.html() 设置或返回所选元素的内容（包括 HTML 标记）
参数：不加任何参数 就是获取对应的元素 包括我们的标签以及标签里面的文本
如果html()中加了参数 那么就是设置内容 把内容直接给参数

$("#btnHtml").click(function(){
	alert($("#myDiv1").html());
 });
$("#btnHtmlSet").click(function(){
	$("#myDiv1").html('这是一个<b>神奇</b>的世界啊');
	alert($("#myDiv1").html());
});

注意：就是会覆盖原来的内容 而且如果设置的内容中有标签 也会解析出来
3.val() 设置或返回表单字段的值
参数：如果不传参数 那么 就是直接获取表单元素的值
如果传参数 那么 就是直接设置表单元素的值

$("#btnVal").click(function(){
    alert($("#myInput1").val());
});  
$("#btnValSet").click(function(){
	$("#myInput1").val('好好学习，天天向上');
	alert($("#myInput1").val());
});

(2) 获取属性
attr() 用于获取属性值，也用于设置/改变属性值。
获取属性 jQuery对象.attr(“属性名”)
设置属性 jQuery对象.attr(“属性名”,“属性值”)

 $("#get").click(function(){
       console.log($("img").attr("src"));
   })
$("#set").click(function(){
	$("img").attr({
	src:"img/1.jpg",
	"title":"大图",
	"sb":"222",
	"aaa":"111"
})

注意： 再获取属性时如果这个属性 在元素中不存在 那么就会的到undefined
原本就存在的属性 设置之后 就是修改 原本不存在 那么就是添加
(3) 移出属性
removeAttr() 用于移除属性值

$("#remove").click(function(){
	// 移出多个属性
	$("img").removeAttr("src aaa");
})

二、添加元素：append() 和 prepend() 方法，after() 和 before() 方法

1.append() 方法在被选元素的结尾插入内容（仍然该元素的内部）

 //append() 方法在被选元素的结尾插入内容（仍然该元素的内部）
   $("#btn_append").click(function(){
    $("#myDiv1").append("world");
   });

2.prepend() 方法在被选元素的开头插入内容（仍然该元素的内部）

   $("#btn_prepend").click(function(){
    $("#myDiv1").prepend("Hello ");
   });

3.before() 方法在被选元素的开头插入内容

   $("#btn_before").click(function(){
    $("#myDiv1").before("Hello ");
   });

4.after() 方法在被选元素的后面插入内容

  $("#btn_after").click(function(){
    $("#myDiv1").after("World ");
   });

5.appendTo()方法 子元素2.appendTo(父元素) 把元素2作为最后一个添加到父元素中

$("#appendToBtn").click(function(){
	//新增一个li标签
   var $newLi = $("<li>我是新创建的标签</li>");
   $newLi.appendTo($("#ul1"));
})

三、 删除元素：remove() 方法，empty() 方法

remove() 方法删除被选元素及其子元素

 $("#btn_remove").click(function(){
  $("#myDiv1").remove();
  });

empty() 方法删除被选元素的子元素。

$("#btn_empty").click(function(){
	$("#myDiv2").empty();
});