第 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)

相关文章推荐

JavaScript DOM学习笔记5——创建和操作节点

之前学习了DOM中各种节点的访问方法,DOM所包含的内容远不止如此,DOM编程还包括当DOM树已经构建起来之后再添加节点。         1.创建新节点         document对象中包...

HTML5 DOM元素类名相关操作API classList简介

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3483 一、...

part5-1 基础DOM和CSS操作

jQuery 基础DOM操作

XML操作使用dom4j的jar

  • 2014-09-04 14:42
  • 307KB
  • 下载

MySQL入门很简单-学习笔记 - 第 5 章 操作数据库

假设已经登录 mysql-h localhost -uroot -proot   5.1、显示、创建、删除数据库 showdatabases;     显示所有的数据库 createdatabase ...

javascript对于DOM的操作

  • 2014-06-16 15:47
  • 950B
  • 下载

07-DOM操作表格

  • 2013-03-06 18:11
  • 34.22MB
  • 下载

第 2 篇 核心技术 第 5 章 数据表的基本操作

在数据库中,数据表是数据库中最重要、最基本的的操作对象,是数据存储的基本单位。数据表被定义为列的集合,数据在表中是按照行和列的格式来存储的。每一行代表一条唯一的记录,每一列代表记录中的一个域。5.1创...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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