开发者学堂课程【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 方法不接受任何参数。演示结果如下:
.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");