详解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和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery编写QQ简易聊天框
Aug 27 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python中DJANGO简单测试实例
2015/05/11 Python
Python简单的制作图片验证码实例
2017/05/31 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
妇产科护士自我鉴定
2013/10/15 职场文书
九一八事变演讲稿
2014/09/05 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
欠条样本
2015/07/03 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
Ruby处理YAML和json数据
2022/04/18 Ruby