.Net培训个人总结笔记28
学习交流，欢迎转载。转载请注明文章来源：http://www.cnblogs.com/lgjspace/archive/2011/10/13/2218271.html
视频内容：
append() 方法和 appendTo() 方法的区别，区别是：a.append(b) 是把 b 添加到 a 里面，而 a.appendTo(b) 则是把 a 添加到 b 里面。
再经过调试发现：假如同样条件下执行“a.append(b)”和“a.appendTo(b)”，前后两者的返回值返回的都是 a ，但由于前者（即“a.append(b)”）的添加方向是“把 b 添加到 a 中”，所以该方法的返回值准确来说应该是：已经把 b 添加了进去的 a，即含有 b 的 a。
演示案例：
1 <script type = "text/javascript" src = "../Scripts/jquery-1.4.1.js"></script>
2 <script>
3 $("li").click(function () {
4 alert("appendTo()之后的返回值是" + $(this).appendTo($(this).parent().parent().siblings("div").children("ul")).text());
5 alert("append()之后的返回值是" + $(this).parent().parent().siblings("div").children("ul").append($(this)).text());
6 });
7 </script>
8 <body>
9 <div style = "float:left;width:20%">
10 <label>待选球队：</label>
11 <br /><br />
12 <ul id = "teams1">
13 <li>国奥</li>
14 <li>曼联</li>
15 <li>巴拉圭</li>
16 <li>阿根廷</li>
17 <li>巴西</li>
18 </ul>
19 </div>
20 <div style = "float:left;width:20%">
21 <label>选中球队：</label>
22 <br /><br />
23 <ul id = "teams2">
24 </ul>
25 </div>
26 </body>
经验总结：
1 $("#ul1 li").click(function () {
2 $(this).appendTo($("#ul2")); //而不用这样：$(this).remove().appendTo($("#ul2"));
3 });
这代码实现的需求是：把 id 为 ul1 的 ul 下的被点击的 li 挪到 id 为 ul2 的 ul 下。
这里由于$(this)是一个对象，是属于引用传递，所以直接 appendTo($("#ul2")) 之后 id 为 ul1 的 ul 下就没有了该 li 了，所以不用像上面的注释那样，先 remove() 再 appendTo($("#ul2")) 这么麻烦。
经验总结：
下面代码中，有两行带有注释，在这两行中，注释里写上的都是预想的代码功能，但实际效果是：删除功能实现了，但没被添加到另外一个 ul 下，即总体效果是“被删除了”而不是“被挪移到另外的 ul 了”。调试时试过把“$(this).remove().appendTo($anotherUL)”改成“$(this).remove().appendTo($("#teams2"))”,这样就可以按预想效果顺利“挪”到 id 为 teams2 的 ul 下，而不改代码，让代码直接保持原样“$(this).remove().appendTo($anotherUL)”的话则只被删除，没被添加到“对家”的 ul 下，因此可以推断肯定是第一行带注释的代码所取出的对象有问题，问题在于：当第一行（针对带注释的两行来说）被执行后（此时还没执行第二行），$anotherUL 取出的是该 li 没被移除掉时所在 ul 的“对家”ul，然后当第二行被执行时，该 li 是先从所属的 ul 中 remove() 出来，此时 li 已经跟原 ul 再没关系，然后在 appendTo($anotherUL) 的时候，appendTo() 按照传给自身的 $anotherUL 参数来找到要放下该 li 的目标 ul，但此时 $anotherUL 所指代的 $(this).parent().parent().siblings("div").children("ul") 已经不是原来所代表的“该 li 所在 ul 的对家 ul ”了，因为此时的 li 已经和原来的 ul 脱离了关系了，所以就更找不到所谓的“对家ul”了。
对此问题，最简单直接的解决方法是：直接把（带注释的）第二行的 remove() 方法去掉，因为去掉 remove() 一来不会影响 appendTo() 方法的执行（这样并不影响“把点击到的 li 挪到对家 ul”的效果实现），二来该 li 没有从原来所属的 ul 中被删除，该 li 和所属的 ul 关系还没被切断，$anotherUL 的“取出对家 ul”的操作也就能顺利地实现。
另一个更容易理解的方法是：用 clone() 方法，在 li 还没被 remove() 出来之前先 clone() 一个 li，然后把 clone 出来的 li 元素 appendTo() 到目标 ul 下，然后再把原来 ul 下的 liremove() 掉。
1 <script type = "text/javascript" src = "../Scripts/jquery-1.4.1.js"></script>
2 <script type = "text/javascript">
3 $(function () {
4 $("li").click(function () {
5 var $anotherUL = $(this).parent().parent().siblings("div").children("ul");//无论 li 是在哪个 ul 下，都是先取到到自己被移除后所将要移动到的目的 ul 元素（即 li 所在的 ul 元素的“对家”ul 元素。）。因为现在是没有判断出自己(li)是在哪个 ul 下的，所以用一个通用一点的处理方法。
6 $(this).remove().appendTo($anotherUL);//把自身从自己所在的 ul 上 remove 出来再添加到自己的对家 ul（即上面取出的 ul 元素）。
7 });
8 });
9 </script>
10 <body>
11 <div style = "float:left;width:20%">
12 <label>待选球队：</label>
13 <br /><br />
14 <ul id = "teams1">
15 <li>国奥</li>
16 <li>曼联</li>
17 <li>巴拉圭</li>
18 <li>阿根廷</li>
19 <li>巴西</li>
20 </ul>
21 </div>
22 <div style = "float:left;width:20%">
23 <label>选中球队：</label>
24 <br /><br />
25 <ul id = "teams2">
26 </ul>
27 </div>
28 </body>
经验：
jquery 库中关于 replaceWith() 方法，在1.4.1版本和1.4.2版本上使用效果有区别：案例代码如下所示，分别引用两个 jquery 版本执行下面代码来执行，版本1执行后五个 <br /> 前四个都变没了，只有最后一个（并不是限定第五个，无论有多少个 br 都是唯有最后一个）能顺利转换成“<hr />”，出来的效果是五段的字符串都被“紧密地接驳”起来了，字符串之间没有任何空字符；而版本2执行后则能正常地把所有的“<br />”都转换成“<hr />”,跟预想的一样。
1 <head>
2 <script type = "text/javascript">
3 $(function () {
4 $("#replace").click(function () {
5 $("br").replaceWith("<hr/>");
6 });
7 });
8 </script>
9 </head>
10 <body>
11 <input type = "button" value = "把<br />转换成<hr />" id = "replace" />
12 <input type = "button" value = "把中间内容生动化" id = "changeStyle" />
13 <br />aaaaaaaaaaaaaaaaaaaa<br />bbbbbbbbbbbbbbbbbb<br />cccccccccccccccccccccccc<br />dddddddddddddddddd<br />eeeeeeeeeeeeeeeeeeee<br />
14 </body>
技巧：
在 jquery 中，假如要选择一个标签里的所有类型的标签（例如要选择出 body 下的所有类型的标签），可以写成：“$("body *")”，其中这里的 * 表示任何类型的元素，整个选择器的意思是：选出 body 中的所有类型的标签。
细节：
执行“$(":checkbox:checked").val());”后，当选择器选出的元素多于一个时，“$(":checkbox:checked").val()”取出的只有第一个值，不能把全部值以数组的形式一次过地取出来。
知识点：
如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数“e”，“e”就是事件的对象。但该参数的参数名没有定死一定为“e”，可以为任意合法的名称。
细节：
若想在整个窗口页面范围监听某个事件，则需要监听 document，而不是监听 body（如果监听 body 则只有在页面中的控件或标签能“撑”到的范围内才能触发），例如：$(document).mousemove(function () { });。
细节：
JQuery 中如果不给 click() 方法传进任何参数，则表示触发一次对应元素的 click 事件，例如：执行“$("#button1").click();”后，其效果就相当于程序自己“按下了”id 为“button1”的按钮一次。
