详解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处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jQuery实现tab栏切换效果
Dec 22 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中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
零基础php编程好学吗
2019/10/11 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
vue.js指令v-model实现方法
2016/12/05 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
使用JS动态显示文本
2017/09/09 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
Python转码问题的解决方法
2008/10/07 Python
python 不关闭控制台的实现方法
2011/10/23 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
对python中的logger模块全面讲解
2018/04/28 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
饭店工作计划书
2014/01/10 职场文书
火箭队口号
2014/06/18 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
晚会开场白和结束语
2015/05/29 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
团结友爱主题班会
2015/08/13 职场文书
生日寿星公答谢词
2015/09/29 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript