Ringkasan contoh penggunaan fungsi traversal yang biasa digunakan dalam jQuery_jquery

Contoh dalam artikel ini meringkaskan penggunaan fungsi traversal yang biasa digunakan dalam jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

1. fungsi kanak-kanak()

Fungsi

kanak-kanak() digunakan untuk memilih elemen anak bagi setiap elemen padanan dan mengembalikannya dalam bentuk objek jQuery.
Anda juga boleh menggunakan pemilih untuk mengecilkan lagi skop penapisan dan menapis elemen yang sepadan dengan pemilih yang ditentukan.

Contoh penggunaan adalah seperti berikut:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
// 匹配id为n1的元素
var $n1 = $("#n1");
// 匹配n1的所有子元素
var $menu_li = $n1.children();
document.writeln( getTagsInfo( $menu_li ) ); // LI#n2,LI#n7,LI#n13
// 匹配n1所有含有类名active的子元素
var $active_menu_li = $n1.children(".active");
document.writeln( getTagsInfo( $active_menu_li ) ); // LI#n2
// 匹配$menu_li每个元素的所有span子元素
var $span = $menu_li.children("span");
document.writeln( getTagsInfo( $span ) ); // SPAN#n3,SPAN#n8,SPAN#n14

2. fungsi penapis()

Fungsi penapis() digunakan untuk menapis elemen yang sepadan dengan ungkapan yang ditentukan dan mengembalikannya dalam bentuk objek jQuery.
Ungkapan di sini termasuk: pemilih (rentetan), elemen DOM (Elemen), objek jQuery dan fungsi.

Contoh penggunaan adalah seperti berikut:

/* $("li") 匹配n4、n5、n6这3个元素 */
//筛选出所有索引为偶数(序号为奇数)的元素，即n4、n6
document.writeln( $("li").filter( ":even" ).length ); // 2
//筛选出包含类名foo的元素，即n5
document.writeln( $("li").filter( $(".foo") ).length ); // 1
//筛选出所有带有class属性的元素，即n5、n6
document.writeln( $("li").filter( "[class]" ).length ); // 2
/* $("input") 匹配n8、n9这两个元素 */
//筛选出选中的元素，即n9
document.writeln( $("input").filter( ":checked" ).length ); // 1
var input = document.getElementsByName("codeplayer");
//筛选出所有的input元素，即n8、n9
document.writeln( $("input").filter( input ).length ); // 2
//$("div") 匹配n1、n2、n7这3个元素
//筛选出id和class属性相等的元素，即n2、n7
var $result = $("div").filter( function(index, element){
  // 函数内的this === element
  return this.id == this.className; 
} );
document.writeln( $result.length ); // 2

3. bukan() fungsi

Fungsi

not() digunakan untuk mengalih keluar elemen yang sepadan dengan ungkapan yang ditentukan daripada elemen yang sepadan dan mengembalikan elemen yang dikekalkan dalam bentuk objek jQuery.
Ungkapan di sini termasuk: pemilih (rentetan), elemen DOM (Elemen), objek jQuery dan fungsi.
Lawan fungsi ini ialah fungsi add(), yang digunakan untuk menambah elemen yang sepadan dengan ungkapan yang ditentukan kepada elemen padanan semasa.

Contoh penggunaan adalah seperti berikut:

/* $("li") 匹配n4、n5、n6这3个元素 */
//排除掉n6，剩下2个元素n4、n5
document.writeln( $("li").not( "#n6" ).length ); // 2
//排除掉带类名foo的元素，剩下n4、n6
document.writeln( $("li").not( $(".foo") ).length ); // 2
//排除掉所有带有class属性的元素，剩下n4
document.writeln( $("li").not( "[class]" ).length ); // 1
/* $("input") 匹配n8、n9这两个元素 */
//排除掉被选中的元素，剩下n8
document.writeln( $("input").not( ":checked" ).length ); // 1
var input = document.getElementsByTagName("input");
//排除掉所有input元素，返回空的jQuery对象
document.writeln( $("input").not( input ).length ); // 0
/* $("div") 匹配n1、n2、n7这3个元素 */
//排除掉id和class属性相等的元素，剩下n1
var $result = $("div").not( function(index, element){
  // 函数内的this === element
  return this.id == this.className; 
} );
document.writeln( $result.length ); // 1

4. fungsi tambah()

Fungsi

add() digunakan untuk menambah elemen yang sepadan dengan ungkapan yang ditentukan kepada elemen padanan semasa dan mengembalikannya dalam bentuk objek jQuery.
Ungkapan di sini termasuk: pemilih (rentetan), kandungan HTML (rentetan), elemen DOM (Elemen), dan objek jQuery.
Lawan fungsi ini ialah fungsi not(), yang digunakan untuk mengalih keluar elemen yang sepadan dengan ungkapan yang ditentukan daripada elemen padanan semasa.

Contoh penggunaan adalah seperti berikut:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
//匹配所有的p元素，再加上所有的label元素
var $elements1 = $("p").add("label");
document.writeln( getTagsInfo( $elements1 ) ); // #n1,#n4,#n9,#n11
var $matches = $("span.active").add( document.getElementsByTagName("label") );
document.writeln( getTagsInfo( $matches ) ); // #n4,#n8,#n11,#n12
var $elements2 = $("label").add( $("strong") );
document.writeln( getTagsInfo( $elements2 ) ); // #n4,#n7,#n11
var $elements3 = $("span.active").add( "label", $("#n9") );
document.writeln( getTagsInfo( $elements3 ) ); // #n8,#n11,#n12
var $elements4 = $("p").add(".active").add("span:only-child");
document.writeln( getTagsInfo( $elements4 ) ); // #n1,#n3,#n6,#n7,#n8,#n9,#n12

5. fungsi slice()

Fungsi

slice() digunakan untuk memilih segmen berterusan elemen dalam elemen padanan dan mengembalikannya dalam bentuk objek jQuery.
Fungsi ini tergolong dalam objek jQuery (contoh).

Contoh penggunaan adalah seperti berikut:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
/* $("li") 匹配n4、n5、n6、n7、n8这5个元素 */
var $li = $("li");
// 选取第2个元素
var $sub1 = $("li").slice( 1, 2);
document.writeln( getTagsInfo( $sub1 ) ); // LI#n5
// 选取第4、5个元素
var $sub2 = $("li").slice( 3 );
document.writeln( getTagsInfo( $sub2 ) ); // LI#n7,LI#n8
// 选取第1~4个元素
// startIndex = length + (-5) = 0，endIndex = length + (-1) = 4
var $sub3 = $("li").slice( -5, -1);
document.writeln( getTagsInfo( $sub3 ) ); // LI#n4,LI#n5,LI#n6,LI#n7

6. fungsi ibu bapa()

Fungsi

parent() digunakan untuk memilih elemen induk bagi setiap elemen padanan dan mengembalikannya sebagai objek jQuery.
Anda juga boleh menggunakan pemilih untuk mengecilkan lagi julat pemilihan dan menapis elemen yang sepadan dengan pemilih yang ditentukan.
Fungsi ini tergolong dalam objek jQuery (contoh).

Contoh penggunaan adalah seperti berikut:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
var $n2 = $("#n2");
// 获取n2的父元素
var $parents1 = $n2.parent();
document.writeln( getTagsInfo( $parents1 ) ); // DIV#n1
var $p = $("p");
// 获取所有p元素的父元素
var $parents2 = $p.parent();
document.writeln( getTagsInfo( $parents2 ) ); // DIV#n1,DIV#n5
// 获取所有p元素的包含类名"bar"的父元素
var $parents3 = $p.parent(".bar");
document.writeln( getTagsInfo( $parents3 ) ); // DIV#n5
var $foo = $(".foo");
//获取所有包含类名"foo"的元素的父元素
var $parents4 = $foo.parent();
document.writeln( getTagsInfo( $parents4 ) ); // P#n3,DIV#n5

7. fungsi ibu bapa()

Fungsi

parents() digunakan untuk memilih elemen nenek moyang setiap elemen padanan dan mengembalikannya dalam bentuk objek jQuery.
Anda juga boleh menggunakan pemilih untuk mengecilkan lagi pemilihan kepada hanya elemen yang sepadan dengan pemilih yang ditentukan.
Fungsi ini tergolong dalam objek jQuery (contoh).

Contoh penggunaan adalah seperti berikut:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
var $n4 = $("#n4");
//获取n4的祖先元素
var $parents1 = $n4.parents();
document.writeln( getTagsInfo( $parents1 ) ); // P#n3,DIV#n1,BODY,HTML
var $p = $("p");
//获取所有p元素的祖先元素
var $parents2 = $p.parents();
document.writeln( getTagsInfo( $parents2 ) ); // DIV#n5,DIV#n1,BODY,HTML
//获取所有p元素的包含类名"bar"的祖先元素
var $parents3 = $p.parents(".bar");
document.writeln( getTagsInfo( $parents3 ) ); // DIV#n5
var $foo = $(".foo");
//获取所有包含类名"foo"的元素的祖先元素中的div元素
var $parents4 = $foo.parents("div");
document.writeln( getTagsInfo( $parents4 ) ); // DIV#n5,DIV#n1

8. adik beradik() fungsi

Fungsi

siblings() digunakan untuk memilih semua elemen adik beradik (tidak termasuk dirinya) bagi setiap elemen padanan dan mengembalikannya dalam bentuk objek jQuery.
Anda juga boleh menggunakan pemilih untuk mengecilkan lagi julat pemilihan dan menapis elemen yang sepadan dengan pemilih yang ditentukan.
Fungsi ini tergolong dalam objek jQuery (contoh).

Contoh penggunaan adalah seperti berikut:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n4 = $("#n4");
//匹配n4的所有同辈元素(同辈元素不会包括n4自己，下同)
var $elements = $n4.siblings( );
document.writeln( getTagsInfo( $elements ) ); // #n2,#n5,#n7,#n8
//匹配n4所有的同辈span元素
var $matches = $n4.siblings("span");
document.writeln( getTagsInfo( $matches ) ); // #n2,#n5,#n8
var $label = $("label");
//匹配所有label元素的含有类名"active"的同辈元素
var $actives = $label.siblings(".active");
document.writeln( getTagsInfo( $actives ) ); // #n7,#n8,#n12

9. prev() dan prevAll() fungsi

Fungsi

prev() digunakan untuk menapis elemen saudara sejurus sebelum setiap elemen padanan dan mengembalikannya dalam bentuk objek jQuery.
Anda juga boleh menggunakan pemilih yang ditentukan untuk mengecilkan lagi skop penapisan dan menapis elemen yang sepadan dengan pemilih yang ditentukan.
Lawan fungsi ini ialah fungsi next(), yang digunakan untuk menapis elemen adik beradik serta-merta selepas setiap elemen padanan.

Fungsi

prevAll() digunakan untuk memilih semua elemen adik beradik sebelum setiap elemen padanan dan mengembalikannya dalam bentuk objek jQuery.
Anda juga boleh menggunakan pemilih untuk mengecilkan lagi julat pemilihan dan menapis elemen yang sepadan dengan pemilih yang ditentukan.
Lawan fungsi ini ialah fungsi nextAll(), yang digunakan untuk memilih semua elemen adik-beradik selepas setiap elemen padanan.

Contoh penggunaan sebelumnya() adalah seperti berikut:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
//匹配所有span元素：e2、e3、e4、e5、e7、e9
var $span = $("span");
//匹配所有span元素之前紧邻的同辈元素：e3、e2、e8
//e2 => 无【没有上一个紧邻的同辈元素，因为它是同辈元素中的第一个，下同】
//e3 => 无
//e4 => e3
//e5 => e2
//e7 => 无
//e9 => e8
var $span_prev = $span.prev( );
document.writeln( getTagsInfo( $span_prev ) ); // SPAN#e3,SPAN#e2,A#e8
//匹配所有span元素之前紧邻的同辈span元素
var $span_prev_span = $span.prev( "span" );
document.writeln( getTagsInfo( $span_prev_span ) ); // SPAN#e3,SPAN#e2

Contoh penggunaan PrevAll() adalah seperti berikut:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n6 = $("#n6");
//匹配n6之前所有的同辈元素
var $n6_prevAll = $n6.prevAll();
document.writeln( getTagsInfo( $n6_prevAll ) ); // #n5,#n4,#n2
//匹配n6之前的所有同辈strong元素
var $n6_prevAll_strong = $n6.prevAll("strong");
document.writeln( getTagsInfo( $n6_prevAll_strong ) ); // #n4
var $label = $("label");
//匹配所有label元素之前的包含类名"active"的同辈元素
var $label_prevAll_active = $label.prevAll(".active");
document.writeln( getTagsInfo( $label_prevAll_active ) ); // #n10,#n5,#n4

10 fungsi next() dan nextAll() fungsi

Fungsi

next() digunakan untuk menapis elemen saudara sejurus selepas setiap elemen padanan dan mengembalikannya dalam bentuk objek jQuery.
Anda juga boleh menggunakan pemilih yang ditentukan untuk mengecilkan lagi skop penapisan dan menapis elemen yang sepadan dengan pemilih yang ditentukan.
Lawan fungsi ini ialah fungsi prev(), yang digunakan untuk menapis elemen adik beradik sejurus sebelum setiap elemen padanan.

Fungsi

nextAll() digunakan untuk memilih semua elemen saudara selepas setiap elemen padanan dan mengembalikannya dalam bentuk objek jQuery.
Anda juga boleh menggunakan pemilih untuk mengecilkan lagi julat pemilihan dan menapis elemen yang sepadan dengan pemilih yang ditentukan.
Lawan fungsi ini ialah fungsi prevAll(), yang digunakan untuk memilih semua elemen adik-beradik sebelum setiap elemen padanan.

contoh penggunaan seterusnya() adalah seperti berikut:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
// 匹配所有span元素：e2、e3、e4、e5、e7、e9
var $span = $("span");
// 匹配所有span元素之后紧邻的同辈元素：e5、e4、e8
// e2的下一个紧邻的同辈元素是e5
// e3的是e4
// e4没有(因为它是同辈元素中的最后一个，下同)
// e5没有
// e7的是e8
// e9没有
var $span_next = $span.next( );
document.writeln( getTagsInfo( $span_next ) ); // SPAN#e5,SPAN#e4,A#e8
// 匹配所有span元素之后紧邻的同辈span元素
var $span_next_span = $span.next( "span" );
document.writeln( getTagsInfo( $span_next_span ) ); // SPAN#e5,SPAN#e4

contoh penggunaan nextAll() adalah seperti berikut:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n4 = $("#n4");
//匹配n4之后所有的同辈元素
var $n4_nextAll = $n4.nextAll();
document.writeln( getTagsInfo( $n4_nextAll ) ); // #n5,#n7,#n8
//匹配n4之后的所有同辈strong元素
var $n4_nextAll_strong = $n4.nextAll("strong");
document.writeln( getTagsInfo( $n4_nextAll_strong ) ); // #n7
var $label = $("label");
var $label_nextAll_active = $label.nextAll(".active");
document.writeln( getTagsInfo( $label_nextAll_active ) ); // #n7,#n8,#n12

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.