第 5 章 操作 DOM

原创 2017年01月04日 20:30:05

5.5 DOM 操作方法的简单归纳

(1)要在HTML中创建新元素,使用$()函数

(2)要在每个匹配元素中插入新元素,使用:

.append(content [, content]) (添加)

描述:在每个匹配元素里面的末尾插入参数内容

Additional Arguments

支持传递多个参数

<script>
   var $newDiv1=$('<div id="object1" />'),
           newDiv2=document.createElement('div'),
           existingDiv1=document.getElementById('foo');
    $('body').append($newDiv1,[newDiv2,existingDiv1]);
   $('newDiv2').html('<p>hello</p>');
</script>

.appendTo(target) (添加到)

描述:讲匹配的元素插入到目标元素的后面

.append()和.appendTo() 两种方法功能相同,主要的不同是语法----内容和目标的位置不同。对于.append(),选择表达式在函数的前面,参数是将要插入的内容。对于.append()刚好相反,内容在方法前面,无论是一个选择器表达式或创建作为标记上的标记,它都将被插入到容器的末尾。

<script>
   $('.inner').append('<p >new</p>')
   $('<p>new</p>').appendTo('.inner');
   
    $('.container').append($('h2'));
    $('h2').appendTo($('.container'));
</script>

.filter() 与 .find() 的区别




(1) 修改添加back to top链接的代码,以便这些链接只从第四段后面才开始出现。

    var $p=$('div.chapter p').eq(2).nextAll();
    $('<a href="#top">back to top</a>').insertAfter($p);
    $('<a id="top"></a>').prependTo('body');

(2) 在单击back to top链接时,为每个链接后面添加一个新段落,其中包含You were here字样。确保链接仍然有效。

    $('a[href$=#top]').click(function () {
        $('<p>You were here</p>').insertAfter(this);
    })

(3) 在单击作者名字时,把文本改为粗体(通过添加一个标签,而不是操作类或CSS属性)。

    $('#f-author').click(function () {
        $(this).wrap('<b />');
    });

(4) 挑战:在随后单击粗体作者名字时,删除之前添加的元素(也就是在粗体文本与正常文本之间切换)。

var tag=0;
    $('#f-author').click(function () {
        if(tag==0){
            $(this).wrap('<b />');
            tag=1;
        }else {
            $(this).unwrap('<b />');
            tag=0;
        }
    })
(5) 挑战:为正文中的每个段落添加一个inhabitants类,但不能调用.addClass()方法。确保不影响现有的类。

   $('p').each(function () {
       var a=$(this).attr('class');
       if(a==0){
           $(this).attr('class','inhabitants');
       }else{
           $(this).attr('class',a+' inhabitants');
       }
   })



版权声明:本文为博主原创文章,未经博主允许不得转载。详细代码(https://github.com/yana77)

JS DOM 编程艺术(第2版)读书笔记 第12章 综合示例

/** * addLoadEvent */ function addLoadEvent(func) { var oldonload = window.onload; if(type...
  • trr1994917
  • trr1994917
  • 2015年05月17日 10:37
  • 401

JavaScript+DOM编程艺术 第三章 DOM

DOM简介1.HTML DOM:网页被加载时,浏览器会创建文档对象模型 2.DOM操作HTML:改变HTML的元素、属性、CSS样式、对所有事件作出反应DOM操作HTML不要在文档加载完成后使用do...
  • qq_34664510
  • qq_34664510
  • 2017年07月10日 21:34
  • 210

第三章 Dom操作

浏览器中的Dom文档对象模型Dom是独立于语言的,用以操作XML和HTML文档的程序接口(API)。在浏览器中的接口通常是以javascript操作的,因此大多数的脚本都在与DOM打交道。Dom和ja...
  • yangyiboshigou
  • yangyiboshigou
  • 2017年05月18日 18:59
  • 201

第 5 章 jQuery 操作 DOM 元素

使用 attr 方法控制元素的属性 操作元素的内容 操作元素的样式 移除属性和样式 使用 append 方法向元素内追加内容 使用 appendTo 方法向被选元素内插入内容 使用 before 和 ...
  • lgy64422575
  • lgy64422575
  • 2016年07月04日 16:50
  • 177

javascript基础教程第8版---第5章窗口与框架---学习笔记

iframe是一种内联框架,可以嵌入到常规HTML页面中的框架,并非必须置于框架集之内,与一般框架一样,iframe可以是一份独立的html文档,可将iframe作为一般脚本的目标,这样可以在脚本控制...
  • bit_7
  • bit_7
  • 2015年10月11日 10:27
  • 535

第 3 章 DOM 操作

认识 DOM 通过 ID 获取元素 innerHTML 属性 改变 HTML 样式 控制类名 className 属性 任务 认识 DOM文档对象模型 DOM(Document Object Mode...
  • lgy64422575
  • lgy64422575
  • 2016年01月29日 11:35
  • 314

lua程序设计第二版 读书笔记(5-8章)

书本下载地址                       http://download.csdn.net/detail/myy2012/5349646 本部分下载地址               ...
  • myy2012
  • myy2012
  • 2013年05月09日 17:04
  • 1205

《Python核心编程》第14章 习题

14-3.执行环境。创建运行其他Python脚本的脚本。 filename = r'D:\test.py' execfile(filename)14-4. os.system()。调用os.sy...
  • birdzb
  • birdzb
  • 2017年04月01日 20:28
  • 531

javascript的内置对象参考

这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从...
  • chenpeng19910926
  • chenpeng19910926
  • 2016年03月08日 11:54
  • 388

《c++ primer》 第13章 拷贝控制 学习笔记

第 13 章 拷贝控制 1.拷贝,赋值与销毁 对初学c++的程序员来说,必须定义对象拷贝,移动,赋值或销毁时做什么。 拷贝构造函数:如果一个构造函数的参数是本身的引用,且其他的参数都有默认值,此...
  • wwh578867817
  • wwh578867817
  • 2014年12月15日 16:53
  • 2474
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第 5 章 操作 DOM
举报原因:
原因补充:

(最多只允许输入30个字)