详解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请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 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
非常好用的Zend Framework分页类
2014/06/25 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
JavaScript运算符小结
2015/06/03 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
jquery实现数字输入框
2017/02/22 Javascript
js获取ip和地区
2017/03/10 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
详解python运行三种方式
2019/05/13 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
应届生幼儿园求职信
2013/11/12 职场文书
法人授权委托书范本
2014/04/04 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
七一建党节慰问信
2015/02/14 职场文书
自我检讨书怎么写
2015/05/07 职场文书
小学中队委竞选稿
2015/11/20 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android