• 第三章《遍历DOM元素》


      在本章节中我会给大家提到一些使用jQuery遍历DOM元素的方法。

      一、按索引筛选元素

      (1)$("selector").eq(index);  //.eq()方法 用于在匹配集合中得到index索引的元素,该方法在前面给大家介绍过。

      (2)$("selector").first();  //.first()方法 用于在匹配元素集合中获取第一个元素

      (3)$("selector").last();  //.last()方法 用于在匹配元素集合中获取最后一个元素

      (4)$("selector").slice(start[,end]);  //.slice()方法 用于在匹配元素集合中获取从索引start到end的所有元素,其中end参数可不传。

      二、筛选方法

      (1)$("selector1").filter("selector2");  //.filter()方法 用于在匹配selector1的元素集合中筛选出匹配selector2的元素集合。

      三、检查元素

      (1)$("selector1").is("selector2");  //.is()方法 用于在匹配selector1的元素集合中筛选出匹配selector2的元素集合,注:其实filter方法也是在调用is()方法实现。

      例:$("input#radio1").is(":checked");  //放回一个true或false

      四、映射数字

      (1)$("selector").map(callback(index,domElement));  //.map()方法 用于将当前匹配元素集合中的每一个元素传入回调函数(callback)中,并返回一个新的jQuery对象,也就相当于通过该方法重组匹配集合内容。其中index是元素索引,domElement是当前索引对应的jQuery对象。

      五、移除对象

      (1)$("selector").not(expr);  //.not()方法 用于在匹配selector元素集合中移除指定的集合,expr可以为选择器(selector)也可以是一个函数,若为选择器则在selector集合中移除符合expr的集合;若expr为一个函数,则只有当当该函数返回true时才会移除当前索引对应的jQuery对象。

      六、搜索父元素

      (1)$("selector").parents([selector1]);  //.parents()方法 用于在匹配元素集合中找出所有元素的祖先(所有上级)元素。其中selector1参数是可选的,代表在所有祖先元素中进行二次筛选。

      例:$("#li_1").parents("div");  用于查找id为li_1的所有上级标签并且为div标签的对象集合。

      (2)$("selector").parentsUntil([selector1]);  //.parentsUntil()方法 用于在匹配集合中找出所有元素的祖先元素直至找到selector1为止,但不包含selector1。

      例:$("#li_1").parentsUntil("body");  //查找id为li_1的所有上级标签 直至找到body为止,但不包含body标签。

      (3)$("selector").parent([selector1]);  //.parent()方法 用于在匹配元素集合中找出其父元素的集合,其中selector1是可选参数,代表该父元素应该满足的条件。该方法与parents不同之处在于parents方法 查找的是多个层级 而parent方法只搜索了一个层级。

      (4)$("selectro").closest(selector1[,context]);  //.closest()方法 用于从当前元素开始向上遍历DOM树并获取与选择器匹配的第1个元素。其中参数context是可选的 代表一个DOM元素,用于匹配该元素。

      例:$("li.item-a").closest("ul");  //访问一个应用了类item-a的li标签,查找其上面的第一个ul标签对象。

      (5)$("selector").offsetParent();  //.offsetParent()方法 用于搜索符合selector的上级的第一个已定位(含有position:relative、absolute或fixed属性)的元素

      七、搜索同辈元素

      (1)$("selector").next([selector1]);  //.next()方法 获取匹配元素之后的单个同辈元素,可选参数selector1是对同辈元素的筛选。

      (2)$("selector").nextAll([selector1]);  //.nextAll()方法 获取匹配元素之后的所有同辈元素,可选参数selector1是对同辈元素的筛选。

      (3)$("selector").nextUntil([selector1]);  //.nextUntil()方法 获取匹配元素之后的所有同辈元素直至符合selector1条件为止。

      (4)$("selector").prev([selector1]);  //.prev()方法 获取匹配元素之前的单个同辈元素,与.next()方法相反

      (5)$("selector").prevAll([selector1]);  //.prevAll()方法 获取匹配元素之前的所有同辈元素,与.nextAll()方法相反

      (6)$("selector").prevUntil([selector1]);

      (7)$("selector").siblings([selector1]);  //.siblings()方法 获取匹配元素的所有同辈元素

      八、搜索子元素

      (1)$("selector").children([selector1]);  //.children()方法 获取匹配元素的子元素集合,可以通过可选参数selector1进行进一步的筛选。

      (2)$("selector").contents();  //.contents()方法 获取每个匹配元素中的所有子节点(包括文本节点)或文档内容(正对iframe元素,可以获得其内嵌页面的html)。

      (3)$("selector").find(selector1);  //.find()方法 在匹配selector元素集合中查找匹配元素集合selector1的元素集合。

      例:$("div").find("span");  在所有的div标签中找到其中的所有span标签。

      九、添加元素

      (1)$("selector").add(selector1[,context]);  //.add()方法 该方法是在匹配元素集合中添加selectior1元素,与not()方法的作用相反。其中selector1可以是一个jQuery对象、DOM对象以及HTML标签。而可选参数context是指定要插入上下文的位置。

      十、串联操作

      (1)$("selector").end();  //.end()方法  主要是用于恢复到上一次结构改变前的状态(当我们对一个集合进行多次筛选时会不对的该表集合的结构)。

      例:$("li").next().end()<==>$("li")

      (2)$("selector").andSelf();  //.andSelf()方法 主要是将先前选择的元素添加到当前选择的元素集合中。

      例:$("#xxx").nextAll().andSelf(); //代表id为xxx的元素 和其之后所有同辈元素的总和。

      十一、对象操作

      (1)$.each(collection,callback(indexInArray,valueOfElement));  //.each()方法  用于遍历collection数组 ,其中callback是回调函数 注:该方法与$("selector").each(function(){})不同,$.each()方法可以遍历所有的的数组,而$("selector").each(function(){});只能遍历jQuery对象数组。

      (2)$.contains(container,contained);  //.contains()方法 用于检测一个contained对象是否包含在container对象中,若包含返回true否则返回false。

      例:$.contains($("div")[],$("p")[0]);  //检测第一个p标签是不是在第一个div标签内。

      (3)$.isEmptyObject(object);  //.isEmptyObject()方法 用于判定一个对象是否为空(不包含任何属性的对象为空),若为空返回true

      例:$.isEmptyObject({});  //返回 true 

           $.isEmptyObject({foo:"bar"});  //返回false

      (4)$.isPlainObject(object);  //.isPlainObject()方法 用于判定object是否为一个普通对象(如:“{}”或者 new Object对象)。

      (5)$.isXMLDoc(node);  //.isXMLDoc()方法 用于判定node节点师傅位于一个XML文档中(或是否为文档)

      (6)$.extend(target,object1);  //.extend()方法 将两个或多个对象的内容合并到第一个对象target中,以实现第一个对象的扩展并返回被修改的对象。

      例:$.extend({foo:"aa"},{bar:"bb"});  //结果为:{foo:"aa",bar:"bb"}

      十二、数组处理

      (1)$.grep(array,function(elementOfArray,indexInArray));  //.grep()方法 此方法是从一个数组中查找满足指定筛选函数的元素,但不回音响原始数组。其中array是待遍历的数组,function方法是用来进行筛选的函数。最后得到的数组均是该函数返回值为true的元素组成的数组。

      (2)$.inArray(value,array);  //.inArray()方法 此方法是在array数组中查找值为value的元素 索引,若没有找到返回-1

      (3)$.makeArray(obj);  //.makeArray()方法 该方法是将obj对象转化为真正的javascript数组。

      (4)$.map(array,callback(elementOfArray,indexInArray));  //.map()方法 该方法是将数组array中的元素值通过函数callback转换。

      (5)$.merge(first,second);  //.merge()方法 该方法是将两个数组进行合并,最后返回修改后的第一个数组。

      (6)$.unique(array);  //.unique()方法 用于取出array数组中的重复项。

      (7)$.isArray(obj);  //.isArray()方法 用于判断obj是否是一个数组。

      (8)$(selector).toArray();  //.toArray()方法 该方法是将匹配元素集合中的所有DOM元素恢复为一个数组。

      (9)$.parseJSON(json);  //.parseJSON()方法 该方法是对一个JSON字符串进行解析并返回生成的JavaScript对象。

      例:var user=$.parseJSON('{"name":"张三"}');

           alert(user.name);  //弹出"张三"

      十三、函数处理

      (1)$.globalEval(code);  //.globalEval()方法 该方法用于执行全局JavaScript代码.

      例:$.globalEval("var msg="hello!";");

        $.globalEval("alert(msg);");

      (2)$.isFunction(obj);  //.isFunction()方法 用于检测obj对象是否为一个函数

      (3)$.proxy(function,context);  //.proxy()方法 此方法接受一个函数funciton,并返回一个具有特定上下文context的新函数。

      例:var obj={name:"张三",test:funciton(){alert(this.name);}};

        $("#test").click($.proxy(obj.test,obj));

      (4)$.noop();  //.noop()方法 该方法返回一个空函数,在有些方法调用是需要传入函数,但有些特殊情况是需要传入空函数的。那么这个函数就派上用场了。

      十四、字符串处理

      (1)$.trim(str);  //.trim()方法 取出str两端的空格。

      十五、数据存储

      (1)$(selector).data(key,value/obj/key/无);  //.data()方法 可用于存储与匹配元素相关联的任意数据并返回jQuery对象

      例:$("body").data("foo",52);

        $("body").data("bar",{myType:"test",count:40});

        $("body").data("foo");   //得到 值 52

        $("body").data();    //得到:{foo:52,bar:{myType:"test",count:40}}

      (2)$(selector).removeData([name]);  //.removData()方法 用于移除先前在元素中存储的数据并返回jQuery对象,其中name是可选参数,用于指定要删除的数据。若不指定则删除所有数据。

      十六、检测浏览器

      (1)$.browser  //.browser属性 该属性可以获得当前浏览器的版本信息

      例:if($.browser.msie) alert("浏览器是IE:"+$.browser.version);

        if($.browser.mozilla) alert("浏览器是Firefox:"+$.browser.version);

      (2)$.support  //.support属性  该属性用于战士不同浏览器各自特性和bug的集合

    到这已将jQuery中常用的《遍历DOM元素》方法进行了罗列,后面会罗列出一些《jQuery文档处理》方法。

  • 相关阅读:
    剑指Offer-49.把字符串转换成整数(C++/Java)
    codeforces Gym 100338H High Speed Trains (递推,高精度)
    codeforces Gym 100338E Numbers (贪心,实现)
    codeforces Gym 100338C Important Roads (重建最短路图)
    HDU 4347 The Closest M Points (kdTree)
    UVA 10817
    HDU 4348 I
    HDU 4341 Gold miner (分组背包)
    UVA 1218
    UVA 1220 Party at Hali-Bula (树形DP)
  • 原文地址:https://www.cnblogs.com/zyj469470971/p/2355890.html
Copyright © 2020-2023  润新知