html基础开发-- Jquery框架方法使用（攻略二）
1 HTML页面内容反向显示
默认的HTML页面内容 是从左到右显示 当我们在html标签中设置 属性 dir的值为 rtl 后，那么页面的内容就会右对齐的方式，也就是从右向左开始显示， 那么这里的rtl 可以理解为 right to left ,当把dir 的值 设置 为 ltr （left to right ）后 ，页面的显示 内容 就会成为从左向右的显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> this is my page show text right to left or left to right <body> </body> </html>
效果图 1.0
2. 设置页面的自动最大化
使用screen对象，来控制窗口， 使用screen.availWidth 来设置允许屏幕的最大宽度，screen.availHeight来设置允许的最大高度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> this is my page show text right to left or left to right <body> <script language="javascript"> //定位左上角 self.moveTo(0,0); //调整屏幕 self.resizeTo(screen.avaliWidth,screen.avaliHeight); </script> </body> </html>
3. 设置页面的自动刷新
设置页面自动刷新，我们可以设置页面自动 刷新后停止在当前页面，也可以高寒刷新后将要跳转的页面，设置的方法就是在meta标签中，设置属性“HTTP-EQUIV”的值为"refresh" ,同时可设置属性content 和url ，content的值表示页面将要在几秒后进行跳转。URL表示将要跳转的页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta HTTP-EQUIV="refresh" content="3; URL=https://www.baidu.com/" /> <title>无标题文档</title> </head> this is myPage to show refresh page <body> </body>
注：这里我们是设置了三秒后进行页面刷新，刷新的结果是自动跳转到百度页面
图 3
4 控件页面的浏览记录的前进与后退以及刷新页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<!-- 页面的后退 与刷新 前进的控制 -->
<body>
<input type="button" value="后退" onclick="back();" />
<input type="button" value="前进" onclick="forward();"/>
<input type="button" value="刷新" onclick="refresh();"/>
</body>
<script language="javascript" >
function bakc(){
history.go(-1);//后退一页
}
function forward(){
history.go(+1);//前进一页
}
function refresh(){
history.go(-0);//刷新页面
}
</script>
</html>
图 4
这里是先在页面上 显示 了三个基本的按钮，然后设置其点击事件用来调用 js中的相关控制函数 ，其中js中使用到了history对象，其是用来存储浏览器的历史记录的，其参数为正数的进修，表示前进页面，负数表示后退页面，
5 页面倒计时进行跳转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="refresh" content="10;URL=https://www.google.com.hk/"/>
<script language="javascript" >
//获取当前的时间
startday = new Date();
//获取第一次打开浏览器时当前时间的毫秒值
clockStart = startday.getTime();
function getSece(){
//获取当前的时间
var myTime = new Date();
//获取当前时间的毫秒值
var timeNow = myTime.getTime();
//计算与刚刚打开浏览器时候的时间差值
var timeDiff = timeNow -clockStart;
//我们计算出来的是毫秒值，此刻计算显示在页面上的数据
var mySece1 = ""+ timeDiff/1000;
//我们计算出来的秒可能是 1.362 也就 是说可能有小数部位 ，我们需要在页面上显示整数的秒，所以可以通过
//mySece1.substring(0,mySece1.indexOf(".")) 来截取小数点以前的整数秒
//然后再通过eval函数将字符串转为数字，从面可以计算剩下的时间
mySece1 = 10 - eval(mySece1.substring(0,mySece1.indexOf(".")))+"秒";
//设置对应的显示标签
document.form1.timespent.value = mySece1;
//设置每间隔1秒中时间执行次方法getSece（）;
window.setTimeout('getSece()',1000);
}
</script>
<title>无标题文档</title>
</head>
<body bgcolor="#339933" onload="window.setTimeout('getSece()',1)">
<center>
10秒后将加载页面
<form name="form1">
<input size="10" name="timespent"/>
</form>
</center>
</body>
</html>
在body的onload属性直接去调用设置时间的函数 getSece()
图5
6 按下Enter键调用页面中按钮的点击事件
<!DOCTYPE html>
<html lang="en">
<!-- -->
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" >
function keyLogin(){
if(event.keyCode==13){
//按Enter的键值为13
docment.getElementById("button1").click();
}
}
</script>
</head>
<body onload=" keyLogin()">
<input type="button" id="button1" value="login " onclick="alert('调用成功')"/>
</body>
</html>
body中onload方法调用加载js中的keyLogin方法，
7 动态向页面添加按钮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态添加Button文档</title>
</head>
<body onload="alert('addbuttonbody');">
<div id="mainButton">
<input type="button" onclick="addButton()" value="addButtons"/>
</div>
</body>
<script language="javascript" >
function addButton(){
var button = document.createElement('input');
button.setAttribute('type','button');
button.setAttribute('name','button1');
button.value="tired aaa";
var button1=document.getElementById("mainButton");
button1.insertBefore(button,null);
}
</script>
</html>
效果图 7
8 jQuery基础使用 - 动态在body中创建节点
8-1 JSP原生的方法来创建节点
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title> 这是使用 jquery的第一个案例 </title>
<style>
.hh{
width: 200px;
height:1 00px;
padding: 10px;
margin: 5px;
float: left;
border: 2px solid #ccc;
background: #bbffaa;
}
</style>
</head>
<body>
<h1>动态创建div节点</h1>
<!-- 创建div标签 并引用 我们定义的样式 -->
<div class="hh">
<div class="addDiv">点击页面会动态创建元素节点
</div>
</div>
<script type="text/javascript">
//从DOM选取元素
var body = document.querySelector('body');
//为document添加点击事件
document.addEventListener('click',function(){
//创建两个div
var div1 = document.createElement('div')
var div2 = document.createElement("div");
//设置属性
div1.setAttribute('class','hh')
div2.className='addDiv'
//向div中添加文本
div2.innerHTML="动态创建div";
//设置加入文档，也就是包含关系
div1.appendChild(div2)
body.appendChild(div1)
},false)
</script>
</body>
</html>
图:8-1
8-2 jQuery方法来创建节点
常用的方法就是通过$(" html 结构 ") 这样的函数结构进行处理
<DOMTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style >
.div_style{
width:200px;
height:100px;
padding:5px;
margin:10px;
float: left;
border: 2px solid #ccc;
background: yellow;
}
</style>
</head>
<body >
<div class="div_style">
<div class="child"> 通过jquery来添加 div
</div>
</div>
<script type="text/javascript">
var $body = $('body');
$body.on('click',function(){
var div = $("<div class='div_style' ><div class='child' >动态创建div </div></div>");
$body.append(div);
});
</script>
</body>
</html>
实现的效果与图8-1中的效果是一至的
9 jQuery内部插入append()与appendTo()
动态创建的元素是不够的，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。将创建的元素放到文档上，
这里就涉及到一个位置关系，常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部。针对这样的处理，jQuery就定义2个操作的方法
append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。
appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
选择器 描述 备注 append 向每一个匹配元素中追加内容 appendTo 把所有匹配的元素追加到另一个指定的元素集合中去
9-1 .append()和.appendTo() 方法的不同之处
.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同
append()前面是要选择的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是要选择的对象
<!DOCTYPE html>
<html>
<head>
<title>addDiv2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 添加依赖库 -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.content {
width: 300px;
height: 100px;
}
/* 通过append方法来添加的节点使用的样式 */
.append {
background-color: blue;
margin-top: 10px;
}
/* 通过appendTo方法来添加的节点使用的样式 */
.appendTo {
background-color: red;
margin-top: 5px;
}
</style>
</head>
<body>
This is my HTML page.
<br>
<h2>通过append与appendTo添加元素</h2>
<button id="bt1">点击通过jQuery的append添加元素</button>
<button id="bt2">点击通过jQuery的appendTo添加元素</button>
<!-- 添加div 的位置 -->
<div class="content"></div>
<script type="text/javascript">
$("#bt1").on('click', function() {
$(".content").append('<div class="append">通过append方法添加的元素</div>');
});
</script>
<script type="text/javascript">
$("#bt2").on(
'click',
function() {
$('<div class="appendTo">通过appendTo方法添加的元素</div>')
.appendTo($(".content"));
});
</script>
</body>
</html>
效果图 9-1
10 jQuery外部插入after()与before()
| 选择器 | 描述 | 备注 |
| after | 在匹配集合的每个元素的后面插入参数所指定的内容 | |
| before | 在匹配元素插入参数所指定的内容 | |
- before与after都是用来对相对选中元素外部增加相邻的兄弟节点
- 2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
- 2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码
注意点：
- after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
- before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插
<!DOCTYPE html>
<html>
<head>
<title>addDiv3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 添加依赖库 -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
/*点击通过jQuery的before添加元素 显示框 使用样式 */
.contentBefore {
border: 2px solid red;
margin-top: 5px;
}
/* 点击通过jQuery的after添加元素 显示区域使用样式 */
.contentAfter {
border: 2px solid #e6e6e6;
margin-top: 5px;
}
</style>
</head>
<body>
This is my HTML page.
<br>
<h2>通过before与after添加元素</h2>
<button id="bt1">点击通过jQuery的before添加元素</button>
<button id="bt2">点击通过jQuery的after添加元素</button>
<div class="contentBefore">
<p class="test1">测试before</p>
</div>
<div class="contentAfter">
<p class="test2">测试after</p>
</div>
<script type="text/javascript">
$("#bt1").on(
'click',
function() {
//在匹配test1元素集合中的每个元素前面插入p元素
$(".test1").before(
'<p style="color:red">before,在匹配元素之前增加</p>',
'<p style="color:red">多参数</p>')
})
</script>
<script type="text/javascript">
$("#bt2").on(
'click',
function() {
//在匹配test1元素集合中的每个元素后面插入p元素
$(".test2").after(
'<p style="color:blue">after,在匹配元素之后增加</p>',
'<p style="color:blue">多参数</p>')
})
</script>
</body>
</html>
效果图中可以很明显的看出效果
效果图： 10-1
11 jQuery内部插入prepend() 和prependTo()
在被选元素之前插入节点
选择器 描述 备注 prepend 向每个匹配的元素内部前置内容 prependTo 把所有的匹配的元素添加到另一个指定的元素集合中去
<!DOCTYPE html>
<html>
<head>
<title>addDiv4.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style type="text/css">
/* 点击通过jQuery的prepend添加元素 使用到的样式 */
.content {
border: 2px solid red;
color: red;
}
/*点击通过jQuery的prependTo添加元素 */
.content2 {
border: 2px solid blue;
color: blue;
}
</style>
</head>
<body>
This is my HTML page.
<br>
<h2>通过prepend与prependTo添加元素</h2>
<button id="bt1">点击通过jQuery的prepend添加元素</button>
<button id="bt2">点击通过jQuery的prependTo添加元素</button>
<div class="content">
<p>测试prepend</p>
</div>
<div class="content2">
<p>测试prependTo</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
$('.content').prepend('<p>prepend增加的p元素</p>')
});
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
$('<p>通过prependTo增加的P元素元素</p>').prependTo($('.content2'))
});
</script>
</body>
</html>
下面的效果图中，我们可以很好的看到实现的效果
图 11-1
12 jQuery外部插入insertAfter()与insertBefore方法
| 选择器 | 描述 | 备注 |
| insertAfter | 在目标元素的后面插入集合中的每个元素 | 不支持多参数操作 |
| insertBefore | 在目标元素的前面插入集合中的每个元素 | 不支持多参数操作 |
<!DOCTYPE html>
<html>
<head>
<title>addDiv5.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 添加依赖库 -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style type="text/css">
.content {
background: #e6e6e6;
}
.content2 {
background: blue;
}
</style>
</head>
<body>
外部插入 insertAfter 与insertBefore
<br>
<button id="bt1">点击通过jQuery的insertBefore添加元素</button>
<button id="bt2">点击通过jQuery的insertAfter添加元素</button>
<div class="content">
<p class="test1">测试 insertBefore</p>
</div>
<div class="content2">
<p class="test2">测试insertAfter</p>
</div>
<script type="text/javascript">
$("#bt1").on(
'click',
function() {
$('<p style="color:red">测试insertBefore方法增加</p>',
'<p style="color:blue">测试多参数 </p>').insertBefore(
$(".test1"));
});
</script>
<script type="text/javascript">
$("#bt2").on(
'click',
function() {
$('<p style="color:#ffffff">测试insertAfter</p>',
'<p style="color: #ffffff" > 测试 多参数 </p>').insertAfter(
$(".test2"));
});
</script>
</body>
</html>
效果图 12-1
从效果图中，我们可以看出来 只添加了一条
13 jQuery 移除页面标签
13-1 empty方法 删除节点
<!DOCTYPE html>
<html>
<head>
<title>addDiv6.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 添加依赖库 -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
This is my HTML page.
<br>
<div id="div1">
<p style="color:#e66365;background-color:#e6e6e6">测试标签一</p>
</div>
<br>
<button id="button">点击删除标签</button>
<script type="text/javascript">
$("#button").on("click", function() {
$("#div1").empty();
});
</script>
</body>
</html>
13-2 remove方法 删除节点
remove 在删除节点的时候，可以同时将事件删除，避免了开发过程中造成的内存泄漏问题
remove方法可以传入一个选择器，相对于empty方法来说，remove方法可以删除指定的节点
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.test1 {
background: #bbffaa;
}
.test2 {
background: yellow;
}
</style>
</head>
<body>
<h2>通过jQuery remove方法移除元素</h2>
<div class="test1">
<p>p元素1</p>
<p>p元素2</p>
</div>
<div class="test2">
<p>p元素3</p>
<p>p元素4</p>
<p>p元DFG素3</p>
<p>p元DFSG素3</p>
<p>p元WRQEWR素3</p>
</div>
<button>点击通过jQuery的empty移除元素</button>
<button>点击通过jQuery的remove移除指定元素</button>
<script type="text/javascript">
$("button:first").on('click', function() {
//删除整个 class=test1的div节点
$(".test1").remove()
})
$("button:last").on('click', function() {
//找到所有p元素中，包含了3的元素
//这个也是一个过滤器的处理
$("p").remove(":contains('3')")
})
</script>
</body>
</html>
效果图 13-2
在效果图 13-2 中，我们可以明显的看到 ，通过remove删除方法 ，将所有内容中含有3的标签删除，而empty方法则是将所有的的子标签进行了删除
13-3 detach方法 删除节点
与remove方法不同的是，删除的节点中所有绑定的数据与事件不会被删除
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<!-- 如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，
并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理
detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。 -->
<!-- 当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据 -->
<body>
<p>P元素1，默认给绑定一个点击事件</p>
<p>P元素2，默认给绑定一个点击事件</p>
<button id="bt1">点击删除 p 元素</button>
<button id="bt2">点击移动 p 元素</button>
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.innerHTML)
})
var p;
$("#bt1").click(function() {
if (!$("p").length)
return; //去重
//通过detach方法删除元素
//只是页面不可见，但是这个节点还是保存在内存中
//数据与事件都不会丢失
p = $("p").detach()
});
$("#bt2").click(function() {
//把p元素在添加到页面中
//事件还是存在
$("body").append(p);
});
</script>
</body>
</html>
13-4 unwrap方法来删除节点
将匹配元素集合的父级元素删除，保留自身
<!DOCTYPE html>
<html>
<head>
<title>unwrap.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style type="text/css">
.content {
width: 200px;
height: 100px;
float: left;
border: 1px solid #ccc;
margin: 5px;
background: #e63523;
}
</style>
</head>
<body>
This is my HTML page.
<br>
<button class="button">点击删除父节点</button>
<br>
<div class="content">
<div>
<p class="p1">测试使用的p标签</p>
</div>
</div>
<script type="text/javascript">
$(".button").on('click',function(){
//找到所有p元素，删除父容器div
$('p').unwrap('<div></div>');
});
</script>
</body>
</html>
14 DOM 拷贝 clone
clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.content1{
width: 100px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #bbffaa;
}
.content2{
width: 100px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #e6e6e6;
}
</style>
</head>
<body>
<h2>通过clone克隆元素</h2>
<div class="content1">
<div class="aaron1">点击,clone浅拷贝</div>
<hr>
<div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
</div>
<div class="content2"> 标签二</div>
<div class="content3">标签三</div>
<script type="text/javascript">
//将相关内容克隆到标签二中
//只克隆节点
//不克隆事件
$(".aaron1").on('click', function() {
$(".content2").append($(this).clone().css('color', 'red'))
})
</script>
<script type="text/javascript">
//将相关内容克隆到标签三中
//克隆节点
//克隆事件
$(".aaron2").on('click', function() {
console.log(1)
$(".content3").append($(this).clone(true).css('color', 'blue'))
})
</script>
</body>
</html>
在这里使用到的clone方法，只clone标签与 即clone标签也克隆事件使用的时候 区别就是 在clone()这个方法 中 传入true值代表克隆节点的同时也克隆事件 ，如果什么也不传，那么这里就是只克隆节点
效果图14-1
15 jQuery 的replaceWidth 与 replaceAll方法使用
replaceWidth(newContent) 方法 是使用新和内容去替换所有的匹配内容
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
.right div {
background: yellow;
}
</style>
</head>
<body>
<h2>replaceWith()和replaceAll()</h2>
<div class="left">
<button class="bt1">点击,通过replaceWith替换第二段内容</button>
<button class="bt2">点击,通过replaceAll替换第六段内容</button>
</div>
<div class="right">
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
<div>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
</div>
</div>
<script type="text/javascript">
$(".bt1").on(
'click',
function() {
//找到内容为第二段的p元素
//通过replaceWith删除并替换这个节点
$(".right > div:first p:eq(1)").replaceWith(
'<a style="color:red">replaceWith替换第二段的内容</a>')
})
</script>
<script type="text/javascript">
//找到内容为第六段的p元素
//通过replaceAll删除并替换这个节点
$(".bt2").on(
'click',
function() {
$('<a style="color:red">replaceAll替换第六段的内容</a>')
.replaceAll('.right > div:last p:last');
})
</script>
</body>
</html>
效果图 15-1
16 jQuery的wrap方法 添加父节点
wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构
简单的看一段代码：
<p>p元素</p>
给p元素增加一个div包裹
$('p').wrap('<div></div>')
最后的结构，p元素增加了一个父div的结构
<div>
<p>p元素</p>
</div>
.wrap()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套好几层，每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.left div,.right div {
width: 100px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #bbffaa;
}
.right div {
background: yellow;
}
p {
border: 1px solid red;
}
a {
border: 1px solid blue;
}
</style>
</head>
<body>
<h2>DOM包裹wrap()方法</h2>
<div class="left">
<button class="aaron1">点击,通过wrap方法给p元素增加父容器div</button>
<button class="aaron2">点击,通过wrap的回调方法给a元素增加父容器div
</div>
</div>
<div class="right">
<p>p元素</p>
<p>p元素</p>
</div>
<div class="left">
<a>a元素</a> <a>a元素</a>
</div>
<script type="text/javascript">
$(".aaron1").on('click', function() {
//给所有p元素，增加父容器div
$('p').wrap('<div></div>')
})
</script>
<script type="text/javascript">
$(".aaron2").on('click', function() {
$('a').wrap(function() {
return '<div class="' + $(this).text() + '" />';
})
})
</script>
</body>
</html>
效果图 16-1