[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(); //删除里面的子元素与内容 }) }) ```