JQuery学习之控制相关控件的隐藏

最新推荐文章于 2023-10-22 14:22:56 发布

原创最新推荐文章于 2023-10-22 14:22:56 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #库

jquery学习专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用jQuery通过四种不同方式来隐藏网页元素：点击按钮隐藏自身、根据ID隐藏指定元素、根据标签隐藏所有同类元素及根据样式类隐藏指定元素。

首先引用jquery库

<script type="text/javascript" src="/jquery/jquery.js"></script>

实现隐藏的多种方法：
第一种：实现当前隐藏

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $(this).hide();
});
});
</script>
</head>

<body>
<button type="button">Click me</button>
</body>

</html>

第二种：根据Id来隐藏

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>

第三种：根据标签来隐藏

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>

第四种：根据样式来隐藏：

$(document).ready(function()
{
  $("button").click(function()
  {
  $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>

</body>