JQuery

			$(function(){
				
				//原生js创建节点方法
				// var ul=docuemnt.getElementById(‘#list‘);
				/* var li1=document.createElement(‘li‘);
				 li1.innerHTML=‘red‘;*/
				
				//原生js添加节点
				//ul.appendChild(li1);
				
				
				//JQ创建节点
				var li1=$(‘<li>red</li>‘)
				
				//JQ添加节点
				
				$(‘#list‘).append(li1);
				
				
				var div3=$(‘<div>blue</div>‘);
				var div4=$(‘<div>yellow</div>‘);
				
				
				$(‘body‘).append(div3);			//把div3添加到html中
				$(‘#list‘).before(div3);           //把div3放在了ul前面
				$(‘#list‘).after(div3);			//把div3放在了ul的后面
				
			});
		<ul id="list"></ul>

			$(function(){
				$(‘li‘).first().remove();  //<li>red</li>被移除
				
				$(‘span‘).click(function(){
					console.log(1);
				});
				
				var newSpan=$(‘span‘).clone(true);
				$(‘div‘).append(newSpan);
			});
		<ul>
			<li>red</li>
			<li>green</li>
			<li>blue</li>
		</ul>
		
		<span>kaivon</span>
		<div></div>

			$(function(){
				//上移功能
				$(‘input[value="上移"]‘).click(function(){
					var curLi=$(this).parent();
					var prevLi=curLi.prev();
					
					
					
					//因为这个是JQ的对象，所以判断上一个节点是否存在需要用length判断
					if(prevLi.length){
						prevLi.before(curLi);
					}else{
						alert(‘到头了‘);
					}
				});
				
				//下移功能
				$(‘input[value="下移"]‘).click(function(){
					var curLi=$(this).closest(‘li‘);
					var nextLi=curLi.next();
					
					if(nextLi.length){
						nextLi.after(curLi);
					}else{
						alert(‘到头了‘);
					}
				});
			});
		<ul>
			<li>1、<input type="button" value="上移"/><input type="button" value="下移"/></li>
			<li>2、<input type="button" value="上移"/><input type="button" value="下移"/></li>
			<li>3、<input type="button" value="上移"/><input type="button" value="下移"/></li>
			<li>4、<input type="button" value="上移"/><input type="button" value="下移"/></li>
			<li>5、<input type="button" value="上移"/><input type="button" value="下移"/></li>
		</ul>

			$(function(){
				console.log($(‘#div1‘).index());			//0
				console.log($(‘div‘).index());			//1
				
				console.log($(‘span‘).index());			//4
				console.log($(‘#s1‘).index(‘span‘));		//2
				console.log($(‘#s2‘).index(‘span‘));		//5
				
				console.log($(‘.box‘).index(‘span‘));	//-1		表示没有找到
			});
	
		<p>p</p>
		<div>div</div>
		<div>div</div>
		<!--<div id="div1"></div>-->
		<div>
			<div id="div1"></div>
		</div>
		
		
		<span></span>
		<span></span>
		<div class="box">
			<span id="s1">s1</span>
			<span></span>
			<span></span>
		</div>
 		<div><span id="s2">s2</span></div>

			$(function(){
				$(‘li‘).each(function(i,elem){
					console.log(i,elem);
					
					console.log(this==elem);		//true    每个元素，原生的元素
					
					if(i==2){
						return;		//跳出循环
					}
					
					$(elem).html(i);		//elem是一个原生的对象，需要要转成jquery的对象
				});
			});
			
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

			$(function(){
				//$(‘span‘).wrap(‘<div style="color: #f00;"></div>‘);		//在span标签外面添加一个div作为父级
				//$(‘span‘).wrapAll(‘<h2 style="color: green;"></h2>‘);    //把所有的span标签集中到一起，然后给添加一个h2标签的父级
				//$(‘div span‘).wrapInner(‘<a href="#"></a>‘);				//在特定的span标签里面添加一个a标签
				$(‘span‘).unwrap();										//所有的span最近的父级都删除。
			});
	
		<div><span>kaivon1</span></div>
		<span>kaivon2</span>
		<div>
			<p><span>kaivon3</span></p>
		</div>

			$(function(){
				$(‘input‘).click(function(){
					if($(this).val()==‘管理员‘){
						$(‘span‘).wrap(‘<a href="#"></a>‘);
					}else{
						$(‘span‘).unwrap();
					}
				});
			})
			
			
		<input type="radio" value="管理员" name="user" />管理员
		<input type="radio" value="普通用户" name="user" />普通用户
		<span>登录</span>

			#div1{
				width: 200px;
				height: 200px;
				background: red;
				position: absolute;
				left: 50px;
				top: 50px;
			}
			#div2{
				width: 100px;
				height: 100px;
				background: green;
				margin: 50px;
				position: absolute;
				left: 20px;
				top: 20px;
			}
			
			
			
			$(function(){
				console.log($(‘#div1‘).offset().top);		//50
				console.log($(‘#div1‘).offset().left);		//50
				console.log($(‘#div2‘).offset().top);		//120
				console.log($(‘#div2‘).offset().left);		//120
				
				console.log($(‘#div2‘).position().left);		//20
				console.log($(‘#div2‘).position().top);		//20
				
				
				//绿色块离红色块的真正距离
				console.log($(‘#div2‘).offset().left-$(‘#div1‘).offset().left);   //70
				
				
				console.log($(‘#div2‘).offsetParent());		//div1
			})
	
		<div id="div1">
			<div id="div2"></div>
		</div>

			img{
				display: block;
				margin-top: 500px;
			}
	
			/*
			 * scroll()		滚动事件
			 */
			/*$(function(){
				$(document).scroll(function(){
					var sTop=$(document).scrollTop();
					var viewHeight=$(window).height();
					
					$(‘img‘).each(function(i,elem){
						//图片离文档最上面的距离如果比可视区的距离+滚动条的距离要小，说明图片已经进入到了可视区
						if($(elem).offset().top<viewHeight+sTop){
							$(elem).attr(‘src‘,$(elem).attr(‘_src‘));
						}
					});
				});
			});*/
			
		
	
		<img _src="img1/1.jpg"/>
		<img _src="img1/2.jpg"/>
		<img _src="img1/3.jpg"/>
		<img _src="img1/4.jpg"/>
		<img _src="img1/5.jpg"/>

			div{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
		
			$(function(){
				$(‘div‘).mousedown(function(ev){
					var disX=ev.pageX-$(this).offset().left;    //算上了滚动条的距离
					var disY=ev.pageY-$(this).offset().top;
					
					$(document).mousemove(function(ev){
						$(‘div‘).css(‘left‘,ev.pageX-disX);
						$(‘div‘).css(‘top‘,ev.pageY-disY);
					});
					
					$(document).mouseup(function(){
						$(this).off();
					});
					
					return false;
				});
			});
			
			
	
	<body style="height: 2000px;">
		<div></div>
	</body>

			$(function(){
				//点击li会改变背景色，但是新增的li就没有这个功能，可以使用事件委托
				/*$(‘li‘).click(function(){
					$(this).css(‘background‘,‘red‘);
				})*/    
				
				
				//把事件添加给ul，但是只有li才能触发这个事件 这个就是事件委托
				$(‘ul‘).on(‘click‘,‘li‘,function(){
					//console.log(1);
					//这里面的this指向第二个参数
					//console.log($(this));
					
					$(this).css(‘background‘,‘red‘);
				});
				
				//添加li
				$(‘input‘).click(function(){
					var li=$(‘<li>2222</li>‘);
					
					//li.appendTo($(‘ul‘));
					$(‘ul‘).append(li);
				});
				
			});
		<input type="button" value="添加" />
		<ul style="border: 1px solid #f00;">
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
		</ul>

			$(function(){
				//自定义事件的绑定器用on，写法和普通的添加事件一样
				$(‘div‘).on(‘kaivon‘,function(){
					console.log(‘这是一个鼠标点击的自定义事件‘);
				});
				
				
				//自定义事件不会自己触发
				$(‘div‘).click(function(){
					//自定义事件触发器
					$(‘div‘).trigger(‘kaivon‘);
				});
		<div>kaivon</div>

			$(function(){
				var btn=true;
				$(‘input‘).click(function(){
					if(btn){
						$(‘div‘).fadeOut(500,‘linear‘,function(){
							console.log(‘隐藏运动完成了‘);
						});
						
						//$(‘div‘).fadeOut(400);		//默认是没有时间的，需要传一个时间参数
					}else{
						$(‘div‘).fadeIn(500,‘linear‘,function(){
							console.log(‘显示运动完成了‘);
						});
						
						//$(‘div‘).fadeIn(400);		//默认是没有时间的，需要传一个时间参数
					}
					
					btn=!btn;
				});
			})
	
		<input type="button" value="点击" />
		<div></div>

			$(function(){
				$(‘input‘).click(function(){
					$(‘div‘).fadeToggle(500,‘linear‘,function(){
						console.log(‘toggle完了‘);
					});
				});
			})
		<input type="button" value="点击" />
		<div></div>