详解jQuery-each()方法


Posted in jQuery onMarch 13, 2019

jquery中有隐式迭代,不需要我们再次对某些元素进行操作。但是如果涉及到不同元素有不同操作,需要进行each遍历。本文利用10个li设置不同的透明度的案例,对each方法进行说明。

 语法:

$(元素).each(function(index,element){ });

参数index:表示元素索引,在本例中是0-9

参数element:表示对象,在本例中是每个li

案例效果:

详解jQuery-each()方法

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      li{
        width: 100px;
        height: 100px;
        background-color: green;
        list-style: none;
        float: left;
        margin-left: 10px;
      }
    </style>

    <script src="jquery-1.12.2.js"></script>
    <script type="text/javascript">
      $(function(){
        //页面加载后,让每个li的透明度发生改变
        $("li").each(function(index,element){
          //第一个参数是索引,第二个参数是对象
          $(element).css("opacity",(index+1)/10);
        })
      });
    </script>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </body>
</html>

以上所述是小编给大家介绍的jQuery-each()方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 #jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 #jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
[jQuery] 事件和动画详解
Mar 05 #jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 #jQuery
You might like
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP常用处理静态操作类
2015/04/03 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
php实现图片压缩处理
2020/09/09 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
详解VUE 数组更新
2017/12/16 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
python os.path模块常用方法实例详解
2018/09/16 Python
python异常处理和日志处理方式
2019/12/24 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
python定义类的简单用法
2020/07/24 Python
搞笑获奖感言
2014/01/30 职场文书
便利店投资创业计划书
2014/02/08 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
幼儿园标语大全
2014/06/19 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
发票退票证明
2015/06/24 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
Python OpenCV之常用滤波器使用详解
2022/04/07 Python
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle