- 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 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" > 最初是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 );
});
$("#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();
});
});
