详解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实现鼠标经过显示动画边框特效
Mar 24 jQuery
如何编写jquery插件
Mar 29 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
Jquery Fade用法详解
Nov 06 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
html中两种获取标签内的值的方法
Jun 16 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
德劲1107的电路分析与打磨
2021/03/02 无线电
php 特殊字符处理函数
2008/09/05 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python代码过长的换行方法
2018/07/19 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python自动化之Ansible的安装教程
2019/06/13 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
优秀小学生家长评语
2014/01/30 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
村党支部书记承诺书
2014/05/29 职场文书
个人四风对照检查材料
2014/09/26 职场文书
2014年档案室工作总结
2014/12/01 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
深入理解go slice结构
2021/09/15 Golang