首先，大前提是在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>
效果显示：
点击前
点击后，对应的元素就消失了
该