《jQuery基础教程》读书笔记05

第五章 ***作DOM
本章主要内容:
利用DOM提供的接口修改文档;
在网页中根据需要的创建元素和文本;
在网页中根据需要创建元素和文本;
移动或删除元素;
通过添加、删除或修改它们的属性来实现文档内容的变换。
5.1***作属性
类属性,我们一般使用.addClass()、.removeClass()方法来示范如何改变页面上的元素。
5.1.1非类属性
修改其他的一些属性,如id、rel、tittle等,jQuery提供了.attr()和.removeAttr()的***作方法,这些方法让修改属性变得简单。
eg:
$(document).ready(function(){
    $('div.chapter a').attr({rel:'external'});
});
值回调是给参数传入一个函数,而不是传入具体的值。这个函数会针对匹配的元素集中的每一个元素都调用一次调用后的返回的值将作为属性的值。
5.1.2DOM元素属性
HTML与DOM属性有一点区别,HTML属性是指页面中标记中放在引号中的值,而DOM属性则是指通过JavaScript你能够存取的值。
5.1.3表单中控件的值
//取得文本输入框的当前值
var $inputValue=$('#my-input').val();
//取得选项列表的当前值
var selectValue=$('#my-select').val();
5.2DOM树***作
5.2.1重新认识$()函数
$()不仅可以改变视觉外观,还可以改变实际内容。
5.2.2创建新元素
$(document).ready(function(){
    $('<a href="top">'back to top</a>);
    $('<a id="top"></a>');
  });
5.2.3插入新元素
$(document).ready(function(){
    $('<a href="top">'back to top</a>).insertAfter('div.chapter p');
    $('<a id="top"></a>');
  });
5.2.4移动元素
$(document).ready(function(){
    $('<a href="top">'back to top</a>).insertBefore('id');
    $('<a id="top"></a>');
  });
5.3复制元素
已有
<div class="chapter">
$('div.chapter p:eq(0).clone()
$('div.chapter p:eq(0).clone().insertBefore(div.chapter)');
这样同一个段落会出现两次。
5.4setter和getter方法
5.5DOM***作方法归纳
(1)在HTML中创建新元素,使用$()函数
(2)在每个匹配的元素中插入新元素
append、appendTo、prepend、prependTo
(3)在每个匹配的元素相邻的位置插入新元素
after、insertAfter、before、insertBefore
(4)在每个匹配的外部元素中插入新元素
warp、warpAll、warpInner
(5)要使用新元素或新文本替换每个匹配的元素
(6)要移除每个匹配的元素中的元素
(7)要从文档中移除每个匹配的元素及其后代元素,但是不实际删除。

#笔记##读书笔记#
全部评论

相关推荐

七牛云头号黑子:人家是过度包装被看出来没过简历,你是包都不包啊兄弟
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务