jQuery中after的两种用法实例

法一：
在每个p元素后插入内容：


代码如下:

$("button").click(function(){
      $("p").after("<p>Hello world!</p>");
});

法二：


代码如下:

$("button").click(function(){
    $("p").after(function(n){
            return "<p>The p element above has index " + n + "</p>";
    });
});

after中函数必须返回一个html字符串。

赞 (0)

相关推荐

  • jQuery使用after()方法在元素后面添加多项内容的方法

    本文实例讲述了jQuery使用after()方法在元素后面添加多项内容的方法.分享给大家供大家参考.具体分析如下: jQuery可通过after()方法在元素后面添加多项内容,after()可以带多个参数,在指定元素后面添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function af

  • jQuery中before()方法用法实例

    本文实例讲述了jQuery中before()方法用法.分享给大家供大家参考.具体分析如下: 此方法可向每个匹配元素的外部的前部追加HTML内容. 特别说明: 此方法是追加内容,也就是原来的内容还在. HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染. 文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染. 语法结构: 复制代码 代码如下: $(selector).before(content) 实例代码: 实例一: 复制代码 代码如下: <

  • jQuery 追加元素的方法如append、prepend、before

    jQuery 追加元素的方法如append、prepend、before

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 $("p").append("Some appended text."); 2.jQuery prepend() 方法 jQuery prepend() 方法在被选元素的开头插入内容. 实例 $("p").prepend("Some prepended text."); 3.after() 和 before() 方法

  • jQuery使用before()和after()在元素前后添加内容的方法

    本文实例讲述了jQuery使用before()和after()在元素前后添加内容的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function()

  • jQuery中append、insertBefore、after与insertAfter方法注意事项

    这里列的是针对初学jQuery者来说容易搞不懂的部分,我在这里把这些方法列了个清单,希望大家能看的懂.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A

  • jQuery中after()方法用法实例

    本文实例讲述了jQuery中after()方法用法.分享给大家供大家参考.具体分析如下: 此方法可向每个匹配元素的外部的尾部追加HTML内容. 特别说明: 此方法是追加内容,也就是原来的内容还在. HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染. 文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染. 语法结构: 复制代码 代码如下: $(selector).after(content) 实例代码: 实例一: 复制代码 代码如下: <!D

  • jQuery中after的两种用法实例

    法一:在每个p元素后插入内容: 复制代码 代码如下: $("button").click(function(){      $("p").after("<p>Hello world!</p>");}); 法二: 复制代码 代码如下: $("button").click(function(){    $("p").after(function(n){            return

  • vue3.0中setup的两种用法实例

    目录 前言 一.setup函数的特性以及作用 二.setup函数的注意点: 用法1:结合ref使用 用法2:代码分割 总结 前言 这篇文章主要介绍了vue3.0中setup使用,本文通过两种用法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 什么是setup setup是vue3新增的生命周期函数,setup的加入就是为了让vue3使用组合式API(Composition API).使用组合式API更符合大型项目的开发,通过setup可以将该部分抽离成函数,

  • Javascript中call的两种用法实例

    用法一(常见用法): 表现形式为:一个对象.方法.call(另一个对象),意义是用另一个对象代替当前对象,执行当前对象的方法.先看示例: 复制代码 代码如下: function Class1(){    this.name = "class1";    this.showName = function(){        alert(this.name);    }}function Class2(){    this.name = "class2";}var c1

  • jquery 中toggle的2种用法详解(推荐)

    一.在元素的click事件中绑定两个或两个以上的函数  toggle不像bind需要在后面添加"click"来绑定click触发事件,toggle本身就是click触发的(而且只能click触发), 如下实例: <input id="btntest" type="button" value="点一下我" /> <div>我是动态显示的</div> <script type="

  • VUE中filters过滤器的两种用法实例

    VUE中filters过滤器的两种用法实例

    目录 前言 一.全局过滤器 全局过滤器之单一挂载 全局过滤器之批量挂载 二.组件过滤器 附:过滤器中传入多个参数 总结 前言 Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号({undefined{ }})插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示. <!-- 在双花括号中 --> <div>{{ message | capitaliz

  • jQuery中attr()与prop()函数用法实例详解(附用法区别)

    jQuery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2.

  • JQuery中的事件及动画用法实例

    本文实例讲述了JQuery中的事件及动画用法.分享给大家供大家参考.具体分析如下: 1.bind事件 复制代码 代码如下: <script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () {  //bind事件,其中包含三个参数,第一

  • jQuery中常用的遍历函数用法实例总结

    本文实例总结了jQuery中常用的遍历函数用法.分享给大家供大家参考.具体如下: 1. children()函数 children()函数用于选取每个匹配元素的子元素,并以jQuery对象的形式返回. 你还可以使用选择器进一步缩小筛选范围,筛选出符合指定选择器的元素. 用法示例如下: // 返回jQuery对象所有匹配元素的标识信息数组 // 每个元素形如:tagName或tagName#id(如果有id的话) function getTagsInfo($doms){ return $doms.

  • Jquery中find与each方法用法实例

    本文实例讲述了Jquery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") $("#"+"id") $(this) $(element) 等等,只要灵活运用,就能爆发出强大的可造型. 但是在实际使用中,仍然觉得有些不足. 如果想要在某个元素下寻找特定的元素,仅仅依靠上面这个方法,就必须对 $("

  • jQuery中ajax的get()方法用法实例

    本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri

随机推荐