首页
学习
活动
专区
圈层
工具
发布

jQuery 中在元素中添加插入内容方法 after, append, appendTo, before, prepend, prependTo 的区别

jQuery 在元素中添加插入内容的方法和区别,整理成表格,省的每次都要翻: jQuery方法 解释 after() 在被选元素之后插入指定内容 insertAfter() 在被选元素之后插入 HTML...append() 在被选元素的结尾(仍然在内部)插入指定内容 appendTo() 在被选元素的结尾(仍然在内部)插入 HTML 标记或已有的元素。...prepend() 在被选元素的开头(仍然在内部)插入指定内容 prependTo() 在被选元素的开头(仍然在内部)插入 HTML 标记或已有的元素 千言解释不如一图示意: 具体代码: This is the target div to which new elements are associated using jQuery var $...target = $('.target'); $target.append('1. append'); $target.prepend('<div class

3.1K30

JQuery的简述、使用方法和选择器

JQ简述1 1、 jQuery出现的背景(Javascript遇到的问题) 选择器功能弱 DOM操作繁琐之极 浏览器兼容性不好 动画效果弱 2、什么是 jQuery(概念) jQuery...除非特殊要求,一般不会使用 3.x 版本的,很多老的 jQuery 插件不支持这个版本。目前该版本是官方主要更新维护的版本。 注:推荐学习时使用1.x版本,功能更加完善,所学习到的东西更多。...(…….); 作用 2:$(selector) 选择器 jQuery具有强大的选择器功能 ?...使用前的准备 ? JQ中常用的选择器 一、基本选择器 1、id选择器 通过元素id获取相关元素 ? 2、元素选择器 获得body内的相关元素,如div、input等 ?...3、类选择器 通过元素类名获取相关元素,eq()方法获取元素,下标从0开始 ? 4、通用选择器 找到每一个元素 ? 5、分组选择器 找到匹配任意一个类的元素。 ?

1.9K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js与jQuery的区别以及jQuery选择器和方法的使用

    目录 使用jQuery js与jQuery代码对比 jQuery选择器:用来选中元素 基本方法 ---- js与jQuery代码对比 jQuery选择器:用来选中元素 基本方法 使用jQuery jQuery...官网:http://jquery.com/ 为什么要学jQuery:可以简化JavaScript开发,jQuery中包含有:选择器,CSS样式,HTML事件处理,JS动画 以及丰富的插件等等,而且浏览器兼容性很高...3.3.1 建议下载开发版本 2、HBuilder使用 创建项目 3、把jQuery库复制到项目中的js文件夹中 4、引入jQuery库文件: 注意:script标签中不要写内容,写jQuery代码就再写一对...基本方法 通配符:如果选中所有的元素 可以直接用通配符 * 表示所有。 选择器还可以组合多个一起使用,可以分为并集和交集。...并集:selector1,selector2,用逗号隔开 交集:selector1 selector2 用空格隔开 下面我们用代码分别实现一下不同选择器实现效果的方式: 案例2:使用基本选择器改变元素背景色和字体颜色

    16.6K10

    jQuery介绍与常见选择器的使用

    2.强大的选择器。jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。...jQuery将所有的AJAX操作封装到一个函数$.ajax()里,使得开发者处理AJAX的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。...图中的Download the compressed, production jQuery 3.2.1是最小化版,代码经过压缩的,一般用于生产环境。...未压缩版的jQuery代码是正常的格式,在开发时遇到一些特殊的问题就可以参考源码寻找解决方法: ?...,其他的选择器使用方式可以参考以下jQuery的中文文档: https://www.jquery123.com/ 简单的事件注册: 通过选择器搜索出来的对象包装后是jQuery对象,所以不能使用DOM中的事件注册方式

    3.3K10

    jQuery通过id选择器绑定双击事件,和appendTo()方法的使用详解

    下拉列表绑定一个双击事件dblclick() $("#id”).dblclick(function(){ //获取列表中所有被选中的option var alloptions...= $("option:selected");//这种写法存在问题,如果已分配列表中也有被选中的option同样会被选中//不可以 var alloptions = $("#id option...$("option:selected");//不可以 var alloptions = $("option:selected",$("#id"));//选择哪个下拉(select)列表的被选中的值...,选中中的值(第四种写法) alert(alloptions.length); //appendTo()把所有匹配的元素追加到另一个指定的元素元素集合中。...//实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把b追加到a,而是把a追加到b $("option:selected",this).appendTo($("

    1.8K20

    【JavaWeb】86:jQuery的属性、文档、动画以及事件

    并且更令人惊讶的是,其实这只是jQuery使用文档中的一部分,还有很多很多Api。 API是非常非常多的,全部学完那得花不少时间,只能说每种都学一点,学比较常见的。 ?...②通过类选择器设置样式 先设置一个css类选择器样式,再通过addClass()函数,将对应标签指定为该类。 这样的话,选取的标签的样式也就是类选择器设定的样式了。...值得注意的是:如果选取的标签已经被CSS的id选择器指定了样式,那么这种方法是没有用的,因为id的优先级要比类高。...③外部插入after 格式:("#myId01").after( 这个是和append是类似的,也是添加到后面。...和append的区别在于: append是内部添加到后面 after是外部添加到后面 通过①和③的格式对比,可以很明显看出来。 ④内部插入prepend 原理③,只不过③是后面,④是前面。

    2.7K40

    第75天:jQuery中DOM操作

    2.text() 使用text()方法读取或者设置元素的innerText。 就是相当于javascript里头的innerText。...3.attr() 使用attr()方法读取或者设置元素的属性,对于jQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。...$(html字符串) 使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象。 然后调用可以append等方法将新创建的节点添加到Dom中。...三、追加(父元素.append(子元素)) 1.添加小儿子  append append方法用来在元素的末尾追加元素(最后一个子节点)。...myclass是css的选择器名 3.移除样式 移除样式removeClass("myclass"), 4.切换样式 切换样式(如果存在样式则去掉样式,如果没有样式则添加样式) toggleClass

    1.1K20

    jQuery笔试题汇总整理--2018

    封装的非常的好,不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。)...对象[下标]获取dom对象 将dom对象放入$("")中转为jQuery对象 6、jQuery中$.get()提交和$.post()提交的区别 1、$.get()使用GET方法来进行异步提交 $.post...=向上滑动 slideDown()==向下滑动 8、jQuery中使用过哪些插入节点的方法,他们的区别是什么 在元素内部添加 append:向每个匹配的元素内部追加内容 我想说...获取HTMl:$("选择器").html() 获取文本的值:$("选择器").text() 11、jQuery中有哪些方法可以遍历节点?...)和removeClass(class)为指定的元素添加或移除样式.   12)css(name)访问第一个匹配元素的样式属性.   13)ajax([options])通过HTTP请求加载远程数据

    3.3K21

    JQuery 学了不亏

    var div = $(“div”)[0]; 方法二 : 使用jQuery的get(index)取原生对象 var div2 = $(“div”).get(0); jQuery获取元素 jQuery...属性,对应选择器样式 针对类选择器,提供操作class属性值的方法 addClass("className") //添加指定的类名 removeClass("className")//移除指定的类型...,属性和样式 作为子元素添加 $obj.append(newObj); //在$obj的末尾添加子元素newObj $obj.prepend(newObj); //作为第一个子元素添加至$obj中...index - 选择器的 index 位置 data- 当前的数据 jQuery事件处理 文档加载完毕 原生 JavaScript 方法:window.onload jQuery: //语法一 $(...this 为原生对象只能使用原生的属性和方法,可以使用 $(this) 转换为 jquery 对象,使用 jquery 方法。

    2.4K30

    HTML5中类jQuery选择器querySelector的使用

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器...用法 两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法。...querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素。...('.foo,.bar');//返回带有foo或者bar样式类的首个元素 querySelectorAll 该方法返回所有满足条件的元素,结果是个nodeList集合。...浏览器报怨表示不是一个合法的选择语句。 同时,有趣的事情来了,或许你以为将冒号直接转义就解决问题了。 ? 同样,也表示非法。

    4.8K70

    JQuery从入门到实战

    说白了就是定义好的一个 JS 文件,内部封装了很多功能,可以大大简化我们的 JS 操作步骤。 jQuery 官网:https://www.jquery.com。 要想使用,必须要引入该文件。...jQuery 的核心语法 $(); 2、JQuery基本语法 2.1、JS对象和JQuery对象转换 jQuery 本质上虽然也是 JS,但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery...对象,而不是 JS 方式获得的 DOM 对象,二者的 API 方法不能混合使用,若想使用对方的 API,需要进行对象的转换。...JS里面的功能 // 将 jQuery对象转换为JS对象 let js = jqDiv[0]; alert(js.innerHTML); 2.2、事件的基本使用 常用的事件 在 jQuery 中将事件封装成了对应的方法...jQuery 对象[索引] jQuery 对象.get(索引):将 jQuery 对象转为 JS 对象。 事件 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。

    16.2K30

    好久不用 jQuery, 来复习一下

    jQuery 对象就是经过 jQuery 包装之后的 DOM 对象。jQuery 对象不能使用 DOM 对象的任何方法,同理 DOM 对象也不能使用 jQuery 对象的任何任何方法。...属性值 removeClass() 删除class属性值 toggleClass() 切换class属性,有则删除,无则添加 css() 修改 css 样式 1.3.3 CRUD 操作 说明 append...在 HTML 文档里,为一个元素调用 hide() 方法,会将该元素的 display 样式改为 “none”。...当把元素隐藏后,可以使用 show() 方法将元素的 display 样式设置为先前的显示状态。提供了 toggle() 方法进行二者之间的切换。...要解决这个问题,可以使用 jQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。

    6.1K40
    领券