Heim > Web-Frontend > js-Tutorial > JQuery 学习笔记 选择器之二_jquery

JQuery 学习笔记 选择器之二_jquery

WBOY
Freigeben: 2016-05-16 18:49:29
Original
982 Leute haben es durchsucht

复制代码 代码如下:





无标题文档







    • 1

      2

      3

      4





















  • 显示DIV的后序结点ID
    显示DIV的子LI结点
    显示位于Label下一个input元素的value值
    显示于input1元素同级的label元素内容


    Result:







    先对上面代码中的课外知识点说明下
    1.element.attr("attributeName")
    描述:此方法用户获取某element元素的某个属性值,如例子中
    $("#div1 > li").each(function(){
    $("#Result").html($("#Result").html() + $(this).attr("id") + "," );
    })
    功能就是获取当前遍历到的element对象的id值;
    好了,现在开始来介绍本章的内容吧。本章主要讲的就是JQuery里如果去选择某个结点的子结点、兄弟结点等,不浪费时间啦,哈,现在进入正题
    1.$("Selector descendant")
    描述:此方法主要用于获取“Selector”选择器(注:此选择器为上一章讲的几个的任意一种)选择的Element对象或集合的子孙结点,就像例子中
    $("#aDescendant").click(function(){
    $("#Result").html("");
    $("#div1 ul").each(function(){
    $("#Result").html($("#Result").html() + $(this).html() + "," );
    })
    })
    功能就是获取id为div1元素的子孙节点里"ul"节点的HTMl内容,若“Selector”选择器返回的是个集合,则获取的子孙结点就是这个集合里,每个element匹配的子孙节点的集合
    返回值:Array(Element);
    2.$("Selector>child")
    描述:此方法与上一个方法类似,主要区别就是上个方法能获取所有的子孙节点,而这方法只能获取奇直属的子节点(多个“>”号就代表是直属的嘛^^),在此就不多说了,哈,其它都跟上一个一样
    返回值:Array(Element);
    3.$("Selector + next")
    描述:用于获取所有位于Selector后面的next元素,如例子中
    $("#aNext").click(function(){
    $("#Result").html("");
    $("label + input").each(function(){
    $("#Result").html($("#Result").html() + $(this).attr("value") + ",");
    })
    })
    获取所有位于label元素后面的input元素,在例子中,只有input1位于Label1下个节点,input2与Label3两者隔了个div节点,所以不配合。
    返回值:Array(Element);
    4.$("Selector ~ Sibling")
    描述:与上一个方法类似,主要区别是此方法匹配的是位于Selector之后的所有同级的Sibling结点,无论中间是否有隔其它结点,在这也不明说啦,呵
    返回值:Array(Element);
    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage