详解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 相关文章推荐
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jquery添加div实现消息聊天框
Feb 08 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将回调函数作用到给定数组单元的方法
2014/08/19 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
采购类个人求职的自我评价
2014/02/18 职场文书
连带责任保证书
2014/04/29 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
如何撰写促销方案?
2019/07/05 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python