详解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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现简单三级联动效果
Sep 05 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
?生?D片??C字串
2006/12/06 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
JS执行控制之节流模式实例分析
2018/12/21 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
python ddt实现数据驱动
2018/03/14 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Python之多进程与多线程的使用
2021/02/23 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
专升本自我鉴定
2013/10/10 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android