详解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表单验证(简单)
May 23 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery实现计算器功能
Oct 19 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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防止网站被攻击的应急代码
2015/10/21 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP getName()函数讲解
2019/02/03 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
javascript工具库代码
2012/03/29 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
图解javascript作用域链
2019/05/27 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
Python标准库之itertools库的使用方法
2017/09/07 Python
python reduce 函数使用详解
2017/12/05 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
新书吧创业计划书
2014/01/31 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
学校2014年度工作总结
2014/12/06 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
python​格式化字符串
2022/04/20 Python