潭州課堂25班：Ph201805201 WEB 之 Ajax第八課 (課堂筆記)
阿新 • • 發佈：2018-08-10
筆記 this elements 當前 ajax each yellow ctype tag
js 《——》jq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>一</div>
<div>二</div>
<div>三</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
// JQ --> JS
var $div = $(‘div‘); //JQ 對象
var div0 = $(‘div‘)[0]; // JS 對象
var div1 = $(‘div‘).get(1); // JS 對象
// js --> jq
var div = document.getElementsByTagName(‘div‘);
var $divs = $(div);
</script>
</body>
</html>
this 特殊選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--<style>-->
<!--div{-->
<!--color: ;-->
<!--}-->
<!--</style>-->
<body>
<div>一二三四</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(‘div‘).click(function () {
var $div = $(this);
$div.css(‘color‘,‘yellow‘) // 特殊選擇器指的是當前元素
})
</script>
</body>
</html>
each
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1aa</li>
<li>2bb</li>
<li>3cc</li>
<li>4dd</li>
</ul>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
// JQ 裏的 each 方法
// $.each([‘a‘,‘b‘,‘c‘],function(i,n){
// console.log(i+‘:‘+n); //類似 for 循環
// });
var $ul = $(‘li‘);
$.each($ul,function (i,li) {
console.log($(li).text()); // JQ 依次拿到 li 中的文字
console.log(li.innerText); // JS 依次拿到 li 中的文字
})
$.each($ul,function () {
console.log($(this).text()); // JQ 依次拿到 li 中的文字
console.log(this.innerText); // JS 依次拿到 li 中的文字
})
</script>
</body>
</html>
Ajax
潭州課堂25班：Ph201805201 WEB 之 Ajax第八課 (課堂筆記)