首先展示今天要回顧的內容（選擇器如何去用，有哪些屬性進行詳細的介紹與回顧）用今天所回顧的完成下面的一張圖，
上面的是事件和選擇器，
第二部分跟這PPT回顧一些內容，
思考一下代碼是什么意思：
@1全選選擇器：$("*").css("font-size","10px");<br>
@2標簽選擇器：$("div").css("font-size","10px");<br>
@3Class選擇器：$(".類名").css("font-size","10px");<br>
@4id選擇器：$("#name").css("font-size","10px");<br>
@1 $("body div").css("background", "pink");<br>
@2 $("body>div").css("font-size", "30px");<br>
@3 $("#one+div").css("background", "red");<br>
@4 $("#one~div").css("background", "blue");<br>
語法格式的講解:
click:單機的事件,你要單機誰？
$(你要單機的那個input的目標).click(function(){}<br>
@1$("div:first").css("background", "red");<br>
@2$("div:last").css("background", "red");<br>
@3 $("div:not(.one)").css("background", "yellow");
@4 $("div:even").css("background", "#bbffaa");
@5 $("div:odd").css("background", "purple");
@6 $("div:gt(3)").css("background", "red");
@7 $("div:eq(3)").css("background", "brown");
@8 $("div:lt(3)").css("background", "green");
@9 $(":header").css("background", "#bbffaa");
@10 $(":animated").css("background", "brown");
@11 $("div:not(:animated):last").css("background", "#bbffaa");
1 選擇 含有文本 'di' 的 div 元素. $("div:empty").css("background", "pink");
2.選擇不包含子元素(或者文本元素) 的 div 空元素 $("div:empty").css("background", "pink");
3 選擇含有 class 為 mini 元素的 div 元素 $("div:has('.mini')").css("background", "gray");
4 選擇含有子元素(或者文本元素)的div元素 $("div:parent").css("background", "orange");
如何去選擇？
1選取所有可見的 div 元素
2選擇所有不可見的 div 元素
3選擇所有不可見的 input 元素"
案例一從容易的開始：
重要代碼
? <script> $(document).ready(function () { $("h5").click(function () { alert("如何使用叮當購物 采用的是click 點擊事件哦 色彩變？") $('h5').css("color","red"); $(this).hide(); $('h3').mouseenter(function () { $('h3').css("background",'pink'); $('h3').css("background",'yellow'); }； </script> ?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>十二色變燈</title> <style type="text/css"> div{ height: 200px; width: 200px; border: 3px solid deepskyblue; border-radius: 50%; } </style> <script type="text/javascript"> var but=document.getElementsByTagName('button'); console.log(but);/*but是dom物件*/ /*原生js1方法 docyment.getElemntById()*/ </script> <script src="Jquery選擇器/jquery-3.6.js"></script> </head> <body> <div></div><br> <div></div><br> <div></div><br> <button>單機</button> <button>單機1</button> <button>單機2</button> <script> $(document).ready(function () { $("button").click(function () { $("div").hide(1000); alert("現在div被隱藏了"); $(this).css("background-color","pink") }) }) </script> <script> $(document).ready(function () { $("div").click(function () { $(this).css("background-color","pink") }) }) </script> <script> /* $(document).ready(function () { $(div[0]).click(function () { var but=document.getElementsByTagName('div'); $('div').css("background-color","green") }) }) */ /* /!*方法二用JavaScript*!/ btn[0].onclick=function () { $('body')[0].style.backgroundColor='pink' }*/ </script> <button>猜猜我是什么色彩1</button> <button>猜猜我是什么色彩2</button> <button>猜猜我是什么色彩3</button> <button>猜猜我是什么色彩4</button> <button>猜猜我是什么色彩5</button> <button>猜猜我是什么色彩6</button> <button>猜猜我是什么色彩7</button> <button>猜猜我是什么色彩8</button> <button>猜猜我是什么色彩9</button> <button>猜猜我是什么色彩10</button> <button>猜猜我是什么色彩11</button> <button>猜猜我是什么色彩12</button> <button>猜猜我是什么色彩13</button> <button>猜猜我是什么色彩14</button> <button>猜猜我是什么色彩15</button> <button>猜猜我是什么色彩16</button> <button>猜猜我是什么色彩17</button> <button>猜猜我是什么色彩18</button> <p>如何去使用這些元素</p> <script> $(document).ready(function () { $("p").click(function () { alert("如何使用叮當購物 采用的是click 點擊事件哦 色彩變？") $('p').css("color","red") $('p').css("font-size","60px") alert("點擊我 我消失") $(this).hide(); }) }) </script> <script> $(document).ready(function () { $(but[0]).click(function () { var but=document.getElementsByTagName('body'); alert("hello world") $('body').css("background-color","yellow") }) $(but[0]).mouseenter(function () { $(but[0]).css('background','pink') }) }) </script> <script> $(document).ready(function () { $(but[1]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","pink") }) }) </script> <script> $(document).ready(function () { $(but[2]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","green") }) }) /* /!*方法二用JavaScript*!/ btn[0].onclick=function () { $('body')[0].style.backgroundColor='pink' }*/ </script> <script> $(document).ready(function () { $(but[3]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","orange") }) }) </script> <script> $(document).ready(function () { $(but[4]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","fuchsia") }) }) </script> <script> $(document).ready(function () { $(but[5]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","blue") }) }) </script> <script> $(document).ready(function () { $(but[6]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","black") }) }) </script> <script> $(document).ready(function () { $(but[7]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","blue") }) }) </script> <script> $(document).ready(function () { $(but[8]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","cyan") }) $(but[9]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","red") }) $(but[10]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "purple") }) $(but[11]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "bronze") }) $(but[12]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "yellow") }) $(but[13]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "coral") }) $(but[14]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "black") }) $(but[15]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "red") }) $(but[16]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "blue") }) $(but[18]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", " red") }) $(but[19]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "yellow") }) }) </script> <!-- <script> $(document).ready(function () { $('body').alert("hellow world") }) </script> --> <a href="主視窗.html">回傳主視窗</a> </body> </html>
案例二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="Jquery選擇器/jquery-3.6.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("h1,h2,p").addClass("bn");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color: #FF3333;
}
.bn{
font-size: 20px;
font-family: "Bodoni MT Poster Compressed";
background: #00BFFF;
}
</style>
</head>
<body>
<h1>標題 1</h1>
<h2>標題 2</h2>
<p>這是一個段落，</p>
<p>這是另一個段落，</p>
<div>這是非常重要的文本！</div>
<br>
<button>向元素添加類</button>
<article>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:red;
}
</style>
<h1 class="blue">標題 1</h1>
<h2 class="blue">標題 2</h2>
<p class="blue">這是一個段落，</p>
<p>這是另一個段落，</p>
<br>
<button>從元素上洗掉類</button>
</article>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/395376.html
標籤：其他
上一篇：nodejs中module.exports和exports的區別與用法
下一篇：Vue - 使用vite創建工程