1.jquery 引入
2.jquery套用
3.認識CSS選擇器
4.認識事件
1.jquery 引入
<head>
<script src="jq/jquery-3.5.1.js"></script>
</head>2.jquery套用
方法1(建議使用):
<script>
$(document).ready(function(){
alert(123);
});
</script>方法2:
<script>
$(function(){
alert(456);
});
</script>只需要一組 <script> </script> 所有的 javascript、jquery都寫在這個標籤裡即可
3.認識CSS選擇器
適用於標籤
$("p")
適用於 id="test"
$("#test")
適用於 class="myfont"
$(".myfont")
適用於 p 標籤裡的class="myfont"
$("p.myfont")
4.認識事件
事件參考表: https://www.w3school.com.cn/jquery/jquery_ref_events.asp
<script>
$(document).ready(function(){
$("p").click(function(){
alert("hi");
});
$("#test").click(function(){
alert("hi2");
});
$(".myfont").click(function(){
alert("hi3");
});
$("p.myfont").click(function(){
alert("hello");
});
});
</script>完整Code:
<html>
<head>
<script src="jq/jquery-3.6.0.js"></script>
<style>
.myfont{
color:green;
}
</style>
</head>
<body>
<p>
hi,web
</p>
<span id="test">ID=test</span><br><br>
<span class="myfont">css=myfont</span><br>
<p class="myfont">
p標籤套用css_myfont
</p>
</body>
</html>
<script>
$(document).ready(function(){
$("p").click(function(){
alert("hi");
});
$("#test").click(function(){
alert("hi2");
});
$(".myfont").click(function(){
alert("hi3");
});
$("p.myfont").click(function(){
alert("hello");
});
});
</script>
Yiru@Studio - 關於我 - 意如