jQuery memo 5

DOM Manipulation

插在element裡面, inside
append()

$("p").append( $("#foo")[0] );
<p>I would like to say: </p><b id="foo">Hello</b>
<p>I would like to say: <b id="foo">Hello</b></p>

appendTo

$("p").appendTo("#foo");
<p>I would like to say: </p><div id="foo"></div>
<div id="foo"><p>I would like to say: </p></div>

prepend
$("p").prepend( $("#foo")[0] );
<p>I would like to say: </p><b id="foo">Hello</b>
<p><b id="foo">Hello</b>I would like to say: </p>

prependTo
$("p").prepend( $("#foo")[0] );
<p>I would like to say: </p><b id="foo">Hello</b>
<p><b id="foo">Hello</b>I would like to say: </p>


插在element後面
after()
$("p").after( $("#foo")[0] );
<b id="foo">Hello</b><p>I would like to say: </p>
<p>I would like to say: </p><b id="foo">Hello</b>

insertAfter()
$("p").insertAfter("#foo");
<p>I would like to say: </p><div id="foo">Hello</div>
<div id="foo">Hello</div><p>I would like to say: </p>

before()
$("p").before( $("#foo")[0] );
<p>I would like to say: </p><b id="foo">Hello</b>
<b id="foo">Hello</b><p>I would like to say: </p>

insertBefore()
$("p").insertBefore("#foo");
<div id="foo">Hello</div><p>I would like to say: </p>
<p>I would like to say: </p><div id="foo">Hello</div>


wrap()
$("p").wrap("<div class='wrap'></div>");
<p>Test Paragraph.</p>
<div class='wrap'><p>Test Paragraph.</p></div>


html()
$("div").html("<b>new stuff</b>");
<div><input/></div>
<div><b>new stuff</b></div>

text()
$("p").text("<b>Some</b> new text.");
<p>Test Paragraph.</p>
<p>&lt;b&gt;Some&lt;/b&gt; new text.</p>

val()
$("input").val("test");
<input type="text" value="some text"/>
<input type="text" value="test"/>

attr()
$("img").attr("title", function() { return this.src });
<img src="test.jpg" />
<img src="test.jpg" title="test.jpg" />


empty()
$("p").empty()
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
<p></p>

remove()
$("p").remove();
<p>Hello</p> how are <p>you?</p>
how are

$("p").remove(".hello");
<p class="hello">Hello</p> how are <p>you?</p>
how are <p>you?</p>


each attr rel 

$('div.chapter a[@href*=wikipedia]').each(function(index) {
 var $thisLink = $(this);
    $thisLink.attr({
       'rel': 'external',
       'id': 'wikilink-' + index,
       'title': 'learn more about ' + $thisLink.text() + ' at Wikipedia'
  });
});


clone
$("b").clone().prependTo("p");
<b>Hello</b><p>, how are you?</p>
<b>Hello</b><p><b>Hello</b>, how are you?</p>

如果用clone(false) 下面的child就不會clone

一些特殊字串
http://www.trans4mind.com/personal_development/HTMLGuide/specialCharacters.htm

inline 和 block 的差在哪
http://www.webdesignfromscratch.com/css-block-and-inline.cfm

left and right
http://www.w3schools.com/css/css_reference.asp