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. orabbix监控oracle

    Orabbix 是一个用来监控 Oracle 数据库实例的 Zabbix 插件.下载地址: http://www.smartmarmot.com/product/orabbix/download/ O ...

  2. QQ网页弹窗

    QQ网页弹窗 1.网址:http://shang.qq.com/v3/index.html 2.选推广工具,提示语随便写 3.建一个html 网页,并把代码拷进去. 4.双击网页,就可以打开了.(用E ...

  3. Django Model 进阶

    回顾: 定义 models settings.py激活app才能使用models migrations:版本控制,当更改库表结构时可以处理数据 增删改查 常见Field 模型的价值在于定义数据模型,使 ...

  4. vs2008快捷键一览表

    Ctrl+E,D ----             格式化全部代码 Ctrl+K,F ----             格式化选中的代码 CTRL + SHIFT + B          生成解决方 ...

  5. Appium移动自动化测试入门及简单实例（python）

    1.介绍 Appium是一个移动端的自动化框架,可用于测试原生应用.移动网页应用和混合型应用,且是跨平台的.可用于IOS和Android以及firefox的操作系统.原生的应用是指用android或i ...

  6. ASP.NET MVC 异常Exception拦截

    一.前言 由于客户端的环境不一致,有可能会造成我们预计不到的异常错误,所以在项目中,友好的异常信息提示,是非常重要的.在asp.net mvc中实现异常属性拦截也非常简单,只需要继承另一个类(Syst ...

  7. 机器学习技法笔记：15 Matrix Factorization

    Roadmap Linear Network Hypothesis Basic Matrix Factorization Stochastic Gradient Descent Summary of ...

  8. LeetCode: 107_Binary Tree Level Order Traversal II | 二叉树自底向上的层次遍历 | Easy

    本题和上题一样同属于层次遍历,不同的是本题从底层往上遍历,如下: 代码如下: struct TreeNode { int val; TreeNode* left; TreeNode* right; T ...

  9. LeetCode：145_Binary Tree Postorder Traversal | 二叉树后序遍历 | Hard

    题目:Binary Tree Postorder Traversal 二叉树的后序遍历,题目要求是采用非递归的方式,这个在上数据结构的课时已经很清楚了,二叉树的非递归遍历不管采用何种方式,都需要用到栈 ...

  10. Java 9 被无情抛弃，Java 8 直接升级到 Java 10！！

    前几天写了一篇 Java 8 即将在 2019 年停止免费向企业提供更新的文章,企图迫使用户向更新一代的 Java 版本升级,但让人遗憾的是,小编今天收到了 Oracle Java 版本的升级推送,装 ...