在做web前端的时候,我们经常会做一个特效,这个时候用到ajax来进行无刷新页面,来改变页面的内容,这个时候,我们就会对页面中的html进行添加,替换等,在接触jquery的这些html操作函数之前,我一般都是用js来完成的。个人觉得最快最方便的做法就是document.getElementById,document.getElementsByName这些方法,例如document.getElementById("id").html="<strong>aaa</strong>";这种方法有一点不好,就是你必须知道,有一个id或者是name,并且写法也比较长。反正看个人喜好吧。
一,测试文件test.html
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
- <script type="text/javascript" src="jquerymin.js"></script>
- </head>
- <body>
- <p>this is a test </p>
- <strong>51yip.com</strong>
- <span>我不喜欢写代码</span>
- </body>
- </HTML>
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script type="text/javascript" src="jquerymin.js"></script>
</head>
<body>
<p>this is a test </p>
<strong>51yip.com</strong>
<span>我不喜欢写代码</span>
</body>
</HTML>
二,jquery html移动,复制,替换函数,以及实例
1,append和prepend
相同点:都可以在本标签内进行html的插入。
不同点:append把html的内容插到本标签的尾部,而prepend是插入到本标签的头部。
- <script type="text/javascript">
- $(document).ready(function(){
- $("strong").append("<div>my website</div>"); //用的append
- });
- </script>
- 结果如下(用firebug查看,源码看不到):
- <strong>51yip.com<div>my website</div></strong>
- <script type="text/javascript">
- $(document).ready(function(){
- $("strong").prepend("<div>my website</div>");
- });
- </script>
- 结果如下:
- <strong><div>my website</div>51yip.com</strong>
<script type="text/javascript">
$(document).ready(function(){
$("strong").append("<div>my website</div>"); //用的append
});
</script>
结果如下(用firebug查看,源码看不到):
<strong>51yip.com<div>my website</div></strong>
<script type="text/javascript">
$(document).ready(function(){
$("strong").prepend("<div>my website</div>");
});
</script>
结果如下:
<strong><div>my website</div>51yip.com</strong>
2,appendTo和prependTo
相同点:把所有匹配的元素追加到另一个指定的元素集合中。
不同点:appendTo加到是结尾,prependTo加到开头
- <script type="text/javascript">
- $(document).ready(function(){
- $("strong").prependTo($("span").next()); //将匹配的strong放到div的开头
- html="<p>我喜欢睡觉</p>"; //自定义了一个变量
- $(html).appendTo($("span").next()); //将变量的内容用appendTo放到div的尾部,注意变量外要加上 $()
- });
- </script>
- 结果如下:
- <div>
- <strong>51yip.com</strong> //这个是prependTo产生的
- i love game
- <p>我喜欢睡觉</p> //这个是appendTo产生的
- </div>
<script type="text/javascript">
$(document).ready(function(){
$("strong").prependTo($("span").next()); //将匹配的strong放到div的开头
html="<p>我喜欢睡觉</p>"; //自定义了一个变量
$(html).appendTo($("span").next()); //将变量的内容用appendTo放到div的尾部,注意变量外要加上 $()
});
</script>
结果如下:
<div>
<strong>51yip.com</strong> //这个是prependTo产生的
i love game
<p>我喜欢睡觉</p> //这个是appendTo产生的
</div>
这个例子和上面的例子,是完全相反的,一个是加到自己的标签内,一个不是加到自己的标签内。其实道理很简单,但是经常搞混淆,我想喜欢范这个错误的不只我一个。
3,insertAfter和insertBefore
相同点:都可以插入到匹配标签的外面
不同点:insertAfter插入到标签的后面,insertBefore插入到标签的前面
前面讲到了append,prepend,appendTo,prependTo都是将内容插入到标签内部,而这个二个就不同了。
- <script type="text/javascript">
- $(document).ready(function(){
- $("strong").insertBefore($("span")); //换成insertBefore
- html="<p>我喜欢睡觉</p>";
- $(html).insertAfter($("span")); //换成insertBefore
- });
- </script>
- 结果如下:
- <strong>51yip.com</strong> //这个用insertBfore产生的
- <span>我不喜欢写代码</span>
- <p>我喜欢睡觉</p> //这个用insertAfter产生的
<script type="text/javascript">
$(document).ready(function(){
$("strong").insertBefore($("span")); //换成insertBefore
html="<p>我喜欢睡觉</p>";
$(html).insertAfter($("span")); //换成insertBefore
});
</script>
结果如下:
<strong>51yip.com</strong> //这个用insertBfore产生的
<span>我不喜欢写代码</span>
<p>我喜欢睡觉</p> //这个用insertAfter产生的
上面我们提到的3对插入函数,完成了什么样的工作呢?其实就是一个移动的过程,$("strong").insertBefore($("span"));我们将strong标签,从原来的位置移动span标签的后面。既然是移动,那么移动后,原来的位置上就没有东西了。
4,clone和clone(true)
clone就可以解决例三结束提到的问题。
相同点:都可以对标签进行复制
不同点:clone只能对标签进行复制,而不能对标签绑订的事件进行复制,clone(true)可以对标签进行复制,对标签绑订的事件也能复制
- <script type="text/javascript">
- $(document).ready(function(){
- $("strong").clone().insertAfter($("span"));
- });
- </script>
- 结果如下:
- <strong>51yip.com</strong>
- <span>我不喜欢写代码</span>
- <strong>51yip.com</strong> //这个就是复制后,并且插入到这里的。
<script type="text/javascript">
$(document).ready(function(){
$("strong").clone().insertAfter($("span"));
});
</script>
结果如下:
<strong>51yip.com</strong>
<span>我不喜欢写代码</span>
<strong>51yip.com</strong> //这个就是复制后,并且插入到这里的。
从这个例子,我们可以看出,$("strong").clone().insertAfter($("span"));这一步其实就是一个复制,粘贴的过程。
- <button>加一个</button> //把这个标签加到测试文件中
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $(this).clone(true).insertAfter(this); //点一个就会加一个,并且复制出来的,也可以点
- // $(this).clone().insertAfter(this); //这个和上面的有一点不同,就是复制出来的,不能点
- });
- });
- </script>
<button>加一个</button> //把这个标签加到测试文件中
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).clone(true).insertAfter(this); //点一个就会加一个,并且复制出来的,也可以点
// $(this).clone().insertAfter(this); //这个和上面的有一点不同,就是复制出来的,不能点
});
});
</script>
通过这二个例子,clone和clone(true)的区别已经很清楚了。
5,replaceWith和replaceAll
相同点:他们二个都可以进行,查找替换
不同点:写法不同,反正我是没有发现,他们二个有什么功能上的不同。
- <script type="text/javascript">
- $(document).ready(function(){
- $("strong").replaceAll($("div")); //用strong标签把div标签都替换掉
- //$("div").replaceWith($("strong")); //和上面的一样,没什么区别,写法不同
- });
- </script>
<script type="text/javascript">
$(document).ready(function(){
$("strong").replaceAll($("div")); //用strong标签把div标签都替换掉
//$("div").replaceWith($("strong")); //和上面的一样,没什么区别,写法不同
});
</script>
个人觉得,这二个方法只有一个够了,多了反而让人晕。