10 JQuery - 选择器

1 元素选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>

<p>点击按钮隐藏这个段落</p>
<button>隐藏</button>
</body>

</html>

 

2 id 选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>

<p id="test">点击按钮隐藏这个段落</p>
<button>隐藏</button>
</body>

</html>

 

3 class 选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>

<body>

<p class="test">点击按钮隐藏这个段落</p>
<button>隐藏</button>
</body>

</html>

 

4 更多选择器

 

posted @ 2021-04-01 13:38  栗子测试开发  阅读(48)  评论(0)    收藏  举报