一、捕获
注意text()方法要加括号!
$("#btn1").click(function(){
//点击按钮获取P元素中的内容
alert("text:"+$("#text").text());
});
$("#btn1").click(function(){
//点击按钮获取HTML的内容
alert("text:"+$("#text").html());
});
.text()和.html()方法的区别就是HTML标签能否被获取
.text()只能获取内容不能获取标签
2. 获取输入框的内容:
<!--HTML-->
<p id="text">哈哈哈哈<a>这是一个a标签</a></p>
<p><input type="text" id="it" value="即可许愿"/></p>
<button id="btn1">Click Me </button>
//js
$("#btn1").click(function(){
//点击按钮获取P元素中的内容
alert("text:"+$("#it").val());
});
3.获取属性值
<p><a id="aid" href="http://www.baidu.com">极客学院</a></p>
$("#btn1").click(function(){
//点击按钮获取a标签中的href属性的值
alert("text:"+$("#aid").attr("href"));
});
二、设置HTML
1、点击按钮修改内容
<p id="p1">hello world</p>
<button id="btn2">点击修改内容</button>
$("#btn2").click(function(){
$("#p1").text("极客学院");
});
2、点击修改HTML样式
<p id="p2">hello world</p>
<button id="btn3">点击</button>
$("#btn3").click(function(){
$("#p2").html("<a>极客学院</a>");
});
3、修改一个属性
<a id="a1" href="http://www.baidu.com">最初是百度接下来是极客学院</a>
<button id="btn5">点击修改属性</button>
$("#btn5").click(function(){
$("#a1").attr("href","http://www.jikexueyuan.com");
});
4、修改多个属性
<a title="ninini" id="a1" href="http://www.baidu.com">最初是百度接下来是极客学院</a>
arrt()方法以数组的形式修改
“属性名1”:“要修改的值”,
“属性名2”:“要修改的值”,
$("#btn5").click(function(){
$("#a1").attr({
"href":"http://www.jikexueyuan.com",
"title":"Hello",
});
});
以上都有回调属性
<p id="p5">Hello World</p>
<button id="btn6">按钮</button>
$("#btn6").click(function(){
//i:当前元素的下标 ot:当前要修改的内容即原始内容
$("#p5").text(function(i,ot){
return "old:"+ot+"New:这是新的内容"+i;
});
});
三、添加元素
添加元素的方法
1、append:在被选中元素的结尾来插入内容
2、prepend:在被选中元素的开头来插入内容
3、before:在被选中元素之前
4、after:在被选中元素之后来插入内容
区别:使用before和after会换行
添加元素的方式:
1、HTML
2、jQuery
3、JS即DOM
<p >Hello World</p>
<button onClick="appendText()">按钮</button>
<p id="p6">Hello World</p>
<button id="btn7">按钮</button>
function appendText(){
var text1="<p>ime</p>";
var text2 = $("<p></p>").text("ime");
var text3 =document.createElement("p");
text3.innerHTML="acely";
$("body").append(text1,text2,text3);
};
$(document).ready(function() {
$("#btn7").click(function(){
//$("#p6").append("this IS my bebpage");
//$("#p6").prepend("this IS my bebpage");
$("#p6").before("this IS my bebpage");
});
});
四、删除元素
常用的两种删除的方法remove和empty
区别: remove直接移除标签
empty清空内容,保留标签
$("#btn").click(function(){
//$("p").empty();
$("p").remove();
});