jquery元素节点操作

创建节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			// 通过html的字符串的方式添加节点性能最高
			//$('#div1').html($('#div1').html()+'<a href="#">链接</a>')



			// 新建一个带有属性的a元素，把它赋值给$a
			$a = $('<a href="#">链接</a>');

			// 新建一个空的a元素
			$a2 = $('<a>');


			$p = $('<p>这是一个p元素</p>');


			$h2 = $('<h2>这是一个h2</h2>');

			$h3 = $('<h3>这是一个h3</h3>');



			// 父元素内的后面放入子元素
			//$('#div1').append($a);


			//子元素放入到父元素内部的后面
			$a.appendTo($('#div1'));

			$('#div1').append($a2);


			// 父元素内的前面放入子元素
			//$('#div1').prepend($p);


			//子元素放入到父元素内部的前面
			$p.prependTo($('#div1'));


			//$('#div1').after($h2);

			$h2.insertAfter($('#div1'));



			//$('#div1').before($h3);
			$h3.insertBefore($('#div1'));



		})




	</script>
</head>
<body>
	<div id="div1">
		<h1>这是一个H1元素</h1>
	</div>


</body>
</html>

插入节点

1、append()和appendTo()：在现存元素的内部，从后面插入元素

var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点


$('#div1').remove();

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			
			//$('#p1').insertBefore($('#title01'));

			$('#title01').before($('#p1'));


			$('#span01').appendTo($('#p1'));

			$('#link01').prependTo($('#p1'));


			$('#title01').remove();



		})




	</script>
</head>
<body>
	
	<h1 id="title01">这是一个H1元素</h1>
	<p id="p1">这是一个p元素</p>

	<span id="span01">这是一个span元素</span>
	<a href="#" id='link01'>链接</a>


</body>
</html>

a链接的href属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>页面文字内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>页面文字内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>页面文字内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />

	<p>页面文字内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />

	<!-- # 默认会链接到页面顶部   -->
	<!-- <a href="#">链接</a> -->

	<!-- <a href="javascript:alert('ok!');">链接</a> -->
	<!-- 让链接的默认行为是 执行javascript的空语句，也就是什么都不做   -->
	<a href="javascript:;">链接</a>
</body>
</html>

todolist 案例

   <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<style type="text/css">
		.list_con{
			width:600px;
			margin:50px auto 0;
		}
		.inputtxt{
			width:550px;
			height:30px;
			border:1px solid #ccc;
			padding:0px;
			text-indent:10px;			
		}
		.inputbtn{
			width:40px;
			height:32px;
			padding:0px;
			border:1px solid #ccc;
		}
		.list{
			margin:0;
			padding:0;
			list-style:none;
			margin-top:20px;
		}
		.list li{
			height:40px;
			line-height:40px;
			border-bottom:1px solid #ccc;
		}

		.list li span{
			float:left;
		}

		.list li a{
			float:right;
			text-decoration:none;
			margin:0 10px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			var $inputtxt = $('#txt1');
			var $btn = $('#btn1');
			var $ul = $('#list');


			$btn.click(function(){

				// 获取input输入框的内容
				var $val = $inputtxt.val();

				if($val=="")
				{
					alert('请输入内容');
					return;
				}
				var $li = $('<li><span>'+ $val +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');

			/*	var $a = $li.find('.del');

				$a.click(function(){
					$(this).parent().remove();
				})*/



				$ul.append($li);
				$inputtxt.val("");

			})

			/*
			$('.del').click(function(){

				$(this).parent().remove();

			})*/


			$ul.delegate('a','click',function(){

				var $handler = $(this).prop('class');

				if($handler=='del')
				{
					$(this).parent().remove();
				}

				if($handler=='up')
				{
					if($(this).parent().prev().length==0)
					{
						alert('到顶了！');
						return;
					}
					$(this).parent().insertBefore( $(this).parent().prev() );
				}

				if($handler=='down')
				{
					if($(this).parent().next().length==0)
					{
						alert('到底了！');
						return;
					}

					$(this).parent().insertAfter( $(this).parent().next() );
				}

			})






		})

	</script>	
</head>
<body>

	<div class="list_con">
	<h2>To do list</h2>
		<input type="text" name="" id="txt1" class="inputtxt">
		<input type="button" name="" value="增加" id="btn1" class="inputbtn">
		
		<ul id="list" class="list">

			<li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
			<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
			<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>

		</ul>

	</div>
</body>
</html>

滚轮事件与函数节流

jquery.mousewheel插件使用

jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript">

		//var i = 0;
		
		$(window).mousewheel(function(event,dat){

			alert(dat);

			//i++;
			//console.log(i);

		})

	</script>
</head>
<body>
	
</body>
</html>

js制作CSS3动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			$('#btn').click(function(){

				$('.box').addClass('moving');

			})

			


		})


	</script>
	<style type="text/css">
		.box{
			width:200px;
			height:200px;
			background-color:gold;
			margin:50px auto 0;
			transition:all 1s ease;
		}

		.moving{
			transform:rotate(135deg);
		}
	</style>
</head>
<body>
	<input type="button" name="" value="动画" id="btn">
	<div class="box"></div>
</body>
</html>

函数节流

javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

整屏滚动案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>整页滚动</title>
	<link rel="stylesheet" type="text/css" href="css/test.css">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript">
		$(function(){
			var $screen = $('.pages_con');
			var $pages = $('.pages');
			var $len = $pages.length;
			var $h = $(window).height();
			var $points = $('.points li');
			var timer = null;

			var $nowscreen = 0;
			$pages.css({'height':$h});
			$pages.eq(0).addClass('moving');


			$points.click(function(){
				$nowscreen = $(this).index();
				$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
				$screen.animate({'top':-$h*$nowscreen},300);
				$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
			})



			$(window).mousewheel(function(event,dat){
				clearTimeout(timer);
				timer = setTimeout(function(){

					if(dat==-1)
					{
						$nowscreen++;
					}
					else
					{
						$nowscreen--;
					}
					if($nowscreen<0)
					{
						$nowscreen=0;
					}

					if($nowscreen>$len-1)
					{
						$nowscreen=$len-1;
					}

					$screen.animate({'top':-$h*$nowscreen},300);
					$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');

					$points.eq($nowscreen).addClass('active').siblings().removeClass('active');

					},200)		

			})
		})

	</script>	
</head>
<body>
	<div class="pages_con">

		<div class="pages page1">
			<div class="main_con">
				<div class="left_img"><img src="images/001.png"></div>
				<div class="right_info">
				Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
					
				</div>
			</div>
		</div>

		<div class="pages page2">
			<div class="main_con">
				<div class="right_img"><img src="images/002.png"></div>
				<div class="left_info">
				2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
				</div>
			</div>
			
		</div>

		<div class="pages page3">
			<div class="main_con">
				<div class="left_img"><img src="images/004.png"></div>
				<div class="right_info">
				以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

					
				</div>
			</div>			
		</div>

		<div class="pages page4">
			<div class="main_con">
				<div class="left_img"><img src="images/003.png"></div>
				<div class="right_info">
					Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
				</div>
			</div>			
		</div>

		<div class="pages page5">
			<div class="main_con">
				<div class="center_img"><img src="images/005.png"></div>		
			</div>
			
		</div>
	</div>
	<ul class="points">
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>

幻灯片案例

$(function(){

	var $slide = $('.slide');

	//选取所有的幻灯片
	var $li = $('.slide_list li');

	//获取幻灯片的个数
	var $len = $li.length;

	//选择小圆点的容器
	var $points_con = $('.points');

	// 要运动过来的幻灯片的索引值
	var nowli = 0;

	// 要离开的幻灯片的索引值
	var prevli = 0;

	var $prev = $('.prev');
	var $next = $('.next');

	var timer = null;


	var ismove = false;



	// 根据幻灯片的个数，动态创建小圆点
	for(var i=0;i<$len;i++)
	{
		var $newli = $('<li>');

		//第一个小圆点含有'active'的样式
		if(i==0)
		{
			$newli.addClass('active');
		}
		$newli.appendTo($points_con);
	}

	//第一个幻灯片不动，将其他的幻灯片放到右边去
	$li.not(':first').css({'left':760});
	// 获取小圆点
	var $points = $('.points li');

	//小圆点点击切换幻灯片
	$points.click(function(){
		nowli = $(this).index();
		// 修复重复点击的bug
		if(nowli==prevli)
		{
			return;
		}
		$(this).addClass('active').siblings().removeClass('active');
		move();
	})

	//向前的按钮点击切换幻灯片
	$prev.click(function(){

		if(ismove)
		{
			return;
		}

		ismove = true;

		nowli--;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active');
	})

	//向后的按钮点击切换幻灯片
	$next.click(function(){

		if(ismove)
		{
			return;
		}

		ismove = true;

		nowli++;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active');

	})


	timer = setInterval(autoplay,5000);


	$slide.mouseenter(function(){
		clearInterval(timer);
	});


	$slide.mouseleave(function(){
		timer = setInterval(autoplay,3000);
	});


	function autoplay(){		
		nowli++;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active');
	}



	// 幻灯片运动函数，通过判断nowli和prevli的值来移动对应的幻灯片
	function move(){
		// 第一张幻灯片往前的时候
		if(nowli<0)
		{
			nowli = $len-1;
			prevli = 0;
			$li.eq(nowli).css({'left':-760});
			$li.eq(nowli).animate({'left':0});
			$li.eq(prevli).animate({'left':760},function(){
				ismove = false;
			});
			prevli = nowli;
			return;
		}

		//最后一张幻灯片再往后的时候
		if(nowli>$len-1)
		{
			nowli = 0;
			prevli = $len-1;
			$li.eq(nowli).css({'left':760});
			$li.eq(nowli).animate({'left':0});
			$li.eq(prevli).animate({'left':-760},function(){
				ismove = false;
			});
			prevli = nowli;
			return;
		}

		// 幻灯片从右边过来
		if(nowli>prevli)
		{	
			// 把要过来的幻灯片先放到右边去
			$li.eq(nowli).css({'left':760});			
			$li.eq(prevli).animate({'left':-760});			
		}
		else //幻灯片从左边过来
		{
			// 把要过来的幻灯片先放到左边去
			$li.eq(nowli).css({'left':-760});		
			$li.eq(prevli).animate({'left':760});			
		}

		$li.eq(nowli).animate({'left':0},function(){
			ismove = false;
		});
		prevli = nowli;


	}
})