【第22期】观点:IT 行业加班,到底有没有价值?

第 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对象中包含了多个创建各种节点的方法。《JavaScript高级程序设计》中专门设计了一个表格,来说明每个方法的原型、作用、IE、Firefox、Opera、Safari等浏览器的支持情况。一眼望去几乎都是一些们获得支持的方法(很可能是因为这本书出的时候还很早,各种浏览器的版本都还很小)。         创建节点最有用的方法主要有:Crea

HTML5移动开发之路(36)——jQuery中的DOM操作

1、查询 利用选择器查找节点 使用 html() / text() / attr() 输出节点文本和属性值。 注意:下拉列表使用 val()   [html]...

欢迎关注CSDN程序人生公众号

关注程序员生活,汇聚开发轶事。

第二十章:DOM 进阶

学习要点:1.DOM 类型2.DOM 扩展3.DOM 操作内容 DOM 自身存在很多类型,在 DOM 基础课程中大部分都有所接触,比如 Element 类型:表示的是元素节点,再比如 Text 类型:表示的是文本节点。DOM 也提供了一些扩展功能。一.DOM 类型DOM 基础课程中,我们了解了 DOM 的节点并且了解怎样查询和操作节点

第 5 章 jQuery 操作 DOM 元素

使用 attr 方法控制元素的属性 操作元素的内容 操作元素的样式 移除属性和样式 使用 append 方法向元素内追加内容 使用 appendTo 方法向被选元素内插入内容 使用 before 和 ...

HTML5 知识

    <span style="font-size: 9pt; font-family: Arial, sans-serif; color: #333333; letter-spacing: 1.15pt;" la
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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