jquery循环操作

each遍历

用法一、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
        <li>第四章</li>
        <li>第五章</li>
    </ul>
<script src="jquery-1.8.2.js"></script>
<script>
//    为每个匹配的li元素运行一个函数
//      $(selector).each(function(index,element))
//      index - 选择器的 index 位置
//      element - 当前的元素(也可使用 "this" 选择器),如<li>第一章</li>
    $("li").each(function (i,item) {
        console.log(i)
        console.log(item)
    })
</script>
</body>
</html>

  

用法二、

$.each(data,function(index,element){})

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <ul>        <li>第一章</li>        <li>第二章</li>        <li>第三章</li>        <li>第四章</li>        <li>第五章</li>    </ul><script src="jquery-1.8.2.js"></script><script>//    查询到所有的li元素    var sel = $("li");//    对查询结果循环    $.each(sel, function (index, ele) {        console.log(index,ele)    })</script></body></html>

  

时间: 2024-10-15 02:41:43

jquery循环操作的相关文章

前端——基础

HTML html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写 意思是超文本标记语言, 超文本指的是超链接, 标记指的是标签 html注释 <!-- 这是一段注释 --> html标题标签 <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> html段落标签.换行标签与字符实体 html段落标签 <p>一

jQuery.extend()方法和jQuery.fn.extend()方法

jQuery.extend()方法和jQuery.fn.extend()方法源码分析 这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: <!doctype html> <html> <head> <title></title> <script src='jquery-1.7.1.js'></script> <

锋利的jQuery读书笔记 第11章

第十一章 一.jQuery性能优化 1.使用最新版本的jQuery类库 2.使用合适的选择器 3.缓存对象 4.循环操作DOM时,尽可能减少DOM操作 5.建议使用简单for()或者while()循环来出处理,而不是$.each() 6.使用事件代理 7.将你的代码转化成jQuery插件 8.使用join()来拼接字符串 9.合理利用HTML5的Data属性 10.尽量使用原生的JavaScript方法 二.jQuery技巧 参考书p318

jquery 操作对象和集合

1.$.trim(str)删除传入的字符串前后的空格.换页.制表.换行.回车等特殊字符.原始字符串str的值不会改变,返回改变后的新值. 2.$.each(container,callback)迭代器,对container集合进行循环操作.callback是每迭代集合体的一个对象需要执行的函数,可以存在两个参数:var arr=new Array("one","two","three");$.each(arr,function(index,nam

Jquery的$(selector).each()和$.each()原理和区别

我们都用过Jqurey中的each函数,都知道each()有两种方式去调用,一种是通过$.each()调用,另一种是$(selector).each()去调用,那么它们之间有什么区别? 翻看一下Jquery源码就会知道,$.each()是核心的实现,$(selector).each()是调用的$.each(),先来分析一下$.each()的源码(在底部):  each(obj,callback,args)函数接收3个参数:obj--要遍历的对象或数组.callback--要遍历执行的回调函数.a

js学习总结----jquery常用方法

http://jquery.cuishifeng.cn(可以看一下他的手册) 1.jQuery的回调函数 function fn1(value){ console.log('fn1函数'+value) } function fn2(value){ console.log('fn2函数'+value) } var $call = $.CallBacks();//创建一个回调函数的列表集合 $call.add(fn1)//向集合中增加一个叫做fn1的函数 $call.fire(100);//触发fi

JQuery相关基础

原生javascript与jquery方法不能同时混合使用 1.操作属性    attr:    $('xxx').attr('属性')        //一个参数是获取属性        $('xxx').attr('属性','xxx')    //两个参数是设置属性    filter:    $('XXX').filter('xx')        //筛选,过滤        $('XXX').filter('[title=XX]')    not:    $('XXX').not('x

JQuery源码解析-JQuery的工具方法(4)

下面对这些方法进行讲解 each():遍历集合 trim():去前后空格 makeArray():类数组转换真数组 inArray():数组版indexOf merge():合并数组 grep():过滤新数组 map():映射新数组 each方法: each是遍历集合用的方法,也是一个加强版的循环操作.例如: var arr = { Name: 'jam', Age: 15 }; $.each(arr, function (key, val) { console.log(key + ":&quo

【Web前端】jQuery界面优化

随着互联网的发展,网站的前端界面会越来越重要,它关注的是用户的直接体验.市场上同类型的网站越来越多,一个比其他同类网站更流畅.优雅的界面能让用户摈弃你的竞争对手.所以,让自己的网站前端运行的更快.界面更优美成为了一个重要的话题.从而,前端界面优化技术也成为了优秀前端开发人员必备的技能,这是核心竞争力. 今天介绍的是jQuery这个流行的前端javascript开发框架里的一些优化技术,这些优化技术需要我们深入理解JavaScript以及Web浏览器中DOM与JavaScript引擎关系. 减少D