jquery的dom操作方法中,包括了after与insertAfter,这两个方法名字相近,所实现的功能从名字中不容易分辨,所以在经过试验后撰文一篇以加深记忆。...测试代码如下: 测试insertAfter与after的区别 <body...如果把insertAfter方法换为after,效果则为: ? 从上述对比可以看出,其实这两个方法的差别就像主语跟宾语的差别一样,是主与从的问题。...after方法,是把参数元素移到调用方法的元素的后面,而insertAfter方法则恰恰相反,是把调用方法的元素插入到参数元素的后面。...另外要注意的是,当要用这两个方法在dom树中添加新元素时,如”new”,这样的html字符串不能出现在after方法的调用主体或insertAfter的参数中,因为这样一来,jquery
一样,after() / insertAfteer() / before() / prepend(),都会经过 domManip() 和 buildFragment() 的洗礼,最后调用原生JS的方法来实现...所以,本文只讲述 jQuery 中最后对 after() / insertAfter() / before() / prepend() 处理的相关代码。...---- 一、示例HTML 这是divTwo <div id="divOne...三、<em>insertAfter</em>() 作用:在被选元素(外部)后 插入 HTML 元素 $("#divTwo").insertAfter($("#divOne")) //等价于 $("#divOne").after...} ); 解析:insertAfter() 是如何偷懒,调用 after()的?
在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我们发现一个问题,就是假设在图片列表之后还有其他的元素...,这个时候貌似就没有办法了,我们的真实想法是,让新创建的元素紧更在图片列表的后面,而不管这个列表出现在文档的那个地方.下面我们就来介绍两个方法来帮助解决这个问题。...2、insertAfter() 大多数人会想,既然有insertBefore()方法肯定会有insertAfter()方法,很可惜这个方法,DOM并没有提供,但是我们却可以利用DOM所提供方法和属性来自定义一个...inserAfter()方法;代码如下: function insertAfter(newElement, targetElement) { /*...parentElement.insertBefore(newElement, targetElement.nextSibling); } } 这个自定义的insertAfter
insertAfter()与insertBefore() 与内部插入处理一样,jQuery由于内容目标的位置不同,然增加了2个新的方法insertAfter与insertBefore 选择器 描述 insertAfter...对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面 .after()和.insertAfter() 实现同样的功能...对于 .insertAfter(), 刚好相反,内容在方法前面,它将被放在参数里元素的后面 before、after与insertBefore。...insertAfter的除了目标与位置的不同外,后面的不支持多参数处理 ').insertAfter($(".test2")) }) 注意事项: insertAfter将JQuery封装好的元素插入到指定元素的后面
大家好,又见面了,我是你们的朋友全栈君。 append():前面是被插入的对象。最后面增加子元素,父子级关系。 appendto():后面是被插入对象。最后面增加子元素,父子级关系。...DOCTYPE html> js中常用追加元素的几种方法 <script src="JQ 源码/jquery-1.8.3.min.<em>js</em>...(),将元素追加到指定对象<em>的</em>后面(是同级关系) $(".insertAfter").click(function(){ $("我是同级元素insertAfter").insertAfter($("#wrap")); }); //insertBefore(),将元素追加到指定对象的前面
看到这个题目,估计好多小伙伴要吐槽了,这么简单的一个东西也值得拿出来,之所以把这个jquery的方法拿出来,因为它是有故事的 相信不少搞前端的小伙伴都用过jquery.validate.js...if (element.attr("name") == "fname" || element.attr("name") == "lname" ) { error.insertAfter...("#lastname"); } else { error.insertAfter(element); } }...}); 问题就来了,这个例子是把每次失败信息记录到table的单元中,但我们很多时候需要的仅仅是显示最近一个错误信息,但是jquery的insertAfter会不断增加错误信息条数,因此我们需要在insertAfter...的名字,所以errorClass的名字不能与html中其他元素类名相同
hxb.insertAfter(newElement,targetElement); //在hxb中插入newElement到子节点targetElement之后。...因为js中没有insertAfter()方法,所以自己写一个。.../* insertAfter()方法 */ function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode...//在#id节点之后添加.appendDom元素节点 $('.appendDom').appendTo('#id'); //把.appendDom元素节点插入到#id节点的最后...(内部)(和append效果相同) $('.appendDom').prevpendTo('#id'); //把.appendDom元素节点插入到#id节点的最开始(内部)(和prevpend
需求 在历史问题的情况下,存在需要往jquery项目中引入vue.js框架的情况,这种情况下,因为前期并没有使用webpack进行打包压缩,所以考虑直接使用原生的js拆分vue.js的组件,不依赖与wabpack...-- 导入组件的import.js --> 在这里要注意:jquery的load方法是不能用在 vue 的 app...所以在下面的使用import.js引入所有组件的内容,然后用 main.js 来编写 vm 实例。 5....编写import.js // 导入login组件 $('').insertAfter("#app"); // 在app后面加入login标签 $('login').load
5px;box-shadow:5px 2px 6px #000; border: 2px solid #666} .oneiframe{ width: 100%; height: 100% } main.js...}); var v=$('#product-picurl').val(); if(v){ $('<img ').attr({"src":v,"style":"height:50px"}).insertAfter...public $baseUrl = '@web'; public $css = [ 'css/site.css', 'css/main.css', ]; public $js...$fileName."';"; echo "insertAfter(img,oneinput);"; echo "oneupload.parentNode.removeChild...以上就是本文的全部内容,希望对大家的学习有所帮助。
Hello"); $("").before(content|fn) ----->$("p").before("Hello"); $("").insertAfter...(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore...('ul li').bind('click', function(){console.log('click');})一样;我通过js给ul添加了一个 //li:$('ul')....append('js new li');这个新加的li是不会被绑上click事件的 //但是用$('ul').on('click', 'li', function...(){console.log('click');}方式绑定,然后动态添加 //li:$('ul').append('js new li');这个新生成的li被绑上了
目录 创建节点 节点插入 节点删除 节点替换 节点复制 创建节点 document.createElement("li"); //js创建li节点 var $li=$(""); /.../jQuery创建li节点 节点元素插入 内部插入(父子节点关系) js对象.appendChild:在内部添加节点 var o=document.createElement("li"); //创建节点...选中的js对象.appendChild(创建的节点); //js在内部插入节点 在内部最后一个元素后插入节点 selector.append(节点对象):在selector元素内部的最后插入"节点对象..."); $("ul").after($div); } 节点对象.insertAfter(selector):将"节点对象"插入到selector1后面 function after(){...var $div = $("ul后的div"); $div.insertAfter($("ul")); } 在指定节点前面插入节点 selector.befor(节点对象):在selector
/js/jquery-3.3.1.min.js"> $(function () { // 获取myinput 的value.../js/jquery-3.3.1.min.js"> $(function () {.../js/jquery-3.3.1.min.js"> .one{ width: 200px; height...A的前面,对象A和B是平级的; 7)insertAfter():如A.insertAfter(B),将对象B添加到A的后面,对象A和B是平级的; 8)insertBefore():如A.insertBefore.../js/jquery-3.3.1.min.js"> $(function () {
官网地址:http://jqueryvalidation.org/ 导入JS文件 下载压缩包后validate文件位于dist目录,目录中包含jquery.validate.js 与 additional-methods.js...additional-methods.js为附加的验证方法,可根据情况导入。 <script src="....(error, element) { if(element.attr("name") == 'data[captcha]') { error.insertAfter...("#captcha_msg"); } else { error.insertAfter(element); }...,element,param) value是元素的值, element是元素本身 param是参数 如additional-methods.js中的lettersonly验证 jQuery.validator.addMethod
jQuery中的DOM操作 内容操作 html():获取/设置元素标签体中的内容 text():获取/设置元素标签体中的纯文本内容 val():获取/设置元素value属性值内容 属性操作 1....对象1和对象2是兄弟关系 insertAfter() 对象1.insertAfter(对象2):将对象2添加到对象1后边。...对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点 jQuery中的动画操作 标签默认的显示与隐藏 jQuery动画练习 <script src="<em>js</em>...jQuery中<em>的</em>遍历操作 <!
) 4. css() 三、CRUD操作 1. append() 2. prepend() 3. appendTo() 4. prependTo() 5. after() 6. before() 7. insertAfter...一个超会写bug的程序猿! 一杯茶一包烟,一个BUG修一天!又是被bug困扰的一天! 之前和大家分享了jQuery框架中选择器的相关操作“【JQuery框架】五大选择器“全家桶”详解!!!”.../js/jquery-3.3.1.min.js"> $(function (){ // 获取myinput 的value值 var...如果操作的是元素的固有属性,则建议使用prop 如果操作的是元素自定义的属性,则建议使用attr (2)对class属性操作 1. addClass() 作用:添加class属性值 //<input...对象1和对象2是兄弟关系 7. insertAfter() 样例:对象1.insertAfter(对象2):将对象1添加到对象2后边。
感觉以前的界面按钮有些小,正好改成3.0.3的css前端框架试试~。...把以前的input状态栏改为span。 状态栏下方的外链地址列表改为倒序排列,不用每次都翻滚动条。用JQ的insertAfter()方法解决。...+eval(sumu + t)+" ").insertAfter("#status");//JQ方法 $("#anniu").zclip({path:"http://pan.baidu.com...参考:wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴 顺手扒下来百度网盘复制功能的zClip flash:http://pan.baidu.com/res/static.../images/ZeroClipboard10.swf 这文件不大,用度娘的就免的再上传了。
大家好,在前两篇文章里 127个常用的JS代码片段,每段代码花30秒就能看懂(一)和 127个常用的JS代码片段,每段代码花30秒就能看懂(二),我分享了前42段代码,今天我继续分享第三部分,希望对你的日常工作有所帮助...initial([1, 2, 3]); // [1,2]const initial = arr => arr.slice(0, -1); initial([1, 2, 3]); // [1,2] 53、insertAfter...此段代码的功能主要是在给定的DOM节点后插入新的节点内容 const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend...', htmlString); insertAfter(document.getElementById('myId'), 'after'); // ......,感谢你的阅读,如果你喜欢我的分享,麻烦给个关注、点赞加转发哦,你的支持,就是我分享的动力,后续会持续分享剩余的代码片段,欢迎持续关注。
在core.js执行的时候读取这段文本,然后动态执行一次。浏览器不会执行之间的代码 html中的事件处理程序 当脚本所在的html文件被载入的时候。脚本里的js会执行一次。...为了可交互,js会定义事件处理程序即web浏览器先注册函数,并在之后调用其作为事件的响应。其中事件处理程序的属性可以包含任意条js语句。相互之间用逗号分隔。...url中的js 应用用途 书签 通过协议类型指定url内容为任意字符串,该字符串是会被js解释器运行的js代码,其会被当成单独的一行代码实现。即语句之间必须使用分号作为分割。 即,书签的实现。...事件驱动的js js还能通过注册事件程序函数写程序。之后在发生该事件的时候异步调用这些函数。 程序会响应一个事件,然后调用一个函数,该函数称为事件处理程序,事件监听器,或者回调,将该函数注册。 ...将一个监听器和回调函数绑定,当监听器被触发的时候,回调函数将会被触发。 客户端js线程模型 js的客户端为单线程模型。
day03_js学习笔记_03_js的事件、js的BOM、js的DOM =================================================================...五、js的事件 1、js的常用事件 onclick 点击事件 onchange 用户改变域的内容事件...(开发中用的多) 3、阻止事件的默认行为 4、阻止事件的传播(相当于阻止事件冒泡) 六、js的BOM (1) Window对象(窗口对象...学习笔记_03_js的事件、js的BOM、js的DOM -------------------------------------------------------------------------...---- 一、js的简介 二、js的基本语法 三、js的内建对象 四、js的函数(相当于java中的方法) ----------------------------------------------
领取专属 10元无门槛券
手把手带您无忧上云