jQuery自学笔记(五):关于jQuery的遍历

向上遍历 DOM 树

  • parent()  //返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历。
  • parents()    //返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>); 也可以使用可选参数来过滤对祖先元素的搜索,如: $("span").parents("ul");
  • parentsUntil()   // 返回介于两个给定元素之间的所有祖先元素,如:
     $("span").parentsUntil("div");

向下遍历 DOM 树

  • children()      //返回被选元素的所有直接子元素,该方法只会向下一级对 DOM 树进行遍历, 可以使用可选参数来过滤对子元素的搜索。例如:

$("div").children();      // 返回每个 <div> 元素的所有直接子元素

$("div").children("p.1");     // 返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素

  • find()   //  返回被选元素的后代元素,一路向下直到最后一个后代;例如:

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

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

在 DOM 树中水平遍历

  • siblings()     // 返回被选元素的所有同胞元素

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

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

  • next()     // 返回被选元素的下一个同胞元素。

$("h2").next();   // 返回 <h2> 的下一个同胞元素:

  • nextAll()   // 返回被选元素的所有跟随的同胞元素。

$("h2").nextAll();    // 返回 <h2> 的所有跟随的同胞元素:

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

$("h2").nextUntil("h6");    // 返回介于 <h2> 与 <h6> 元素之间的所有同胞元素:

  • prev()
  • prevAll()
  • prevUntil()

过滤遍历DOM树

  • first() 方法返回被选元素的首个元素,如:

$("div p").first();    // 选取首个 <div> 元素内部的第一个 <p> 元素:

  • last() 方法返回被选元素的最后一个元素。

$("div p").last();   // 返回被选元素的最后一个元素。

    • eq() 方法返回被选元素中带有指定索引号的元素, 索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。
    • filter() 方法允许您规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回,如:
       $("p").filter(".intro");
    • not() 方法返回不匹配标准的所有元素。
时间: 2024-10-10 17:46:55

jQuery自学笔记(五):关于jQuery的遍历的相关文章

jQuery:自学笔记(5)——Ajax

jQuery:自学笔记(5)--Ajax 使用Ajax快捷函数 说明 出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML,取决于返回值). $.get("test.php", function(data){   alert("Data Loaded: " + data); }); 2.向页面 test.php 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容): $.pos

jQuery:自学笔记(2)——jQuery选择器

jQuery:自学笔记(2)--jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font-size','18px') ID选择器 //使用id选择器改变背景颜色 $('#div1').css('background','red'); 说明:ID选择器中,ID前面必须加一个#,以表明这是一个jQuery的ID选择器. 类选择器 //使用类选择器设置字体样式 $('.spanclass')

jQuery自学笔记(三):jQuery动画效果

jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒,可选的 callback 参数是隐藏或显示完成后所执行的函数名称. 一个关于调用callback函数的实例: $("

jQuery自学笔记(四):jQuery DOM节点操作

获得和设置内容:text( ).html( ) 以及 val( ) text( ) - 设置或返回所选元素的文本内容 html( ) - 设置或返回所选元素的内容(包括 HTML 标记) val( ) - 设置或返回表单字段的值 例子: $("#btn1").click(function(){   $("#test1").text("Hello world!"); }); $("#btn2").click(function()

Jquery学习笔记:获取jquery对象的基本方法

jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery对象就是对dom对象的封装.整个jquery代码的主要工作就是获取相应的jquery对象,然后调用对象的各种方法进行操作.也就是获取jquery对象是编写代码的核心和基础. 通过jquery提供的方式,可以有很多种获取jquery对象的方法,下面会介绍一些常用的方式. 在jquery中,是通过各式各

jquery学习(五)-jquery中的事件

参考锋利的jQuery第二版 1.加载DOM (1)执行时机 若想为某个DOM元素绑定事件(或者是其他操作),这需要文档加载完成后才能进行绑定(或其他操作),否则会报错.所以对于这种情况,javascript提供了,window.onload方法:而jQuery提供了,$(document).ready()(简写为$())方法. 虽然这两个方法有类似的功能,但是执行的时机方面还是有区别的.Window.onload方法是在网页所有的元素(包括元素的所有关联文件)完全加载到浏览器后才能执行,即ja

Jquery学习笔记:利用jquery获取select下拉框的值

jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class="form-control" id="iv_level"> <option value="">店员</option> <option value="">店长</option>

jQuery整理笔记目录

jQuery整理笔记目录 jQuery整理笔记一----jQuery开始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔记四----jQuery操作DOM jQuery整理笔记五----jQuery事件 jQuery整理笔记六----jQuery动画 jQuery整理笔记七----几个经典表单应用 jQuery整理笔记八----jQuery的Ajax 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,