jQuery入学02_jQuery 选择器

最新推荐文章于 2022-04-16 09:02:33 发布

原创最新推荐文章于 2022-04-16 09:02:33 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

16 篇文章

订阅专栏

本文深入讲解了jQuery选择器的使用方法，包括通过ID、类、属性等选择元素，并提供了多种选择器类型的示例，如:first、:even和[attr='value']等。通过一个具体的代码案例展示了如何使用jQuery隐藏页面中的特定元素。

jQuery选择器使用HTML元素的 id、类、类型、属性、属性值等"查找"（或选择）。
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$(".test").hide() - 隐藏所有 class="test"元素
$("#test").hide() - 隐藏所有 id="test" 的元素
$("*").hide() 隐藏所有元素
$(this) .hide() 隐藏当前HTML 元素
$("p.test").hide() 隐藏class为test的<p>元素
$(".test").hide() - 隐藏所有class="test"元素
$("#test").hide() - 隐藏id="test" 的元素
$("p:first").hide() 隐藏第一个<p>元素
$("ul li:first").hide() 隐藏第一个<ul>元素的第一个 <li> 元素
$("ul li:first-child").hide() 隐藏每个<ul>元素的第一个 <li> 元素
$("[href]").hide() 隐藏带有href属性的元素
$("a[target='_blank']").hide() 隐藏所有target属性值等于"_blank"的<a>元素
$("a[target!='_blank']").hide() 隐藏所有target 属性值不等于 "_blank"的<a> 元素
$(":button").hide() 隐藏所有type="button"的<input>元素和<button>元素
$("tr:even").hide() 隐藏偶数位置的<tr>元素
$("tr:odd").hide() 隐藏奇数位置的<tr>元素
代码案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>木生火博客</title> 
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>
<body>
<h2>木生火博客</h2>
<p><A href="https://blog.youkuaiyun.com/msh2016">请点击优快云</A></p>
<p id="test">木生火博客---https://blog.youkuaiyun.com/msh2016</p>
<button>点我</button>
</body>
</html>