JQuery元素内增加元素方法的函数参数

最新推荐文章于 2023-12-24 22:09:56 发布

_荣耀之路_

最新推荐文章于 2023-12-24 22:09:56 发布

阅读量2.2k

点赞数

分类专栏： JQuery 文章标签：函数参数增加元素 append/prepend html text

本文链接：https://blog.csdn.net/asty9000/article/details/84667210

版权

JQuery 同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

JavaScript

28 篇文章 2 订阅

订阅专栏

JQuery元素内增加元素的方法，从JQuery1.4起，部分方法可以接受一个函数作为参数。

传入append/prepend中作为参数的函数接受两个参数，第一个参数为当前元素在选中的元素集中的位置索引，索引从0开始计算，第二个参数为元素的html内容字符串。返回值可以是html内容字符串、DOM元素、文本或jQuery对象。在函数中，this引用元素集中的当前元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(a);
	
  });
 function a(index,html){
    //return " <b>第"+(index+1)+"个p元素末尾添加b元素</b>";
    return $(" <b>第"+(index+1)+"个p元素末尾添加b元素</b>");
  }
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button id="btn1">添加文本</button>
</body>
</html>

传入html中作为参数的函数接受两个参数，第一个参数为当前元素在选中的元素集中的位置索引，索引从0开始计算，第二个参数为元素的html内容字符串。返回值可以是html内容字符串，也可以是jQuery对象。在函数中，this引用元素集中的当前元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").html(a);
  });
 function a(index,html){
    //return $(" <b>第"+(index+1)+"个p元素添加b元素</b>");
    return " <b>第"+(index+1)+"个p元素添加b元素</b>";
  }
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button id="btn1">添加文本</button>
</body>
</html>

传入text中作为参数的函数接受两个参数，第一个参数为当前元素在选中的元素集中的位置索引，索引从0开始计算，第二个参数为元素的html内容字符串。返回值只能是普通字符串，如果字符串包含html标签，则标签不会被解析。在函数中，this引用元素集中的当前元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").text(a);
  });
 function a(index,text){
    return " 第"+(index+1)+"个p元素末尾添加文本";
  }
});
</script>
</head>
<body>
    <p><b>这是一个段落。</b></p>
    <p><b>这是另外一个段落。</b></p>
<button id="btn1">添加文本</button>
</body>
</html>