04.jQuery 遍历

  • jQuery遍历

  1. DOM:Document Object Model 文档对象模型;
  2. 通过 jQuery 遍历,可以从被选(当前的)元素开始,在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞);
  3. 遍历方法中最大的种类是树遍历(tree-traversal);

  • jQuery遍历方法

方法 释义 语法
.add() 将元素添加到匹配元素的集合中 .add(selector/elements)
.andSelf() 把堆栈中之前的元素集添加到当前集合中 .andSelf()
.children() 获得匹配元素集合中每个元素的所有子元素 .children(selector)
.closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素(0/1个) .closest(selector)
.contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点 .contents()
.each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数 $(selector).each(function(index,element))
.end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态 .end()
.eq() 将匹配元素集合缩减为位于指定索引的新元素(index为正则从前向后索引,index为负则从后向前索引) .eq(index)
.filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 .filter(selector/function)
.find() 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选 .find(selector)
.first() 将匹配元素集合缩减为集合中的第一个元素 .first()
.has() 将匹配元素集合缩减为包含特定元素的后代的集合 .has(selector)
.is() 根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true .is(selector/function)
.last() 将匹配元素集合缩减为集合中的最后一个元素 .last()
.map() 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象 .map(callback(index,domElement))
.next() 获得匹配元素集合中每个元素紧邻的同辈元素 .next(-selector)
.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选) .nextAll(-selector)
.nextUntil() 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止 .nextUntil(selector/elements,filter)
.not() 从匹配元素集合中删除元素 .not(selector/elements)
.offsetParent() 获得用于定位的第一个父元素 .offsetParent()
.parent() 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选) .parent(selector)
.parents() 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选) .parents(-selector)
.parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止 .parentsUntil(selector/elements,filter)
.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选) .prev(-selector)
.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选) .prevAll(-selector)
.prevUntil() 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止 .prevUntil(selector/elements, filter)
.siblings() 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选) .siblings(selector)
.slice() 将匹配元素集合缩减为指定范围的子集(只有一个参数时,则从此到结尾;为负数时,则从后向前索引) .slice(start,end)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
    </head>
    <body>
        <div>
            <label>输入个数:</label>
            <input type="number" name="NumOfLi" id="NumOfLi" />
        </div>
        <ul></ul>
        <script type="text/javascript">
            $(document).ready(function(){
                //创建li
                $("#NumOfLi").change(function(){
                    $("ul").empty();
                    for(var i=0;i<$(this).val();i++){
                        $("ul").append(document.createElement("li"));
                    }
                    //设置li的样式
                    $("li").css({
                        "background-color":"grey",
                        "list-style":"none",
                        "height":"20px"
                    }).filter(":odd").css("background-color","gainsboro");
                });
                //设置lable的样式
                $("#NumOfLi").prev().css("margin","1em");
                //设置div的样式
                $("#NumOfLi").parent("div").css({
                    "border":"1px solid gray",
                    "border-radius":"1em",
                    "padding":"0.5em",
                    "background-color":"gainsboro"
                });
            });
        </script>
    </body>
</html>
image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 654评论 0 3
  • 请记得在进行JQuery类库的运用时,加入JQuery类库,并且要保证先写文档就绪函数 $(document).r...
    Sunshinemm阅读 2,905评论 1 40
  • jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由约翰·雷西格(...
    静候那一米阳光阅读 781评论 0 18
  • jQuery 遍历 什么是遍历?jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取...
    hx永恒之恋阅读 369评论 0 6
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,641评论 18 503