JavaScript語言
jQuery
- 概述：jQuery是一個快速、簡潔的JavaScript框架，是一個優秀的JavaScript代碼庫（或JavaScript框架），裏面存在大量的Javascript函數。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
- 引入jQuery：jQuery官網下載，或者自己百度CDN jQuery。
<!--引入在線的cdn-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
<!--官網下載的引入-->action
<script src="lib/jquery-3.4.1.js"></script>
jQuery公式：$(selector).action(事件函數)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<a href="" id="test-jquery">點擊這裏彈出彈窗</a>
<script>
//選擇器就是css的選擇器
$('#test-jquery').click(function () {
alert('hello,jQuery');
})
</script>
</body>
</html>
選擇器（selector）
css 中的選擇器它全部都能用
$('p').click(); //標籤選擇器
$('#id1').click(); //id選擇器
$('.class1').click() //class選擇器
這裏可以查詢jQuery API 3.3.1 速查表
事件（action）
- 鼠標事件
mousedown() //當鼠標指針移動到元素上方，並按下鼠標左鍵時
mouseenter() //當鼠標指針穿過（進入）被選元素時
mouseleave() //當鼠標指針離開被選元素時
mousemove() //當鼠標指針在指定的元素中移動時
mouseout() //當鼠標指針離開被選元素時
mouseover() //當鼠標指針位於元素上方時
mouseup() //當鼠標指針移動到元素上方，並鬆開鼠標左鍵時
獲取移動的鼠標當前的座標
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/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>
結果：
其他事件：
blur() //添加/觸發失去焦點事件
change() //當元素的值改變時
click() //當單擊元素時
dblclick() //當雙擊元素時
delegate() //向匹配元素的當前或未來的子元素添加處理程序
focus() //當元素獲得焦點時（當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時）
keydown() //當鍵盤鍵被按下時
keypress() //當鍵盤鍵被按下時
keyup() //當鍵盤鍵鬆開時
...
...
操作DOM
- 節點文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<ul id="aaa">
<li class="js">JavaScript</li>
<li name="ja">Java</li>
</ul>
<script>
$('#aaa li[name=ja]').text(); //獲得值
$('#aaa li[name=ja]').text('設置值'); //設置值
$('#aaa').html(); //獲得值
$('#aaa').html('<strong>123</strong>'); //設置值
</script>
</body>
</html>
- 操作CSS
$('#aaa li[name=js]').css({"color","red"})
- 元素的顯示和隱藏
$('#aaa li[name=js]').show()
$('#aaa li[name=js]').hide()
本質 display ：none；
- 其他獲得
$(window).width()
$(window).height()
//下篇再見…謝謝