uy9gwwbig61z8m 发表于 2023-2-10 22:29:42

web开发之-jquery的基本使用(3)

jquery操作元素内容

添加元素append,prepend,before,after:
$(function(){    var dom = $("#container_id");    dom.append("<span>我是append添加的元素</span>");    dom.prepend("<span>我是prepend添加的元素</span>");    dom.after("<span>我是after添加的元素</span>");    dom.before("<span>我是before添加的元素</span>");});


https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/9e33dec4b7aa4dc89a9e58d329629ace~tplv-tt-large.image?x-expires=1991402872&x-signature=2lXhOxEoqo6NKUo6zGAUO5H7arI%3D

注:以上虽然都是添加元素,但是有细微的差别:
append:是在选择的dom 内部 的后面添加元素;
prepend:是在选择的dom 内部 的前面添加元素;
after:是在选择的dom后面添加的元素;
before:是在选择的dom前面添加的元素;
更改元素text,html:
$(function(){    var dom = $("#container_id");    dom.text("我是通过text方法更改的元素")    var dom1 = $(".container_class:eq(0)");    dom1.html("<div>我是通过html方法更改的元素</div>");});


https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/7d82214951cc4319a3974fc2e4497c92~tplv-tt-large.image?x-expires=1991402872&x-signature=%2FXgRYywNsdm8Qq4oz1dTxslUh9A%3D

注:
我们可以使用选择器的text()和html()来获取元素,同样的也可以在这个方法里面写入参数来更改内容
删除元素remove和empty:
$(function(){    var dom = $("#container_id");    // dom.remove();    dom.empty();});


https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/7a1bac53235346fa8ddc14fce9a4875e~tplv-tt-large.image?x-expires=1991402872&x-signature=BEU3c6JImHIIB4KosTdMr8vIiQY%3D

注:
你可以更改不同的注释内容看下源码里,
remove:这个方法会把当前选中元素和子元素全部从dom中删除;
empty:这个方法会把选中的元素的 子元素 从dom中删除;

郭梅 发表于 2023-2-10 22:29:51

转发了
页: [1]
查看完整版本: web开发之-jquery的基本使用(3)