1、查詢
利用選擇器找出節點
使用 html() / text() / attr() 輸出節點文字和屬性值。
注意:下拉清單使用val()
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script> $(function(){ $('#b1').click(function(){ //$('#d1').html('java'); //将节点的属性读出来 //$('#d1').attr('style'); //$('#d1').attr('style','font-size:30pt'); $('#d1').attr('class','s1'); }); }); </script> <style> .s1{ color:red; } </style> </head> <body> <div id="d1">hello</div> <ul> <li>item1</li> <li id="i1">item2</li> <li>item3</li> </ul> <input type="button" id="b1" value="点我"/> </body> </html>
2、建立
$(html)
3、插入節點
append();
prepend(); );
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script> $(function(){ $('#b1').click(function(){ var $node = $('<li>item4</li>'); $('ul').append($node); //$('ul').append('<li>item4</li>'); 和上面是等价的 }); }); </script> <style> .s1{ color:red; } </style> </head> <body> <div id="d1">hello</div> <ul> <li>item1</li> <li id="i1">item2</li> <li>item3</li> </ul> <input type="button" id="b1" value="点我"/> </body> </html>
4、刪除節點
remove();
remove(selector);
empty();清空內容
$('#b1').click(function(){ //$('ul li:eq(1)').remove(); $('ul li').remove('li[id=i1]'); $('ul li:eq(1)').empty(); });
5、複製節點使複製的節點也具有行為
6、屬性操作
讀取:attr(' ');
設定:attr(' ', ' ');
或一次設定多個屬性attr({" " , " "});
刪除:removeAttr(' ');
$('#b1').click(function(){ $('#d1').attr({"class":"s1","style":"font-size:40pt"}); });
7、樣式操作
獲取和設定:attr("class", " ");
追加:addClass(' ', ', ' ' );
切換樣式:toggleClass(' ', ' ');
是否有某個樣式hasClass(' ');
css(' ', ' ');
css({ ' ':{ ' ':{ ” , ' ': ' '});
$('#b1').click(function(){ $('div:first').addClass('s1 s2'); $('div:first').removeClass('s2'); $('div:first').toggleClass('s1'); });
8、設定與取得html,文字與數值
html() / html(' ')
text() / text(' ')
text() / text(' ')) ;設定與讀取元素的值
9、遍歷
children()
next();
prive();
siblings():所有兄弟
10、綜合實例10、35% HTML5行動開發之路(36)-jQuery中的DOM操作的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!