jQuery的使用
jQuery庫，內含大量的JavaScript函數。
推薦學習網站（工具站）：http://jquery.cuishifeng.cn
1 獲取jQuery及‘hello jQuery’
可以從該網址查找需要的jQuery在線鏈接:https://www.bootcdn.cn/jquery/
也可以自行下載jQuery文檔到本機上：https://jquery.com/download/
文檔中調用格式：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
jQuery使用公式：$(選擇器).事件
$(selector).action()
'hello jQuery’案例展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<!--
jQuery公式： $(selector).action()
-->
<a href="" id="test-jquery">點我</a>
<script>
//document.getElementById('id');
//選擇器就是CSS的選擇器
$('#test-jquery').click(function(){
alert('hello,jQuery');
})
</script>
</body>
</html>
運行結果：
2 jQuery選擇器
//原生js，選擇器少，不太好記
//標籤
document.getElementsByTagName();
//id
document.getElementById();
//類
document.getElementsByClassName();
//jQuery ：CSS中的選擇器此處都可使用
//公式：
//$(selector).action;
$('p').click(); //標籤選擇器
$('#id1').click(); //id選擇器
$('.class1').click(); //類選擇器
3 jQuery事件
鼠標事件，鍵盤事件，其他事件…
例子：鼠標事件：
案例展示:(建立在鼠標事件的基礎上)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.4.1.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求：獲取鼠標當前的座標-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在這裏移動鼠標試一試：
</div>
<script>
//當網頁元素加載完畢之後響應事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY);
})
});
</script>
</body>
</html>
案例結果：
API文檔中事件：
4 jQuery操作Dom元素
原始代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.4.1.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="py">Python</li>
</ul>
<script>
</script>
</body>
</html>
原始結果：
現使用jQuery做以下測試：(控制檯中輸入)
測試一、節點文本操作：獲取節點值及更改值。
獲取：
$('#test-ul li[name=py]').text(); //獲取文本值
$('#test-ul').html();//獲取網頁值
獲取結果：
更改：
$('#test-ul li[name=py]').text('PYTHON'); //設置文本值
$('#test-ul').html('<strong>123</strong>'); //設置網頁值
更改結果：
執行第一句後：
執行第二句後：
測試二、css的操作
//語法：$(selector).css(name,value);
$('#test-ul li[name=py]').css("color","red");
運行結果：
測試三、元素的顯示和隱藏
本質：display:none;
$('#test-ul li[name=py]').hide() //隱藏
$('#test-ul li[name=py]').show() //顯示
測試結果：
測試四、文檔處理方法
方法(開頭均省略$(selector).) |
功能 |
|---|---|
| 添加方法 | 共包含8個方法，其實是4個方法，讀者自行體會 |
| append(content) // A.append(B) |
向目標追加內容 //將B追加給A |
| prepend(content) //A.prepend(B) |
向目標前置內容 //將B前置到A |
| after(content) //A.after(B) |
在匹配元素後插入內容 //將B插入到A後 |
| appendTo(content) //A.appendTo(B) |
向目標追加內容 //將A追加給B |
| prependTo(content) //A.prependTo(B) |
向目標前置內容 //將A前置到B |
| insertAfter(content) //A.insertAfter(B) |
把匹配元素插入到另一個元素的後面 //將A插入到B的後面 |
| insertBefore(content) //A.insertBefore(B) |
把匹配元素插入到另一個元素的前面 //將A插入到B的前面 |
| 刪除方法 | |
| remove() | $("p").remove()//從DOM中把素有段落刪除$("p").remove(".hello")//從DOM中把所有帶有hello類的段落刪除 |
| empty() | 刪除匹配元素中所有字節點 |
| 更改方法 | |
| replaceWith(content) //A.replaceWith(B) |
將匹配到的元素替換成指定的HTML/DOM元素 //將A用B替換 |
| replaceAll(selector) //A.replaceAll(B) |
用匹配的元素替換掉所有selector匹配到的元素 //將B用A替換 |
| 克隆方法 | |
| clone() | 克隆匹配的DOM元素並選中這些克隆的副本 |
寫在最後
四月你好，願所有的美好都如期而至！
To Demut and Dottie!