jQuery----each()方法
jquery中有隐式迭代，不需要我们再次对某些元素进行操作。但是如果涉及到不同元素有不同操作，需要进行each遍历。本文利用10个li设置不同的透明度的案例，对each方法进行说明。
语法：
$(元素).each(function(index,element){ });
参数index：表示元素索引，在本例中是0-9
参数element：表示对象，在本例中是每个li
案例效果：
代码如下
<!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()方法的更多相关文章
- Django配合使用Jquery post方法
Django使用jQuery的post方法需要解决两个问题: 1.Django中为了防止跨站请求,在post提交时都会带上csrf_token,利用Jquery进行post请求也需要:否则就会出现40 ...
- jQuery on()方法
jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...
- jquery ajax 方法及各参数详解
1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type ...
- jquery.extend方法
jquery.extend()用来扩展jquery中方法,实现插件. 1.jQuery.extend函数详细用法! 扩展jQuery静态方法. 1$.extend({ 2test:function() ...
- jQuery extend方法使用及实现
一.jQuery extend方法介绍 jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样 ...
- 优化加载jQuery的方法
请看下面的一段代码: <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ...
- C#实现jQuery的方法连缀
jQuery的方法连缀使用起来非常方便,可以简化语句,让代码变得清晰简洁.那C#的类方法能不能也实现类似的功能呢?基于这样的疑惑,研究了一下jQuery的源代码,发现就是需要方法连缀的函数方法最后返回 ...
- jQuery原型方法each使用和源码分析
jQuery.each方法是jQuery的核心工具方法之一,通用例遍方法,可用于例遍对象和数组.不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象.通常需要两个参数 ...
- jQuery.clean()方法源码分析（一）
在jQuery 1.7.1中调用jQuery.clean()方法的地方有三处,第一次就是在我之前的随笔分析jQuery.buildFramgment()方法里面的,其实还是构造函数的一部分,在处理诸如 ...
- MVC中使用Ajax提交数据 Jquery Ajax方法传值到action
Jquery Ajax方法传值到action <script type="text/javascript"> $(document).ready(function(){ ...
随机推荐
- 八、Web移动端Fixed布局的解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...
- javascript 关于new()继承的笔记
近期的一些学习总结,如有错误不严谨地方,希望指正! 使用new操作符会有如下操作: 1.创建一个对象temp = {}, 2. temp.__proto__ = A.prototype, 3. A.c ...
- Vue2学习笔记:过渡效果css
过渡效果 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡 <!DOCTYPE html> <html ...
- Vue2学习笔记:键盘事件
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
- 要提高SQL查询效率where语句条件的先后次序应如何写
我们要做到不但会写SQL,还要做到写出性能优良的SQL语句. (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句 ...
- .net验证是否合法邮箱和ip地址的方式
通常情况下第一时间会想到使用正则表达式去验证,但由于正则表达式过于复杂或者没有考虑到某些情况,从而导致问题或者判断的效率低.下面通过另一种方式去判断. 判断是否合法邮箱: /// <summar ...
- 数据库复制 Nacicate Premium
之前都是“备份-还原”,抑或“导出-导入”.今天在将SqlServer中的数据导入到MySql中时发现了一个非常方便的方法,无需任何繁琐的配置和操作.废话少说,进入正题: 工具:Navicat Pre ...
- Error loading XML document: dwz.frag.xml 处理方式
问题:直接用IE打开index.html弹出一个对话框:Error loading XML document: dwz.frag.xml 方案一(已经验证): 转自:http://blog.csdn. ...
- CMD命令行窗口 复制黏贴
1.在cmd命令窗口空黑处,单击鼠标右键——选择[标记]——单击鼠标左链拖动选择要复制的文字,[再按一下Eenter键]就完成了命令的复制了. 2.粘贴就更简单了,窗口内单击右键——选择[粘贴],就将 ...
- 工作总结 [all]
2. 工作总结 3. 面试经验 4. 其他