jQuery选择器

Easonflowers

于 2020-05-26 19:25:32 发布

阅读量95

点赞数

分类专栏： jQuery

原文链接：https://blog.csdn.net/msh2016/article/details/90140966

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery选择器使用HTML元素的 id、类、类型、属性、属性值等"查找"（或选择）。
$(this).hide() - 隐藏当前HTML元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$(".test").hide() - 隐藏所有 class="test"元素
$("#test").hide() - 隐藏所有 id="test" 的元素
$("*").hide() -隐藏所有元素 
$("#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.csdn.net/msh2016">请点击CSDN</A></p>
<P id="test">韩小花博客---https://editor.csdn.net/md?articleId=106359145</P>
<button>点我</button>
</body>
</html>