跑偏博客简介
主要分享计算机方面的经验，由于博主所学知识太过混杂，只要有兴趣的都想学，所以跑偏博客带给大家带来的可能会涉及计算机领域的多项内容，杂而不乱，都是非常实用的东西。博主会不断更新，绝不会让大家失望。&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&jquery_slip.html&/title&&!--一个标签写错网页什么也不显示，查看网页源码格式明显不对--&
&script type="text/javascript" src="jquery.js"&&/script&
&script type="text/javascript"&
$(document).ready(function(){
$("div.show").click(function(){
$("div.content").slideToggle("slow");//不写默认为normal，后面函数一致
// $("div.show").slideUp();
&script type="text/javascript"&
//注意选择标签不能忘记加""，否则动作不起作用
$(document).ready(function(){
//hide and show function test
$("#hide_button").click(function(){
$("#hide_show_content").hide("slow",function(){
alert("The content is hided.");
$("#show_button").click(function(){
$("#hide_show_content").show("slow",function(){
alert("The content is showed.");
//slideUp and slideDown function test
$("button.slideUp").click(function(){
$("p.slide_content").slideUp("slow");
$("button.slideDown").click(function(){
$("p.slide_content").slideDown("slow");
//animate and reset test
$("button#animate").click(function(){//可以直接用标签名调用id
$("#box").animate({height:"30px"});
$("#reset").click(function(){
$("#box").animate({height:"10px"});
//html application,其中可以加入内容页可以直接加入html标签内容
$(".html").click(function(){
$(".htmlContent").html("The html content.");
$(".htmlreset").click(function(){
$(".htmlContent").html("html application into jquery.");
$(".htmlappend").click(function(){
$(".htmlContent").append("append content.");
$(".htmlafter").click(function(){
$(".htmlContent").after("after content.");
//这里不能直接用函数
// $("html.after").after(function(){
alert("You have add content after html content.");
$(this).click(function(){//也可以直接用this
$(".htmlContent").before("before content",function(){
alert("You have add content before html content.");
$(".htmlprepend").click(function(){
$(".htmlContent").prepend("html prepend content.");
&div class="content"&
&p&We are friends.&/p&
&p&We can do everything if you want. Do it by yourself.&/p&
&p&Don't tell it can not be done.&/p&
&div class="show"&
&p&click here to show content.&/p&
&div id="hide_show"&
&p id="hide_show_content"&There is the function hide and show test.&/p&
&button type="button" id="hide_button"&hide&/button&
&button type="button" id="show_button"&show&/button&
&p class="slide_content"&There is the function slipUp and slipDown test.&/p&
&button class="slideUp" type="button" &slideUp&/button&
&button class="slideDown" type="button"&slideDown&/button&
&div id="box" style="background:#EF23E1;height=10width=10margin=6"&&/div&
&button id="animate" type="button"&animate&/button&
&button id="reset" type="button"&reset&/button&
&p class="htmlContent"&html application into jquery.&/p&
&button type="button" class="html"&htmltest&/button&
&button type="button" class="htmlreset"&htmlreset&/button&
&button type="button" class="htmlappend"&htmlappend&/button&
&button type="button" class="htmlafter"&htmlafter&/button&
&button type="button" class="htmlbefore"&htmlbefore&/button&
&button type="button" class="htmlprepend"&htmlprepend&/button&
& 开源中国(OSChina.NET) |
开源中国社区(OSChina.net)是工信部
指定的官方社区jquery中append()与appendto()用法分析
投稿：shichen2014
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jquery中append()与appendto()用法分析,以实例的形式分析了jquery中append()与appendto()的具体语法与详细用法,需要的朋友可以参考下
本文实例分析了jquery中append()与appendto()的用法。分享给大家供大家参考。具体分析如下：
在jQuery的文档操作方法中，append()和appentto()方法执行的任务相同，但是两者也有区别。
1、append()方法：在被选元素的结尾（但仍在元素内部）插入指定的内容。
a、语法： 代码如下:$(selector).append(content);其中，参数content是必需的，指定要附加的内容。
b、append能够使用函数给被选元素附加内容，语法为： 代码如下:$(selector).append(function(index,html));其中，function()是必需的，参数index和html都是可选的。index表示接收选择器的index位置，html表示接收选择器的当前html。
代码如下:&html&&
&script type="text/javascript" src="/jquery/jquery.js"&&/script&&
&script type="text/javascript"&&
$(document).ready(function(){&
& $("button").click(function(){&
&&& $("p").append(" &b&Hello jQuery!&/b&");&
&/script&&
&p&This is a paragraph.&/p&&
&p&This is another paragraph.&/p&&
&button&在每个 p 元素的结尾添加内容&/button&&
运行结果如下：
This is a paragraph. Hello jQuery!
This is another paragraph. Hello jQuery!
2、appendto()方法：在被选元素的结尾（但仍在元素的内部）插入指定的内容。但不能使用函数来附加内容。
语法： 代码如下:$(content).appendto(selector);
代码如下:&html&&
&script type="text/javascript" src="/jquery/jquery.js"&&/script&&
&script type="text/javascript"&&
$(document).ready(function(){&
& $("button").click(function(){&
&&& $("&b& Hello jQuery!&/b&").appendTo("p");&
&/script&&
&p&This is a paragraph.&/p&&
&p&This is another paragraph.&/p&&
&button&在每个 p 元素的结尾添加内容&/button&&
运行结果如下：
This is a paragraph. Hello jQuery!
This is another paragraph. Hello jQuery!
希望本文所述对大家的jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具11:44 提问
jquery2.0 追加到的html的input绑定click事件
jquery2.0后，在页面加载的事件里，动态绑定事件则是用到on方法。大家看一下以下代码段：
$(function () {
var tstr = "";
tstr += "&tr&&td&&input type='text' &&/td&";
tstr += "&td style='vertical-align:'&删除&h2&×&/h2&&/a&";
tstr += "&/td&&/tr&";
$(".guser tbody").append(tstr);
$(".guser tr input").on("click", function () {
alert(111);
在类名为guser的table input上，并没有绑定到click事件。这是什么原因？
按赞数排序
试一下下面的代码是否能够正确运行，我测试是正常的。
开头的 $(".guser")这个部分最好是放dom上现在已经有的，把动态生成的放在on的第二个参数。
$(function(){
var tstr = "";
tstr += "&tr&&td&&input type='text' /&&/td&";
tstr += "&td style='vertical-align:'&删除&h2&×&/h2&&/a&";
tstr += "&/td&&/tr&";
$(".guser tbody").append(tstr);
$(".guser").on("click", "tr input", function () {
alert(111);
没问题啊吗，你jquery路径导入正确没有？而且2+以上的版本不支持IE8-的。。注意这个问题。要兼容ie8-你要换版本低于2的jquery
&script type="text/javascript" src="/jquery-2.1.3.min.js"&&/script&
&table class="guser"&&tbody&&/tbody&&/table&
&script type="text/javascript"&
$(function () {
var tstr = "";
tstr += "&tr&&td&&input type='text' &&/td&";
tstr += "&td style='vertical-align:'&删除&h2&×&/h2&&/a&";
tstr += "&/td&&/tr&";
$(".guser tbody").append(tstr);
$(".guser tr input").on("click", function () {
alert(111);
154关注|827收录
1144关注|933收录
2224关注|145收录
其他相似问题其他回答(5)
反斜杠是转译的作用，比如把\"等于 &
输出？$("#divID").html();
反斜杠转义符只用，否则&&内部无法编译通过
园豆：2601
转义符 为了不和方法出冲突。
园豆：13931
反斜杠是转义字符，比如你要输出"，由于变量也是用的"包裹，所以用\"转义，强制输出"，
&div style='float:left'&&table id=&tablesmtupXXX" width="50%" style="margin:10border:1px solid #000;"&&tr&&td&&input type="button" onclick="removeconpic(XXX)" value="移除此项" /&&/td&&/tr&&tr&&td id="smtXXX" &&/td&&/tr&&/table&&/div&
园豆：30632
反斜杠是转义字符
园豆：1579
&&&您需要以后才能回答，未注册用户请先。}