JQ常用的三種選擇器
阿新 • • 發佈：2018-12-15
首先，大前提是在html種匯入jq的js，然後分別展示
1元素選擇器
元素就是 html種定義的標籤，如p段落，
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素選擇器</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script> $(document).ready(function(){//一訪問html就載入此函式 $("button").click(function(){//點選事件觸發 $("p").hide(); }); }); </script> </head> <body> <h2>這是一個標題</h2> <p>這是一個段落。</p> <p>這是另一個段落。</p> <button>點我</button> </body> </html>
#id選擇器
id就很明白了，在上面的每一個元素都可以給他新增一個唯一id
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>#id選擇器</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#cs").hide(); }); }); </script> </head> <body> <h2>這是一個標題</h2> <p>這是一個段落。</p> <p id="cs">這是另一個段落。</p> <button>點我</button> </body> </html>
3.class選擇器
class的範圍在id和元素之間，元素最大，一種元素可以有多個class，id最小
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>.class選擇器</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(".cs").hide(); }); }); </script> </head> <body> <h2 class="cs">這是一個標題</h2> <p class="cs">這是一個段落。</p> <p id="css">這是另一個段落。</p> <button>點我</button> </body> </html>
效果顯示：
點選前
點選後，對應的元素就消失了
該