创建交互式博客——jquery （2）

网页要与用户交互，我们需要用event handler来修改html网页上的内容。jquery提供了一些方法来修改html elements。

在jquery中，$()有两种作用：一是选定网页上已有的html elements，比如说$('p')选定了网页上所有的p elements；二是给网页填加新的html elements，$('<h1>')则创建一个新的h1 element。

.text()方法为html element填加文本。比如，$('<p>').text('list')，代表我们创建一个新的p element，并将它的文本设置为"list"。

.appendTo()方法为填加html elements到选定的element结尾。如下所示，为创建一个新的li element，填加内容为”new item“，附到".items"class的末尾处。

$('.btn').click(function() {
  $('<li>').text('New item').appendTo('.items');
});

效果：

.prependTo()方法则为在选定的element的开头填加html elements，与.appendTo()正好相反。

.remove()方法删掉网页中选定的元素。

$('.btn').click(function() {
  $('.selected').remove();
});

.hide()方法隐藏选定的html element。

.show()方法呈现选定的html element。

.toggle()方法在呈现和隐藏element之间切换。

.addClass()方法为某一个element填加一个CSS class。

.removeClass()方法将一个CSS class从某一个element中删除。

.toggleClass()方法则是在填加或者删除一个CSS class中交替。比如说，分享链接的按钮，可以由灰色变成红色，再单击时由红色变成灰色。

Document Object Model: HTML文档可以用树来呈现，这个树的模型便是Document Object Model。如下所示：

其中，li.source和li.pubdate是child elements，ul.attribution是parent element，h2.title和p.description是sibling elements。

.next()方法得到选定element的下一个sibling element；.prev()方法则选择前一个element；.children()选择一个child element，如果给定一个selector，.children()将会选择一个特定的element；