jQuery学习教程一: jQuery语法实例

最新推荐文章于 2024-05-25 22:00:12 发布

j20lin

最新推荐文章于 2024-05-25 22:00:12 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发 JQuery Html5

本文链接：https://blog.youkuaiyun.com/j20lin/article/details/64905046

前端开发同时被 3 个专栏收录

71 篇文章

订阅专栏

Html5

36 篇文章

订阅专栏

JQuery

25 篇文章

订阅专栏

本文介绍了jQuery的基础语法，包括如何使用$(selector).action()来选择HTML元素并对其执行操作。通过几个示例展示了如何隐藏不同类型的元素，如当前元素、所有段落、具有特定类的所有元素及具有特定ID的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素

<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>

$("p").hide() - 隐藏所有段落

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(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>

</html>

$(".test").hide() - 隐藏所有 class="test" 的所有元素

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(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>
</html>

$("#test").hide() - 隐藏所有 id="test" 的元素

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(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>
</html>