jQuery 遍历_过滤2|学习笔记

开发者学堂课程【jQuery 开发教程：jQuery 遍历_过滤2】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/362/detail/4300

jQuery 遍历_过滤2

目录

一、 具体方法

二、 演示

一、具体方法

.first()：获取匹配元素集合中第一个元素。

.last)：获取匹配元素集合中最后一个元素。

.has()：筛选匹配元素集合中的那些有相匹配的选择器或 DOM 元素的后代元素。

.is()：判断当前匹配的元素集合中的元素，是否为一个选择器，DOM 元素，或者 jQuery 对象，如果这些元素至少一个匹配给定的参数，那么返回 true。Is 方法不是创建新的 jQuery 对象，它允许检测 jQuery 对象中的内容，比如选择器，DOM 元素，或者 jQuery 对象，而无需修改该对象，判断即可，通常是在回调函数内使用该方法，比如事件处理。

二、 演示

1、.first().last()方法演示：

选择 ul 中的第一个和最后一个标签

<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
<script>
$(function() {
$("li").first().css("background-color","red");

注意：first 方法不接受任何参数，这里选择的是第一个标签。演示结果如下

$("li").last().css("background-color","red")；

Last 与first 是对应的关系， last 方法不接受任何参数。演示结果如下：

2、.has()方法演示：

.has()方法的参数即为选择器以及元素

<ul>
<li>li 1</li>
<li>li 2</li>
<li>
<strong>s1</strong>
</li>
<li>
<strong>s2</strong>
<strong>s3</strong>
</li>
<li>li3</li>
</ul>
<script>
$("li").has("strong").css("border","1px solid red");

选择 li 标签中包含 strong 的 li 标签，has 表示这个 li 标签有什么。演示效果如下：只有 li 标签中包含 strong 的标签添加了效果

3、.is方法演示：

给 ul 元素绑定一个 click事件，限制只有点击列表项目本身时才会被触发，点击子元素不会被触发，就像点击 strong 标签中的 item 1，就不会被触发，如果点击 list item 3 就会触发，点击 list 也会被触发。设置一个对象使其返回被点击的对象，判断当前被点击的对象是否是一个 li 标签，is接受一个参数，可以是元素对象函数选择器等，当点击 item1 或者 item2 时，背景颜色不会改变，只有点击 list item 3，才会改变。此时点击第一个中的 strong 标签，没有改变，点击 list 会改变，第二个点击 span 标签，并没有效果，点击空白处，因为空白处时 li 标签的范围，所以背景颜色变为黄色。第三个 li 标签中没有嵌套任何标签，所以点击它会变成黄色背景。

代码如下

<ul>
<li>list<strong>item 1</strong></li>
<li><span>list item 2</span></li>
<li>list item 3</li>
</ul>
<script>
$(function(){
$("ul").click(function(event) {
var target=$(event.target);
if(target.is("li")) {
target.css("background-color","yellow");