jQuery文档操作

编辑本博客

插入操作

append()

• 字符串，"<li><a href='#'>LuFull</a></li>"

  //直接以字符串方式追加内容
  $('ul').append("<li><a href='#'>LuFull</a></li>")

• 插入对象元素

  var oli=document.createElement("li")
  oli.innerHTML="哇擦擦"
  $('ul').append(oli)

• 移动当前页面中的元素

  //如果直接的内容是当前页面中的某些元素，那么这些元素将从原来位置消失。即移动
  $('ul').append($("span"))

appendTo()

效果和append()一样，先创建被插入的元素，追加到最后

//appendTo()效果和append()一样
//创建被插入的元素
$("<a href='#'>feifei</a>").appendTo($("ul"));

prepend()插入到被选中元素的第一个位置

$("ul").prepend("<li>插入到第一个元素位置</li>")

prependTo()

$("<li>插入到第0个元素</li>").prependTo($("ul"))

before()

在选定元素之前插入新的元素

//在选定元素之前添加其他元素
$("ul").before("<h2>我是标题</h2>")

after()

在选定元素之后添加新的元素

//在选定元素之后添加其他元素
$("ul").after("<h2>我是标题3</h2>")

指定元素之后插入内容

//在指定元素之后插入内容
$('<a href="#">第一个</a>').insertAfter("<h3>我是一个三级标题</h3>")

指定元素之前插入内容

//insertBefore()在指定元素之前插入内容
$('<a href="#">第一个</a>').insertBefore("<h3>我是一个三级标题</h3>")

复制操作

clone(ture|false)方法

• true元素以及所有事件都进行复制，即完全克隆
• false，默认值，只复制元素

替换操作

$("h2").replaceWith('<button>newButton</button>')

所有的元素进行替换

//所有的按钮替换成超链接
$('<a href="#">替换超链接</a>').replaceAll('button');

删除操作

• empty：清空

  //清空备选元素内容
  $("ul").empty();

• remove：删除选定元素，所有都清空

  //删除备选元素
  $("ul").remove();

• detach：删除并返回删除的元素，事件保留

  //删除并返回删除的元素
  var dul=$("btn").detach();