详解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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery实现垂直手风琴导航栏
Feb 18 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
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
厂办主管岗位职责范本
2014/02/28 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
SQL SERVER触发器详解
2022/02/24 SQL Server