首先，大前提是在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>
效果顯示：
點擊前
點擊后，對應的元素就消失了
該