?課程鏈接
【狂神說Java】JavaScript最新教程通俗易懂_嗶哩嗶哩_bilibili
?學習筆記
初識jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- cdn引入 https://www.bootcdn.cn/jquery/-->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
<script src="https://www.cnblogs.com/Flat-White/p/lib/jquery-3.6.0.min.js"></script>
<title>Title</title>
</head>
<body>
<!--公式 $(selector).action()-->
<a href="" id="test-jquery">點我</a>
<script>
document.getElementById('id');
// selector 就是CSS的選擇器
$('#test-jquery').click(function () {
alert('hello jquery')
})
</script>
</body>
</html>
選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://www.cnblogs.com/Flat-White/p/lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="https://jquery.cuishifeng.cn/index.html">jQuery API 中文檔案</a>
<script>
// 原生JS
// 標簽選擇器
document.getElementsByTagName();
// id選擇器
document.getElementById();
// 類選擇器
document.getElementsByClassName();
// jQuery
// 標簽選擇器
$('p').click();
// id選擇器
$('#id1').click();
// 類選擇器
$('.class1').click();
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://www.cnblogs.com/Flat-White/p/lib/jquery-3.6.0.min.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>
// 當網頁元素加載完畢后 回應事件
// $(document).ready(function () {
//
// });
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY)
})
})
</script>
</body>
</html>
操作DOM物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://www.cnblogs.com/Flat-White/p/lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="test-ul">
<li >JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
// 節點文本操作
$('#test-ul li[name=python]').text();
$('#test-ul li[name=python]').text("Java");
$('#test-ul').html();
// CSS操作
$('#test-ul li[name=python]').css('color','red');
// 元素的顯示和隱藏
$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide(); // display:none
// 其他
$(window).width();
$(window).height();
$(document).height();
$('#test-ul li[name=python]').toggle();
// ajax();
</script>
</body>
</html>
?轉載請注明出處
本文作者：雙份濃縮馥芮白
原文鏈接：https://www.cnblogs.com/Flat-White/p/15039231.html
著作權所有，如需轉載請注明出處，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/308397.html
標籤：jQuery
上一篇：WEB開發-HTML入門學習總結
下一篇：jquery基礎（語法)