zoukankan      html  css  js  c++  java
  • jQuery常用 遍历函数

    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博客园
    
    
     
  • 相关阅读:
    介绍axios和promise
    vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?
    vue中什么是模块 什么是组件?
    Android前沿技术
    移动端不利用HTML5和echarts开发一样可以实现大数据展示及炫酷统计系统(产品技术综合)
    腾讯X5WebView集成及在移动端中使用
    ApowerMirror投屏(手机投屏电脑、电脑投屏到手机)
    Android架构篇--MVP模式的介绍篇
    MVC,MVP 和 MVVM 的图示
    2018下半年Android面试历程
  • 原文地址:https://www.cnblogs.com/web-snper/p/9040309.html
Copyright © 2011-2022 走看看