一、遍历

  1、向下遍历,children、find

  children只能向下遍历儿子节点的所有元素,find遍历当前元素下面的所有子节点

  2、向上遍历,parent,parents,parentsUntil

  parent只遍历当前节点的父节点,parents遍历当前节点的所有父级节点,parentsUntil表示区间,从当前节点向上到parentsUntil指向的元素中间的节点

$("a").parentsUntil("#div1").css("border","5px solid yellow");

  如图效果:

  3、同级遍历,sibings(),next(),nextAll(),nextUntil(),pre(),preAll(),preUntil()

  $("h4").sibings().css("border","3px solid yellow"),表示除了元素h4外的同级元素都修改css的边框样式

  $("h4").next().css("border","3px solid yellow"),表示修改元素h4的下一个同级元素的css边框样式

  $("h4").nextAll().css("border","3px solid yellow"),表示修改h4下的所有同级元素的css边框样式

  $("h4").nextUntil("h6").css("border","3px solid yellow"),表示修改元素h4到元素h6中间的同级元素的边框样式

  $("h4").pre().css("border","3px solid yellow"),表示修改元素h4上面的一个同级元素的边框样式

  $("h4").preAll().css("border","3px solid yellow"),表示修改元素h4上面所有同级的元素的边框样式

  $("h4").preUntil("h1").css("border","3px solid yellow"),表示修改从元素h4向上到元素h1直接的同级元素的边框样式

二、元素过滤

  first,last,eq,filter,not

  $("div p").first().css("background-color","red");表示修改同样元素div下p元素第一个元素的背景颜色

  $("div p").last().css("background-color","red");表示修改同样元素div下p元素最后一个元素的背景颜色

  $("div p").eq(0).css("background-color","red");表示修改同样元素div下p元素第一个元素的背景颜色,0表示第一个,以此类推

  $("div p").filter("p").css("background-color","red");filter表示一个标准,满足是p元素的集合

  $("div p").not("p").css("background-color","red");not与filter的效果是相反的

  

JQuery的一些简单操作02的更多相关文章

  1. MySQL基本简单操作02

    MySQL基本简单操作 先进入Mysql容器. [root@promote ~]# docker exec -it mysql /bin/bash root@30d60b852cf5:/# mysql ...

  2. JQuery的一些简单操作01

    一.JQuery的隐藏和显示效果 1.hide/show/toggle hide隐藏效果,hide(1000)括号里面跟毫秒,show显示效果同样后面括号可以有数值,toggle开关按钮,交替作用隐藏 ...

  3. Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作

    Visual Studio 2017中使用正则修改部分内容   最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...

  4. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  5. jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  6. 【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用

    这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...

  7. 使用Struts2和jQuery EasyUI实现简单CRUD系统(转载汇总)

    使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...

  8. 强大的JQuery(三)--操作html与遍历

    前两篇博客讲到了JQuery的基础知识以及其动画效果,本篇将为大家介绍jquery操纵html以及jquery的遍历. 一.jquery操作html 1.获取内容和属性 text() - 设置或返回所 ...

  9. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

随机推荐

  1. el: 在jsp页面内使用函数判断子字符串

    e.g. <c:forEach items="${datas}" var="data"> <c:if test="${not fn: ...

  2. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  3. ionic 的下拉刷新 与 上拉加载

    <ion-view view-title="消息通知"> <ion-content class="padding"> <!-- & ...

  4. [整]磁盘 I/O 性能监控指标和调优方法

    在介绍磁盘 I/O 监控命令前,我们需要了解磁盘 I/O 性能监控的指标,以及每个指标的所揭示的磁盘某方面的性能. 磁盘 I/O 性能监控的指标主要包括: 指标 1:每秒 I/O 数(IOPS 或 t ...

  5. CSS基础3

    1.变形样式 transform : none | <transform-function>,改变元素的大小,透明,旋转角度,扭曲度等.<transform-function> ...

  6. 常用的web功能测试方法

    功能测试就是对产品各功能进行验证,根据功能测试用例,逐项测试,检查产品是否达到用户要求功能,即是否满足需求.常用的测试方法如下: 1.页面连接检查:每一个连接是否都有对应的页面,并且页面之间切换正确. ...

  7. winform学习笔记-文档路径

    获取应用程序路径 //获取当前进程的完整路径,包含文件名(进程名).string str = this.GetType().Assembly.Location;result: X:\xxx\xxx\x ...

  8. 如何通过命令行创建和设置一个MySQL用户

    我想要在MySQL服务器上创建一个新的用户帐号,并且赋予他适当的权限和资源限制.如何通过命令行的方式来创建并且设置一个MySQL用户呢? 要访问一个MySQL服务器,你需要使用一个用户帐号登录其中方可 ...

  9. 《数据结构》2.3单链表(single linked list)

    //单链表节点的定义 typedef struct node { datatype data; struct node *next; }LNode,*LinkList; //LNode是节点类型,Li ...

  10. Xcode快捷键

    1. 文件 CMD + N: 新文件 CMD + SHIFT + N: 新项目 CMD + O: 打开 CMD + S: 保存 CMD + SHIFT + S: 另存为 CMD + W: 关闭窗口 C ...