jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。本文主要介绍日常工作中常用的JQ遍历,
帮助一下初学者快速的接触遍历函数,提高自己的代码编写速度,写出更简洁更实用的代码,
祝前端的同学们,在前端这条没有尽头的路上渐行渐远。
如果有什么不对的地方 大家多提意见 互相学习 相互参考!!!
1.each()
 
语法:$(selector).each(function(index,element))
  实例:$('li').each(
    $(this).css(color,#c10000);
  )
  拆分一个数组,并为每个数组中的匹配元素,定义方法。
2.eq()
 语法:.eq(index) //index代表的是整数 最小为0 代表第一个对应元素
实例:$("#nav ul").find("li").eq(2).addClass("blod"); //找到id为nav 里面的ul里面的li 找到第3个li并为它加上一个.blod样式.
  
  通常找到的li 都是一个数组 eq() 方法是把其中你想要的那个单独提出来进行修改 样式增加

3.find()
  语法:.find(selector) //selector代表的是字符串值,包含供匹配当前元素集合的选择器表达式。
  实例:$("#nav ul").find("li").addClass("blod"); //找到id为nav 里面的ul里面的所有li并为它加上一个.blod样式.  
   方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
4.next(selector)
 语法:.next(selector)
//seLector代表的是字符串值,包含用于匹配元素的选择器表达式。
 实例:$("#nav ul").next("div") //找到id为nav 里面的ul 找到ul标签下面的第一个div标签
  
  next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。
5.first()
 语法:.first()
 实例:$("#nav ul").first("li").addClass("blod"); //找到id为nav 下的ul下的li 找到第1个li并为它加上一个.blod样式.
  
  first() 将匹配元素集合缩减为集合中的第一个元素。

6.parent()

 语法:.parent(seletor) //seLector代表的是字符串值,包含用于匹配元素的选择器表达式。
 实例:$("#nav ul").parent("div").addClass("blod"); //找到id为nav 下的ul的父级元素div 为它加上一个.blod样式.  
  parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的。
7.parents()
 语法:.parents(seletor)
 实例:$("#nav ul").parents("div").addClass("blod"); //找到id为nav 下的ul的祖先元素div 为它加上一个.blod样式.
parents() 获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的。 8、siblings()   
 语法:.parents(seletor) 
 实例:$("#nav ul").first("li").siblings().addClass("blod"); //找到id为nav 下的ul的第一个li 为除了这个li以外的所有加上一个.blod样式.
  siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。
转载请注明出处~~ snper博客园

 

jQuery常用 遍历函数的更多相关文章

  1. js+jquery 常用选择器函数

    一.获取当前标签 JS: this,如下: <button onclick="fun(this)"></button> Jquery,如下: $(" ...

  2. jQuery常用操作方法及常用函数总结

    一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName ...

  3. jQuery中常用的函数方法

    jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...

  4. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  5. jQuery中常用的函数方法总结

    jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法.个人认为在开发中会比较常用的,仅供大家学习和参考. 事件处理 ready(fn) 代码: $(document).rea ...

  6. jquery 常用选择器和方法以及遍历(超详细)

    jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...

  7. jQuery中10个非常有用的遍历函数

    使用jQuery,可以 很容易的选择HTML元素.但有些时候,在HTML结构较为复杂时,提炼我们选择的元素就是一件麻烦的事情.在这篇教程中,我们将探讨十种方 法去精炼和扩展我们将要操作的集合. HTM ...

  8. jQuery 遍历函数

    转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...

  9. jQuery 遍历函数(w3school)

    jQuery 遍历函数包括了用于筛选.查找和串联元素的方法.   函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .childr ...

随机推荐

  1. 牛客 黑龙江大学程序设计竞赛重现 19-4-25 D

    题意: n项工作 1~n  工时s[i] ~e[i], 工时有覆盖的工作不能被同一台机器同时操作, 问完成所有工作的最少机器数 思路:前缀差分和 e.g. a            2 3 4    ...

  2. Asp.net core Identity + identity server + angular 学习笔记 (第三篇)

    register -> login 讲了 我们来讲讲 forgot password -> reset password  和 change password 吧 先来 forgot pa ...

  3. iphone上mitmproxy证书设置

    PC端安装mitmproxy并添加证书后,基本问题不大,都能正常运行起来 手机端iphone上下载安装mitmproxy证书: 1.手机和PC在同一个局域网中,设置wifi代理为PC端的ip,端口为m ...

  4. 使用XStream解析复杂XML并插入数据库(一)

    环境: Springboot+mysql 我只想说jpa真的超级好用,准备深入研究一下~ 导入依赖: <dependency> <groupId>org.projectlomb ...

  5. Vue2全家桶之一:vue-cli(vue脚手架)超详细教程

    本文转载于:https://www.jianshu.com/p/32beaca25c0d   都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到 ...

  6. [转]关于Megatops BinCalc RPN计算器的说明

    最近收到几个好心人发来的邮件,指出我的BinCalc存在低级BUG,即1+1算出来不等于2--鉴于存在这种误解的人之多,俺不得不爬出来澄清一下--我的Megatops BinCalc当中的计算器是RP ...

  7. react - next.js 设置body style

    因为next.js可以用pages文件夹中的js文件进行route,所以不需要public文件夹和html,因此没有body tag. body自带8px的maigin,我想要给整个页面设置背景颜色, ...

  8. 笔记《JavaScript 权威指南》(第6版) 系统理论知识概要

    主要内容概要 [JavaScript语言核心]词法结构,类型.值和变量,表达式和运算符,语句,对象,数组,函数,类和模块,正则表达式的模式匹配,JavaScript的子集和扩展,服务器端JavaScr ...

  9. MySQL—ORM框架,sqlalchemy模块

    武老师博客:ORM框架介绍 import os #1.当一类函数公用同样参数时候,可以转变成类运行 - 分类 #2.面向对象: 数据和逻辑组合在一起了 #3. 一类事物共同用有的属性和行为(方法) # ...

  10. CentOS 7 常用命令大全

    CentOS7 常用命令集合 这两天一直在对CentOS 7.2进行初体验,各种学习命令肿么用,不过其实大多和DOS是一样的,只是命令的表达上可能有点儿不一样,毕竟这些都不是一家出来的嘛~ 废话不多说 ...