前三天是jQuery的基础部分,选择器学好了。才能进行下一步的操作,如果前三天没学过没学好,不要跳着学。粗俗的话叫做,步子大了,容易扯着蛋。一步一个脚印,是最好的方式。

强调一下。有问题,不要憋着不讲。评论区里可以尽情提问,有问题才是好孩子。


jQuery插入节点的方法:

插入节点主要有两种方式,一种是内插,一种是外插。外插花样多,还分前插和后插。各位看官自动脑补岛国动画,只要你能记住,我拦不住您瞎想。

本着no picture no bibi 的精神。我画几个图,对比学习。当然更好的是你自己练一下。

内插:

     append 与 appendTo

   prepend 与 prependTo

   多图来袭:

   内插中的后插:

   

 

内插中的前插:

   

  其中append与appendTo的作用是类似的。都是在元素的内部内容后面插入元素。不过为了jQuery的链式操作方便。可以先指定插入的内容然后再插入到元素内。

  区别在于:append:先准备插入的元素,再准备插入的内容。eg:$('p').append("<b>我解锁了前插中的后插</b>");

         appendTo:先准备插入的内容,然后再插入到元素中去。eg $("<b>我解锁了前插中的后插</b>").appendTo("p");

外插:

   after 与 insertAfter

before 与 insertBefore

     外插中的后插:

   

      

    外插中后插:

   

                after 与 insertAfter作用是类似的。可以参考内插的介绍。


实在抱歉,今天更新的内容太少了。自己的电脑不太好,画图太不好使了。有问题,或者有错误,评论区见。

jQuery知识点总结(第四天)的更多相关文章

  1. jQuery绑定事件的四种方式

      jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...

  2. jQuery组织您钞四----jQuery操作DOM

    一.采用jQuery创建节点 节点是DOM基础设施.依据DOM产品规格,Node是一个很宽泛的概念,包含元素.属性.正文.档..实际开发过程中,要创建动态内容,主要操作的节点包括元素. 属性和文本. ...

  3. jQuery绑定事件的四種方式

    这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...

  4. [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL

    本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...

  5. jQuery绑定事件的四种方式区别

    jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(t ...

  6. jQuery绑定事件的四种方式:bind、live、delegate、on

    1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...

  7. jQuery事件绑定的四种方法

    jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...

  8. JQuery知识点总结

    一. 1.JavaScript是Netscape公司开发的一种脚本语言(scripting language).JavaScript的出现实现了使得网页和用户之间实时的,动态的和交互的关系,使网页包含 ...

  9. jQuery学习笔记(四)jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

随机推荐

  1. 为 Xamarin.Forms 做个跑马灯控件

    前段时间,私下用 Xamarin.Forms 做了个商业项目的演示版.很多被国内App玩坏了的控件/效果,XF上都没有或是找不到对应的实现,没有办法只能亲自上阵写了几个,效果还行,就是有BUG. 这个 ...

  2. 怎样修改 Openstack Horizon(Dashboard)的显示界面 (二)

    上一篇文章介绍了 Dashboard 的基本结构框架,那接下来的问题就是如何在这个框架中加入我们自己想要的内容了.在真正动手之前,让我们先来看看官方的页面是怎么做出来的.首先我们进入 /usr/sha ...

  3. ASP.NET Web API(三):安全验证之使用摘要认证(digest authentication)

    在前一篇文章中,主要讨论了使用HTTP基本认证的方法,因为HTTP基本认证的方式决定了它在安全性方面存在很大的问题,所以接下来看看另一种验证的方式:digest authentication,即摘要认 ...

  4. php 解析json

    今天做项目的时候需要用到json数组,解析时遇到了个小小的麻烦,特此将解决办法记下: json数据如下: { "code":200, "message":&qu ...

  5. CSS Hack技术介绍及常用的Hack技巧

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  6. Java开发利器Myeclipse全面详解

    Java开发利器Myeclipse全面详解: Ctrl+1:修改代码错误 Alt+Shift+S:Source命令 Ctrl+7:单行注释 Ctrl+Shift+/ :多行注释 Ctrl+I :缩进( ...

  7. springMVC之web.xml配置

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...

  8. 【BZOJ 3527】【ZJOI 2014】力

    代换一下变成多项式卷积,这里是的答案是两个卷积相减,FFT求一下两个卷积就可以啦 详细的题解:http://www.cnblogs.com/iwtwiioi/p/4126284.html #inclu ...

  9. 01python算法--算法和数据结构是什么鬼?

    我不想直接拷贝google 上面所有对算法的解释.所以我想怎么说就怎么说了,QAQ 1:什么是程序? 解决问题的范式 2:什么是问题? 程序输入与输出之间的联系 3:什么是算法: 算法就是解决问题的思 ...

  10. jquery- pagination使用

    $("#gupiaopage").page({ showInfo: false, showJump: false, showPageSizes: true, firstBtnTex ...