- jQuery 捕获
- jQuery 设置
- jQuery 添加元素
- jQuery 删除元素
jQuery 捕获
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="catch.js"></script>
</head>
<body>
<p id="text">this is my webpage<a>这是一个a标签</a></p>
<button id="btn1">点击</button>
<!--获取文本框的内容-->
<p><input type="text" id="it" value="echo3D"></p>
<p><a href="http://www.app-echo.com/#/sound/1173419" id="aid">echo</a></p>
<button id="btn2">点击</button>
</body>
</html>
jQuery代码：
$(document).ready(function () {
// .text 与.html的区别是获得.text获得的文本是当前标签内的所有文字，去掉尖括号，.html是获得当前标签内的所有内容
$("#btn1").click(function () {
alert("text:"+$("#text").text());
}) ;
$("#btn1").click(function () {
alert("text:"+$("#text").html());
}) ;
$("#btn1").click(function () {
//获取文本框的值
alert("text:"+$("#it").val());
}) ;
$("#btn2").click(function () {
//获取属性 attr
alert("text:"+$("#aid").attr("href"));
alert("text:"+$("#aid").attr("id"));
});
});
jQuery 设置
设置.gif
第一步捕获到以后我们需要修改标签的内容或者属性值；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="setting.js"></script>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<p id="p1">echo</p>
<p id="p2">Hello world</p>
<input type="text" id="input" value="nidaye">
<button id="btn1">按钮</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<br/>
<a id="aid" href="http://www.app-echo.com"> 最初是echo官网，接下来是借我</a>
<button id="btn4">调转链接</button>
<br/>
<p id="p5">他大舅</p>
<button id="btn5">按钮5</button>
</body>
</html>
jQuery代码：
$(document).ready(function () {
$("#btn1").click(function () {
$("#p1").text("借我");
});
$("#btn2").click(function () {
$("#p2").html("<a href='http://www.app-echo.com/#/sound/1173419'>借我</a>");
});
$("#btn3").click(function () {
$("#input").val("借我一个暮年");
});
$("#btn4").click(function () {
// $("#aid").attr("href","http://www.app-echo.com/#/sound/1173419");
$("#aid").attr({
"href":"http://www.app-echo.com/#/sound/1173419",
"title":"啥哈哈哈"
});
// $("#aid").text("借我");
});
$("#btn5").click(function () {
//当前元素的下表（不用管，默认为0）， 当前修改后的内容
$("#p5").text(function (i,ot) {
return "old:"+ot +" new:这是新的内容"+(i);
});
});
});
jQuery 添加元素
添加子标签.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="addElement.js"></script>
</head>
<body>
<p id="p1">hello world</p>
<button id="btn1">按钮</button>
<br/>
<p id="p2">hello world</p>
<button id="btn2">按钮2</button>
<br/>
<button onclick="appendText()">按钮3</button>
</body>
</html>
添加子元素 或则修改内容
/**
*append 在被选中的元素结尾插入内容
* prepend 在被选中的元素之前插入内容
* before 在被选中的元素之前插入内容 换行添加
* after 在被选中的元素结尾插入内容 换行添加
*/
$(document).ready(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("jiewo");
$("#p2").after("jiewo");
});
});
function appendText() {
/**
* 添加标签的三种方式 html/jQuery,DOM
*/
var text1 = "<p>echo</p>"
var text2 =$("<p></p>").text("ime");
var text3 = document.createElement("p");
text3.innerHTML = "acely";
$("body").append(text1,text2,text3);
}
jQuery 删除元素
删除有两种方式:
- remove 删除整个标签
- empty 清空标签中的内容
删除元素.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="removeElement.js"></script>
</head>
<body>
<div id="div" style="height: 200px;width: 200px; border:1px solid black;background-color: blueviolet">
hello
<p>hello world</p>
<p>hello</p>
</div>
<button id="btn">按钮 remove</button>
<div id="div2" style="height: 200px;width: 200px; border:1px solid black;background-color: blueviolet">
hello
<p>hello world</p>
<p>hello</p>
</div>
<button id="btn2">按钮 empty</button>
</body>
</html>
/**
* remove
* empty
*/
$(document).ready(function () {
$("#btn").click(function () {
$("#div").remove();
// $("#div").empty();
});
$("#btn2").click(function () {
// $("#div2").remove();
$("#div2").empty();
});
});
