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. 小程序json字符串转为对象

    小程序里json字符串转为对象使用JSON.parse()方法转变无效, 看报错提示有单引号“ ' ” 因为单引号而无效, 将单引号全改双引号即可. 报错如下: VM11050:1 thirdScri ...

  2. Codeforces Round #485 (Div. 2) A. Infinity Gauntlet

    Codeforces Round #485 (Div. 2) A. Infinity Gauntlet 题目连接: http://codeforces.com/contest/987/problem/ ...

  3. python bittorrent 使用与学习

    更新于20171128 关于这个p2p的技术,阿里开源了蜻蜓,大家可以看看,感觉应该比这个要好用,而且文档也全. 前言 最近在学习python的p2p协议,发现网上找不到好的文章,又仔细找了找终于找到 ...

  4. 使用pyenv在系统中安装多个版本的python

    pyenv的安装与使用 如果没有安装git,首先要安装git apt-get install git 安装完成后,使用自动安装程序提供的单行程进行安装: curl -L https://github. ...

  5. lucene的suggest(搜索提示功能的实现）

    1.首先引入依赖 <!-- https://mvnrepository.com/artifact/org.apache.lucene/lucene-suggest --> <!-- ...

  6. Springmvc <mvc:cros>和<mvc:intercepters>同时使用时，跨域被拦截了

    问题原因:cros也是使用拦截器实现的,并且拦截器配置最后一个处理,导致在跨域处理之前调用了业务拦截器 解决方案:推荐使用http://software.dzhuvinov.com/cors-filt ...

  7. .NET MVC 学习笔记（一）— 新建MVC工程

    一..NET MVC 学习笔记(一)—— 新建MVC工程 接触MVC有段时间了,一直想找机会整理一下,可是限于文笔太差,所以一直迟迟羞于下手,想到最近做过的MVC项目也有一些了,花点时间整理一下方便以 ...

  8. Dot & cross product

    https://www.khanacademy.org/math/linear-algebra/vectors-and-spaces/dot-cross-products/v/vector-dot-p ...

  9. 一篇入门 -- Git

    一. Git 介绍 Git作为一款分布式的==版本控制==工具,作为一名程序员,是必须要掌握的. 最初由林纳斯·托瓦兹(Linus Torvalds)创作,于2005年以GPL发布.最初目的是为更好地 ...

  10. [CocoaPods]入门

    什么是CocoaPods? CocoaPods管理Xcode项目的库依赖项. 项目的依赖项在名为Podfile的单个文本文件中指定.CocoaPods将解析库之间的依赖关系,获取生成的源代码,然后在X ...