1、捕获
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("text:" + $("#text").text());
alert("text:" + $("#text").html());/*这个连标签也会显示*/
});
$("#btn2").click(function(){
alert("text:" + $("#it").val());
alert("text:" + $("#aid").attr("href"));/*获取某一元素的属性值*/
});
});
</script>
</head>
<body>
<p id="text">这是p元素的内容 <a id="aid" href="http://www.baidu.com" >这里是标签里的内容</a></p>
<button id="btn1">按钮1</button>
<p><input type="text" id="it" value="jikexueyuan"></p>
<button id="btn2">按钮2</button>
</body>
</html>
2、设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").text("百度一下");
});
$("#btn2").click(function(){
$("#p2").html("<a href='http://www.baidu.com'>极客学院</a>");
});
$("#btn3").click(function(){
$("#text1").val("修改后的text");
});
$("#btn4").click(function(){
// $("#aid").attr("href","http://www.baidu.com");/*这是修改一个属性值*/
$("#aid").attr({
"href":"http://www.jikexueyuan.com",
"title":"hello"
});/*这是修改多个属性*/
});
$("#btn5").click(function(){
$("#p5").text(function(i,ot){/*function是回调方法*/
return "old:" + ot + " new:这是新的内容" + (i+1);
});
});
// $( "ul li" ).text(function( index ) {
// return "item number " + ( index + 1 );
// });/*因为不是按钮触发的事件，所以会自己完成*/
$("#btn6").click(function(){
$( "ul li" ).text(function(index,ot) {
return "原来的内容："+ot+", item number " + ( index + 1 );
});/*回调函数自己完成所有选中的标签，并完成要设置的任务。ot是原来标签内的字符串。
只需要知道这么用就可以了，具体原理如果不是研究算法的就不需要知道。
只有一个参数的时候就是当前标签的序号。从0开始算的。
其他的val()、html()等也是可以用这个的。*/
});
});
</script>
</head>
<body>
<p id="p1">Hello world!</p>
<p id="p2">这是p2位置</p>
<input type="text" id="text1" value="hello world">
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<a href="http://www.jikexueyuan.com" id="aid">最初是极客学院,点击按钮4后链接更改</a>
<button id="btn4">按钮4</button>
<p id="p5">hello world555</p>
<button id="btn5">按钮5</button>
<button id="btn6">按钮6</button>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</body>
</html>
3、添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").append("this is append");/*不换行在选中元素的内容后面添加*/
$("#p1").prepend("this is prepend");/*不换行在选中元素的内容前面添加*/
});
$("#btn2").click(function(){
$("#p2").before("this is before");/*换行在选中元素前面添加*/
$("#p2").after("this is after");/*换行在选中元素后面添加*/
});
});
function appendText(){
/*
* 追加html元素的三种方式
* html、jQuery、DOM
* */
var text1 = "<p>p1111111</p>"
var text2 = $("<p></p>").text("p2222222");
var text3 = document.createElement("p");
text3.innerHTML = "p333333";
$("body").append(text1,text2,text3);
}
</script>
</head>
<body>
<p id="p1">这是p1</p>
<p id="p2">这是p2</p>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button onclick="appendText()">按钮3</button>
</body>
</html>
4、删除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
// $("p").remove();/*将该类元素都删除，包括标签及其属性*/
$("p").empty();/*将元素内部内容清空，标签还在*/
});
});
</script>
</head>
<body>
<p>p元素</p>
<button id="btn1">删除</button>
</body>
</html>
