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. php安全开发(1)文件包含漏洞

    开发过程总结的漏洞: 一,,如何造成包含漏洞:在通过函数包含文件时,由于没有对包含的文件名进行有效的过滤处理,被攻击者利用从而导致了包含了Web根目录以外的文件进来,就会导致文件信息的泄露甚至注入了恶 ...

  2. ranch 源码分析(完)

    接上 ranch 源码分析(三) 在上一次,根据ranch源码把大概流程理了一遍,下面我们将一些细节解释一下. ranch只是一个服务的框架,它提供了传输层协议代码(ranch_tcp 和ranch_ ...

  3. Django web框架-----win10搭建django2.1.7开发环境,定义简易视图及网址

    ① 安装Django 使用pip命令或者pycharm setting的project Interpreter工具添加安装 检查是否安装成功,以下命令无报错即成功: 查看安装的Django版本号的两种 ...

  4. springboot返回页面

    1.使用@Controller注解: @Controller必须配合模板 先导入依赖: <dependency> <groupId>org.springframework.bo ...

  5. 用python代码模拟登录网站

    方法一:直接使用已知的cookie访问 特点: 简单,但需要先在浏览器登录 具体步骤: 1.用浏览器登录,获取浏览器里的cookie字符串 先使用浏览器登录.再打开开发者工具,转到network选项卡 ...

  6. 新手vue构建单页面应用实例

    本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 步骤: 1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请 ...

  7. zzw_非root用户安装python3.5

    目的:不想改变linux 自带的python,只想要用特定的非root用户运行特定版本的python 1.进入非root用户 2.新建一个python3.5的安装目录 [a4_csbdc@bdc816 ...

  8. 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果

    一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...

  9. VC调用外部程序

    #include <windows.h> int main() { STARTUPINFO mStatusInfo; memset(&mStatusInfo, 0, sizeof( ...

  10. react-redux-数据流

    redux是严格的单向数据流 1,store.dispatch(action) 2, reducer(previousState, action), reducer是纯函数.它仅仅用于计算下一个 st ...