jQuery文档操作方法对比

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</title>
 <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
 <script type="text/javascript">
     $(document).ready(function(){
         $("div").after("<p>我是after方法插入过来的</p>");
         $("div").append("<p>我是append方法插入过来的</p>");
         $("div").before("<p>我是before方法插入过来的</p>");
         $("div").prepend("<p>我是prepend方法插入过来的</p>");
         $("div").append("<p>我是append方法第二次插入过来的</p>");
         $("div").after("<p>我是after方法第二次插入过来的</p>");
     })
 </script>
 </head>
 <body>
 <div style="height:200px; width:200px; border:2px solid;"></div>
 </body>
 </html>

调试

备注

after()和before()方法只能在标签后面插入；prepend()和apppend()方法可以在标签内插入

前者只能在固定的位置（即永远都是在标签后一个位置插入）；后者可以连续加入（即依次累加在标签内）

jQuery使用时src的写法

本地：若jQuery.js文件与HTML文件在同一个文件夹中，src="jQuery.js"

若jQuery.js文件所在的文件夹与HTML文件在同一个目录，src="文件夹/jQuery.js"

若jQuery.js文件所在的文件夹与HTML文件所在的文件夹为同一个目录，src="../文件夹/jQuery.js"

也可以直接写入jQuery.js文件的详细路径

非本地：

从 Google 或 Microsoft 加载 CDN jQuery 核心文件

Microsoft的jQuery库

src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"

Google的jQuery库

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"

jQuery文档操作方法对比和src写法的更多相关文章

  1. jQuery 文档操作方法

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...

  2. 原生JS与jQuery文档加载完毕的写法

    HTML是有执行顺序的,默认是自上而下执行.所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的 ...

  3. jquery文档加载几种写法，图片加载写法

    jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...

  4. jQuery 文档操作方法(append)

    这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 一.append() 方法 append() 方法在被选元素的结尾(仍然在内部)插入指定内容. 例子: <html& ...

  5. jQuery 文档操作方法(w3school)

    这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append( ...

  6. jQuery 文档操作方法 （四）

    方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容. appendTo() ...

  7. jQuery的文档操作方法

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...

  8. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  9. jQuery 文档操作 - prependTo() ，appendTo()方法

    其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...

随机推荐

  1. php循环

    while 例子: /* example 1 */ $a = 0; while (true) { $a++; echo $a.'<br>'; if($a >= 10){ break; ...

  2. EventTrigger动态添加监听事件

    在 Unity3D 中,通过拖拽的方式在 EventTrigger 组件中添加监听事件就不多说了,很简单.这里主要说的是通过代码动态往 EventTrigger 组件中添加监听事件,有个很坑的地方,就 ...

  3. html 2

    一.列表 信息资源的一种展示形式 二.列表的分类 1.有序列表 <ol> <li>列表项1</li> <li>列表项2</li> </ ...

  4. Go语言正则模块

    基本使用 import "bytes" import "fmt" import "regexp" func main() { //这个测试一 ...

  5. JSP的分页技术

    在实际应用中,如果从数据库中查询的记录特别的多,甚至超过了显示屏的显示范围,这个时候可将结果进行分页显示. 假设总记录数为intRowCount,每页显示的数量为inPageSize,总页数为intP ...

  6. Vuejs——（9）组件——props数据传递

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  7. 【BZOJ4025】 二分图（线段树分治）

    传送门 BZOJ Solution 只是为了学习一下线段树分治的啦! 当你学会线段树分治之后,可以跳过下面的一部分: 按照时间搞一颗线段树出来,把包含这段区间的操作用vector压进去. 每一个线段树 ...

  8. MSRA-TD5000数据集使用详解

    中文检测的数据集,目前最火的应该是清华的CTW,https://ctwdataset.github.io/ 但是它的数据集只存储在微云和google driver,微云空间受限不能完全保存,所以下载的 ...

  9. 转---深入浅出妙用 Javascript 中 apply、call、bind

    作者:伯乐在线专栏作者 - chokcoco 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师 ...

  10. div、span内容超出省略号

    span设置部分省略...: span{         overflow: hidden;         text-overflow: ellipsis;         -o-text-over ...