jqueryでのDOM操作コレクション
6844 ワード
1、ノードの検索:
1
2
2、ノードの作成と挿入:
1
2
3
4
5
6
7
8
9
10
3、ノードを削除する:
1
2
3
4、要素のコピー:
1
2
3
5、要素を置換すると、置換後に要素がバインドされたイベントが消え、再バインドする必要があります.
1
2
6、ラップノード:
1
2
3
7、属性操作:
1
2
8、スタイル操作:
1
2
3
4
5
9、html、テキスト、値の設定と取得:
1
2
3
10、ノードの遍歴:
1
2
3
4
5
6
7
8
11,CSS-DOM操作:
1
2
3
4
5
6
7
8
9
1
2
var $li = $( "ul li:eq(1)" ); // $li.attr( "title" ); // 2、ノードの作成と挿入:
1
2
3
4
5
6
7
8
9
10
var $ul = $( "#ulMain" ); var $li_1 = $( "<li id='liApple'> </li>" ); // li 。 $ul.append($li_1); // ulMain $li_1.appendTo($ul); // li ul 。 $ul.prepend($li_1); // ul li 。 $li_1.prependTo($ul); // li ul 。 $ul.after( "<span>hello,span</span>" ); // ul span $( "<b> </b>" ).insertAfter($ul); // b ul $ul.before( "<b> </b>" ); // ul b $( "<b> </b>" ).insertBefore($ul); 3、ノードを削除する:
1
2
3
var $li = $( "ul li" ).remove( "li[title=hello]" ); // ul title hello li 。 var $li = $( "ul li" ).detach( "li[title=hello]" ); // remove ， ： ， ， 。 $li.empty(); // 。 4、要素のコピー:
1
2
3
$( "ul li" ).click( function (){ $( this ).clone( true ).appendTo( "ul" ); // li li ul ， li 。 }); 5、要素を置換すると、置換後に要素がバインドされたイベントが消え、再バインドする必要があります.
1
2
$( "p" ).replaceWith( "<strong> ？</strong>" ); // strong p $( "<strong> ？</strong>" ).replaceAll( "p" ); // strong p 6、ラップノード:
1
2
3
$( "<strong>" ).wrap( "<b></b>" ); // b strong 。 $( "<strong>" ).wrapAll( "<b></b>" ); // b strong 。 $( "<strong>" ).wrapInner( "<b></b>" ); // strong <b> 。 7、属性操作:
1
2
$ul.attr({ "title" : "yourTitle" , "name" : "theName" }); // 。 $ul.removeAttr( "title" ); // title 。 8、スタイル操作:
1
2
3
4
5
$ul.addClass( "className" ); // class $ul.removeClass( "className className2" ); // class。 $ul.removeClass(); // class $ul.toogleClass( "another" ); // ul another class，ul class 。 $ul.hasClass( "another" ); // ul another class 9、html、テキスト、値の設定と取得:
1
2
3
$( "div" ).html( "<b>hello</b>" ); // div html ，html() xml 。 $( "div" ).text( "the plain text" ); // div ， xml 。 $( "select01" ).val([ "text1" , "text2" ]); // ， 。 10、ノードの遍歴:
1
2
3
4
5
6
7
8
$ul.children(); // ul ， 。 $ul.next(); // ul 。 $ul.prev(); $ul.siblings(); // ul 。 $ul.parent(); // ， 。 $ul.parents(); // $ul.closest(); // ， 。 ：find(), filter(), nextAll(), prevAll()。 11,CSS-DOM操作:
1
2
3
4
5
6
7
8
9
$ul.css({fontSize: "30px" , backgroundColor: "#aaafff" }); $ul.css({ "font-size" : "30px" , "background-color" : "#aaafff" }); $ul.height( "10em" ); // ul 10em $ul.height(); // ul ， ， ， 。 $ul.css( "height" ); // ul ， ， "auto" ，"10px" 。 $ul.width( "10px" ); var offsetObj= $ul.offset(); var vLeft= offsetObj.left; var vTop = offsetObj.top; // ， ：top, left. var posObj = $ul.position(); var vLeft = posObj.left; var vTop = posObj.top; // position relative absolute 。 $ul.scrollTop(300); //ul 300 。 $ul.scrollLeft(300); //ul 300 。