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. UVa 11645 Bits (暴力+组合数学)

    题意:给定一个数 n,求 0 ~ n,中二进制表示中连续两个 1 出现的次数. 析:枚举连续的两个 1,从低位向高位进行枚举,然后前可以是任意数,后面也是任意的,如果 n 正好是 11 还要另算,举个 ...

  2. Hibernate配置文件的书写

    Hibernate主要配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibern ...

  3. AngularJS封装webupload实现文件夹上传

    百度的webupload没有开放api获取整个文件夹的信息.本文是二次开发webupload实现获取文件夹信息. 指令封装 /** * @license lx.ui.framework v1.0.0 ...

  4. Django基础—1

    一. Django的安装1. 查看已安装的Django的版本     进入到终端以及Python的交互模式    python3/ ipython32. 交互模式中输入import django    ...

  5. 日期Data类，日历类Calendar

    用于得到当前时间,和设置日期类数据 public void testDate() { // 创建一个日期对象 Date date = new Date(); /** * 从1900年1月1日 00:0 ...

  6. Java 线程使用注意事项

    事件处理线程说明 如果事件处理的逻辑能迅速完成,并且不会发起新的IO请求,比如只是在内存中记个标识,则直接在IO线程上处理更快,因为减少了线程池调度. 但如果事件处理逻辑较慢,或者需要发起新的IO请求 ...

  7. Javascript高级编程学习笔记（7）—— 函数

    前几天有事耽搁了,今天继续更新 今天的主要内容是JS中的函数 这一篇主要讲函数的定义等内容,至于变量提升.执行环境.闭包.内存回收等内容在后面讲,高玩们可以不用看下面的正文了. 函数 首先来讲,函数对 ...

  8. CGI 和 FastCGI 协议的运行原理

    目录 介绍 深入CGI协议 CGI的运行原理 CGI协议的缺陷 深入FastCGI协议 FastCGI协议运行原理 为什么是 FastCGI 而非 CGI 协议 CGI 与 FastCGI 架构 再看 ...

  9. 2-1 编写HelloWorld

    引用外部的vue.js文件

  10. Eruda 一个被人遗忘的调试神器

    Eruda 一个被人遗忘的调试神器 引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler.Charles.chro ...