JQuery学习之遍历

1.祖先:向上遍历DOM树

**parent():返回被选中元素的直接父元素,该方法只会向上一级对DOM树进行遍历

$(document).ready(function(){

  $("span").parent();

});

**parents():返回被选元素的所有祖先元素,它一路向上直到文档的根元素(<html>)

$(document).ready(function(){

  $("span").parents();

});

**parents():这个方法也可以使用可选参数来过滤对祖先元素的搜索

$(document).ready(function(){

  $("span").parents("ul");

});

**parentsUntil():返回介于两个给定元素之间的所有祖先元素

$(document).ready(function(){

  $("span").parentsUntil("div");

});

2.后代:向下遍历DOM树

**children():返回被选元素的所有子元素,该方法只会向下一级对DOM树进行遍历

$(document).ready(function(){

  $("div").children();

});

**children():也可以使用可选参数来过滤对子元素的搜索

$(document).ready(function(){

  $("div").children("p.1");

});

**find():返回被选元素的后代元素,一路向下直到最后一个后代

$(document).ready(function(){

  $("div").find("*");                //返回<div>的所有后代

  $("div").find("span");            //返回属于<div>后代的所有<span>元素

});

3.同胞:在DOM树进行水平遍历

**siblings()方法:返回被选元素的所有同胞元素

$(document).ready(function(){

  $("h2").siblings();            //返回<h2>的所有同胞元素

  $("h2").siblings("p");       //返回属于<h2>的同胞元素的所有<p>元素  

});

**next()方法:返回被选元素的下一个同胞元素

$(document).ready(function(){

  $("h2").next();

});

**nextAll()方法:返回被选元素的所有跟随的同胞元素

$(document).ready(function(){

  $("h2").nextAll();

});

**nextUntil()方法:返回介于两个给定参数之间的所有跟随的同胞元素

$(document).ready(function(){

  $("h2").nextUntil("h6");             //返回介于两个参数之间的所有跟随的同胞元素

});

**prev(),prevAll()以及prevUntil()方法的工作方式与上面的方法类似,只不过方向相反而已,它返回的是前面的同胞元素

4.过滤:缩写搜索元素的范围;

**first():返回被选元素的首个元素

$(document).ready(function{

  $("div p").last();                 //选择最后一<div>元素中的最后一个<p>元素

});

**eq():返回被选元素中带有指定索引号的元素,索引号从0开始而不是1.

$(document).ready(function(){

  $("p").eq(1);

});

**filter():允许你规定一个标准;不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回

$(document).ready(function(){

  $("p").filter(".url");              //返回带有类名"url"的所有<p>元素

});

**not():返回不匹配标准的所有元素,与filter()方法相反

$(document).ready(function(){

  $("p").not(".url");

});

时间: 2024-10-10 09:29:08

JQuery学习之遍历的相关文章

第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

jQuery 学习8 遍历-父亲兄弟子孙元素 jQuery遍历,可以理解为"移动",使用"移动"还获取其他的元素. 什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师,但我不认识所有学生,只认识上学期教过的几位同学.比如小明.我们再用一小串代码来作解释: <body> <span id="ming">我是小明</span> <span>我坐在小明后面,我叫李四</sp

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

jQuery学习之开篇

吐槽 最近比较烦,对于一个前端白痴来说,工作方向突然转向前端这块着实让人蛋疼无比.前段时间简单的学习了下EasyUI,算是对其有一个简单的认知了吧.EasyUI的研究过程中发现,如果没有掌握JS.JQuery想要进行后续的开发会非常困难.得,又得学下JQuery,一种蛋蛋的忧伤.一直认为前端的水非常的深这段时间算是见识到了,哎,不过工作还的继续,吐槽完了,卯足干劲充电吧! 前言 某前端白痴一个,会点html+css+js.JQuery的学习书籍看的是<锋利的JQuery>,先入门看了两章,感觉

JQuery学习笔记(1)

JQuery学习笔记(1) 认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼容性,简化了开发人员遍历html文档.操作dom.处理事件.执行动画和开发Ajax的操作.理念是:写得少,做得多. 优点 1.轻量级.UglifyJS压缩后大小保持在30KB 2.选择器强大. 3.DOM操作封装. 4.可靠地事件处理机制. 5.完善的Ajax. 库类型 jquery.js(开发版) 约229kb,用于学习和开发. jquery.min.js(生产版) 约31kb,

jquery学习之AJAX

1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与server交换数据并更新部分网页的艺术,在不又一次载入整个页面的情况下. 2,什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步

jQuery学习笔记(2014年8月3日)事件委派

jQuery中的事件委托是通过 closest() 来完成的. closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. 参考资料: jQuery 遍历 - closest() 方法http://www.w3school.com.cn/jquery/traversing_closest.asp jQuery学习笔记(2014年8月3日)事件委派

jquery学习之概述

jquery库的概述 jquery是继承Prototype之后的又一个优秀的Javascript库,由美国人Jone Resig创建于2006年1月,包括核心库,UI和插件等几部分,其宗旨是Writes less, do more. 官方网站:http://jquery.com/ jquery的版本分为压缩版(*.min.js)和非压缩版(*.js),压缩版供直接使用,非压缩版供调试使用,提供了插件供其它开发工具用作智能提醒. 一:核心函数jQuery,可以简写为$ 函数 功能 jQuery(e

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ