jQuery基本筛选选择器
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:vs· jQuery基础
作者: xqll
撰写时间:2019/4/25
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,
为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。
筛选选择器很多都不是CSS的规范,
而是jQuery自己为了开发者的便利延展出来的选择器
筛选选择器的用法与CSS中的伪元素相似,选择器用冒号":"开头
下面展示一下如何用选择器选择元素
首先 我们给它设置一些内容
<h3>第一</h3>
<h3>第二</h3>
<h3>倒数第二</h3>
<h3>倒数第一</h3>
<button type="button">Click</button>
然后就是操作
<script>
$(document).ready(function () {
$("button").click(function () {
$("h3:first").hide();
});
});
</script>
$(“button”).click(function () { }); 意思是当按钮的点击事件被触发时会调用一个函数
$(“h3:first”).hide(); 是获取h3标签中 第一个元素 然后把它隐藏 的意思
一开始得到的是这样的
当点击了按钮后
$(document).ready(function () {
$("button").click(function () {
$("h3:last").hide();
});
});
这是获取h3标签的最后一个元素
当然 还有其他很多方法 我就不能一一展示了
具体方法如下
图片来源:w3cschool菜鸟教程