[toc] ### 1. 捕獲 ``` alert("text:"+$("#text").text()); alert("text:"+$("#text").html()); //會獲取內部子標簽 alert("text:"+$("#name").val()); //獲取輸入框value（內容） alert("text:"+$("#aid").attr("href")); //獲取a標簽的href屬性 ``` ### 2. 設置 ``` $("#btn1").click(function(){ $("#p1").text("極客學院"); //更改p標簽的內容 }); ``` ``` $("#btn2").click(function(){ $("#p2").html("<a href='https://www.baidu.com'>極客學院</a>"); //更改p標簽的內容，帶有新的標簽 }) ``` ``` $("#btn4").click(function(){ $("#aid").attr("href", "https://www.jikexueyuan.com"); //更改a標簽的屬性值 }) ``` ``` //更改元素的多個屬性值 $("#btn4").click(function(){ $("aid").attr({ "href": "https://www.jikexueyuan.com", //逗號隔開 "title": "hello" }) }) ``` ``` //以上函數均可實現回調 $("#btn5").click(function(){ $("#p5").text(function(i, ot){ return "old: " +ot+ " new:這整段話包括前面都是return的新內容"; }) }) ``` ### 3. 添加元素 1. 添加元素內容 ``` $(function(){ $("#btn1").click(function(){ // $("#p1").append("this is my webpage add content"); //添加內容到元素內容之后 $("#p1").prepend("this is my webpage add content"); //添加內容到元素內容之前 }) $("#btn2").click(function(){ $("#p2").before("hello"); //添加內容到元素內容之前，換行 $("#p2").after("hello"); //添加內容到元素內容之后，換行 }) }) ``` 2. 添加元素以及元素內容 ``` function appendText() { /* html、jQuery、DOM 三種方式*/ var text1 = "<p>iwen</p>" var text2 = $("<p></P>").text("ime"); var text3 = document.createElement("p"); text3.innerHTML = "acely"; $("body").append(text1, text2, text3); } ``` ### 4. 刪除元素 ``` $(function(){ $("#btn").click(function(){ $("#div").remove(); //全部刪除 // $("#div").empty(); //刪除里面的子元素與內容 }) }) ```