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="后退" οnclick="back();" />
<input type="button" value="前进" οnclick="forward();"/>
<input type="button" value="刷新" οnclick="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" οnlοad="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 οnlοad=" keyLogin()">
<input type="button" id="button1" value="login " οnclick="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 οnlοad="alert('addbuttonbody');">
	<div id="mainButton"> 
		<input type="button" οnclick="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




早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页