html实训心得体会 百度,jQuery对html的操作总结

jquery操作html元素可以带来更多的意想不到的动态效果，给网页带来更丰富的内容。但是，jquery的函数很多，要准确的找到自己需要的函数很不容易，所以小编就在这里总结一下，方便自己，方便他人。

第一个函数，添加html元素。append()这个函数功能很强大，可以用js对html元素加工，然后再用这个函数输出。使用方法：$(selector).append("html代码");这样会输出html的内容到选择器里后面(结尾)。由于要输入到选择器里，选择器应该是一个容器，如：table，p。不会覆盖已有内容。

第二个函数，添加html元素。appendto()和append()类似。使用方法：$("html代码").appendto(selector);这样会输出html内容到选择器里后面(结尾)。由于要输入到选择器里，选择器应该是一个容器，如：table，p。不会覆盖已有内容。

第三个函数，添加html元素。after()和append()或appendto()不一样的是，它可以有无限个参数。使用方法:$(selector).after("html元素1","html元素2","html元素3",……);当然，你可以把含有html元素的字符串全部连起来，变成一个，再用append()输出。这样会输出html内容到选择器外后面(结尾)。当然，选择器不必是一个容器，例如：img。不会覆盖已有内容。

第四个函数，添加html元素。before()和after()差不多使用方法$(selector).before("html元素1","html元素2","html元素3",……);这样会输出html内容到选择器外前面(开头)。当然，选择器不必是一个容器，例如：img。不会覆盖已有内容。

第五个函数，添加/更改html元素。html()使用方法:$(selector).html("html元素");略有不同的是，这个东西会覆盖已有内容！！！输出到选择器里。所以选择器是一个容器，如：table。覆盖已有内容，可以实现无刷新页面改！

第六个函数，删除html元素。remove()使用方法：$(selector).remove();这样会删除选择器对应的html元素，注意：html元素所含有的所有绑定的事件、附加的数据(如onclick事件)也会被删除。可以和添加html元素的函数一起使用，移动HTML元素。注意：移动后HTML元素的保留所有绑定的事件、附加的数据就没了！使用方法：$(selector2).append($(selector1).remove());这样selector1的HTML元素就会移动到selector2中。

第七个函数，删除html元素。detach()使用方法：$(selector).detach();和remove稍有不同的是，这个函数不会删除HTML元素的所有绑定的事件、附加的数据(如onclick事件)。当然，可以和添加html元素的函数一起使用，移动html元素。保留其保留所有绑定的事件、附加的数据。使用方法：$(selector2).append($(selector1).detach());这样selector1的HTML元素就会移动到selector2中。

第八个函数，回复html元素。prepend()使用方法： x=$(selector1).detach();$(selector2).prepend(x);这样可以恢复被删除的HTML元素，恢复后有没有所有绑定的事件、附加的数据视删除函数而定。单独使用prepend可以添加HTML元素到选择器的开头，使用方法与append差不多。还有一个函数是prependto()，类似于append()与appendto()的关系。

举报/反馈