JQuery

一、JQuery中的window.onload=function(){}
   1.  $(function(){
         })
    2. $(document).ready(function(){
         })
    3.$().ready(function(){
       })
       以上三种方法，在页面中可以同时写
二、jquery中获取元素
      原生js获取方法     var xxx=docuemnt.getElementById(''); 等
                                    
       JQ中获取元素的方法  $(selector);  
        selector这个方法和原生的js选择器一样
       JQ中获取到的元素都是一个集合。 所以可以用 length判断是否获取元素成功
  1. 			$(function(){
  2. 				console.log($('input'));				//这里获取到的是两个input
  3. 				console.log($('input')[0]);           //这个获取到的是第一个input
  4. 				console.log($('#box'));
  5. 				console.log($('span','#div1'));			//从div1身上去获取span标签（注意顺序）
  6. 				console.log($('li',$('.list')));			//从div1身上去获取span标签（注意顺序）
  7. 				console.log($('.list li'));				//从div1身上去获取span标签
  8. 				
  9. 				console.log($('.list span'));			//如果是一个获取不到的元素，那它不会报错。如果要做判断的话，可以判断它的length属性  0的话就代表获取不到
  10. 				
  11. 				//var div3=$('#div2');
  12. 				var div2=document.getElementById("div2");		//用原生js获取到的元素不能使用jquery里的方法。如果想用的话，那就把原生js获取到的元素转成jquery的形式
  13. 				$(div2).css('background','red');		//把原生js的对象包装成jquery的对象
  14. 			});
  15. 			
  16. 	
  17. 		<input type="button" value="按钮" />
  18. 		<input type="button" value="按钮" />
  19. 		<div id="box">123</div>
  20. 		<div id="div1">
  21. 			<span>kaivon</span>
  22. 		</div>
  23. 		<ul class="list">
  24. 			<li>kaivon1</li>
  25. 		</ul>
  26. 		<div id="div2">kaivon3</div>
  
             * get(index)        把jquery对象转成原生对象  
             *         index        是元素的索引值  （一定要写）
             * 
             * 原生对象转jquery对象用$
             * jquery转原生对象用get(index);
  1. 			$(function(){
  2. 				console.log($('#div1').html());				//kaivon
  3. 				console.log($('#div1').innerHTML);			//undefined
  4. 				console.log($('#div1').get(0).innerHTML);	//kaivon
  5. 			})
  6. 		<div id="div1">kaivon</div>


三、JQ中的事件
 
             * jquery里的事件(没有on)
             *     语法
             *         $(元素).click(callBack);
            另一种添加事件的方法  
                   $(元素)on('click mousemove',callback);
             jquery中移除事件的方法
                       $(元素).off()      注意：这个移除是将元素身上的所有事件都移除掉
  1. 			$(function(){
  2. 				$('#btn').click(function(){
  3. 					//alert(1);
  4. 					console.log(this);		//原生的this一样是指向触发事件的对象
  5. 					console.log($(this));	//指向jquery的对象
  6. 				});
  7. 				
  8. 				$('#box').mouseover(function(){
  9. 					$(this).css('background','green');
  10. 					//不能写成 this.css('background','green');
  11. 				});
  12. 			});
  13. 			
  15. 		<input type="button" id="btn" value="按钮" />
  16. 		<div id="box"></div>

四、JQ中样式设置与value值、属性值、数据
   1.css
             * css()            关于样式的一些操作
             *     一个参数        获取属性的值
             *         参数为一个对象的话，表示设置属性，可以同时设置多个属性的值
             *     两个参数        设置属性的值
             *         第一个参数是属性名，第二个参数为属性名对应的值(不带单位也是可以的)
    2.value
             * 表单的value值
             *     val()            获取表单对应的value值
             *     val(values)        设置表单的value值
  1. 			$(function(){
  2. 				console.log($('#box').css('width'));			//100px		获取属性的值
  3. 				
  4. 				$('#btn').click(function(){
  5. 					/*$('#box').css('background','green');	
  6. 					$('#box').css('width',200);	
  7. 					$('#box').css('height',200);	*/
  8. 					
  9. 					$('#box').css({width:200,height:200,background:'green'});
  10. 				});
  11. 				
  12. 				
  13. 				console.log($('#btn').val());			//按钮
  14. 				$('#btn').val('kaivon');					//有参数的话就是设置value值
  15. 			});
  16. 			
  17. 		
  18. 		<input type="button" id="btn" value="按钮" />
  19. 		<div id="box"></div>
    3.attr
             * attr()            关于标签属性的操作
             *     一个参数            获取元素的某个属性
             *         参数的值就是属性名字
             *     两个参数            设置元素的某个属性
             *         第一个参数为属性名字，第二个参数为属性要设置成的值
    4.date
             * data()        给标签添加数据
             *         有参数的话，是添加数据（用对象的形式去表示）
             *         没参数的话，是获取数据
  1. 			$(function(){
  2. 				console.log($('p').attr('class'));		//con
  3. 				$('p').attr('class','neirong');
  4. 				
  5. 				$('input').attr('value','kaivon');		//这种方法这样写的话与val()这个方法的效果是一样的
  6. 				$('input').attr('name',123);				//可以添加自定义属性
  7. 				console.log($('input').attr('name'));		//123
  8. 				
  9. 				
  10. 				$('p').data({'name':'kaivon','age':18});
  11. 				console.log($('p').data());
  12. 			});
  13. 			
  14. 		<p class="con">kaivonkaivon</p>
  15. 		<input type="button" value="按钮" />
            结合css.  attr 例子
  1. 			$(function(){
  2. 				$('div').attr('on','false');
  3. 				
  4. 				$('input').click(function(){
  5. 					if($('div').attr('on')=='false'){
  6. 						$('div').css({width:200,height:200,background:'green'});
  7. 						$('div').attr('on','true');
  8. 					}else{
  9. 						$('div').css({width:100,height:100,background:'red'});
  10. 						$('div').attr('on','false');
  11. 					}
  12. 				});
  13. 			});
  14. 		
  15. 		<input type="button"  value="按钮"/>
  16. 		<div></div>
五 、JQ中的innerHTML 
             * html()        取元素里的内容，与js中的innerHTML的效果是一样的
             * text()        取元素里的文字，不取标签
  1. 			$(function(){
  2. 				console.log($('div').html());    //今天<span>是个</span>好的<span>日子</span>
  3. 				console.log($('div').text());    //今天是个好的日子
  4. 				
  5. 				$('div').html('<span>dasdasdas</span>');
  6. 				console.log($('div').html());    //<span>dasdasdas</span>
  7. 				console.log($('div').text());		//dasdasdas
  8. 			})
  10. 		<div>今天<span>是个</span>好的<span>日子</span></div>
六、JQ中的链式操作
    一个元素的连续操作
  1. $('div').css({width:100,height:100,background:'red'}).html('<span>kaivon</span>').click(function(){
  2. 					$(this).css('color','blue');
  3. 				});
七、JQ中的节点操作
 1.找父节点
         parent()           找到元素的第一层父节点
        parents()            找元素的所有父节点，一直找到html
  1. 			$(function(){
  2. 				$('#div2').parents().css('background','red');
  3. 			})
  5. 		<div id="div1">div1
  6. 			<div id="div2">div2</div>
  7. 		</div>
2.找最近的节点
    closest(selector)         从自身开始，一步一步往外找，找到对应的那一个后便会停止 (selector不能是空)
  1. 			$(function(){
  2. 				$('#div2').closest('.div1').css('border','1px solid #f00');
  3. 				
  4. 				$('span').click(function(){
  5. 					$(this).closest('li').css('background','red');
  6. 				});
  7. 			})
  10. 		<div class="div1">
  11. 			<div class="div1">div1
  12. 				<div id="div2">div2</div>
  13. 			</div>
  14. 		</div>
  15. 		
  16. 		<ul>
  17. 			<li>12121212<span>span</span></li>
  18. 			<li>222222<span>span</span></li>
  19. 			<li>333333<span>span</span></li>
  20. 			<li>444444<span>span</span></li>
  21. 		</ul>
3.获取节点
             * 获取节点   （主语不一定是父级）从自身去找，而不是相对父级，   
             *     .first()                获取主语第一个子节点   
             *     .last()                    获取主语最后一个子节点
             *     .slice(start,end)        截取部分子节点
             *         start                起始位置   （从0开始）
             *         end                    结束位置,不包含结束位置，第二个参数不写的话，截到最后一位
  1. 			$(function(){
  2. 				//$('li').first().css('background','red');
  3. 				//$('li').last().css('background','green');
  4. 				$('li').slice(2,4).css('background','yellow');
  5. 				$('li').slice(3).css('background','blue');
  6. 				$('ul').first().css('background','red');		//因为一个ul，
  7. 				$('ul').slice(1,2).css('color','yellow');        //这样是错误的，因为只有一个ul
  8. 			});
  10. 		<ul>
  11. 			<li>red</li>
  12. 			<li>green</li>
  13. 			<li>blue</li>
  14. 			<li>yellow</li>
  15. 			<li>pink</li>
  16. 		</ul>
        
             * .children    (selector)        获取到元素里的第一层子节点  （局限在第一层）
             *         参数如果没有的话，获取到父级下的所有子节点
             *         有参数的话，参数是一个选择器，找到对应选择器的节点
             * .find()                    获取元素里的所有节点    （不局限在第一层）
  1. 		$(function(){
  2. 				$('ul').children().css('color','red');      //获取到所有的第一层子节点
  3. 				$('ul').children('.blue').css('color','blue');  //获取到第一层子节点 中class为blue的子节点
  4. 				$('ul').find('li').css('background','pink');   //获取到所有的li节点
  5. 				$('ul').find('span').css('background','black');	 //获取到span标签
  6. 				
  7. 			})
  8. 		<ul>
  9. 			<li>red</li>
  10. 			<li>green</li>
  11. 			<li class="blue">blue</li>
  12. 			<li>yellow</li>
  13. 			<li>pink<span>black</span></li>
  14. 		</ul>
4.创建节点以及添加节点
             * 父级.append(要添加的元素)            把要添加的元素添加到父级的最后面
             * 父级.prepend(要添加的元素)            把要添加的元素添加到父级的最前面
             * 元素.before(要添加的元素)            把要添加的元素添加到一个指定的元素的前面
             * 元素.after(要添加的元素)            把要添加的元素添加到一个指定的元素的后面
  1. 			$(function(){
  2. 				
  3. 				//原生js创建节点方法
  4. 				// var ul=docuemnt.getElementById('#list');
  5. 				/* var li1=document.createElement('li');
  6. 				 li1.innerHTML='red';*/
  7. 				
  8. 				//原生js添加节点
  9. 				//ul.appendChild(li1);
  10. 				
  11. 				
  12. 				//JQ创建节点
  13. 				var li1=$('<li>red</li>')
  14. 				
  15. 				//JQ添加节点
  16. 				
  17. 				$('#list').append(li1);
  18. 				
  19. 				
  20. 				var div3=$('<div>blue</div>');
  21. 				var div4=$('<div>yellow</div>');
  22. 				
  23. 				
  24. 				$('body').append(div3);			//把div3添加到html中
  25. 				$('#list').before(div3);           //把div3放在了ul前面
  26. 				$('#list').after(div3);			//把div3放在了ul的后面
  27. 				
  28. 			});
  30. 		<ul id="list"></ul>
  另外一种方法
             * 要添加的元素.appendTo(父级)            把要添加的元素添加到父级的最后面
             * 要添加的元素.prependTo(父级)            把要添加的元素添加到父级的最前面
             * 要添加的元素.insertBefore(元素)        把要添加的元素添加到一个指定的元素的前面
             * 要添加的元素.insertAfter(元素)            把要添加的元素添加到一个指定的元素的后面

5.删除节点元素以及克隆节点
             * remove()        删除元素
             *     元素.remove();
             * 
             * clone(blooen)        克隆元素
             *     参数默认为空，表示只复制元素，不复制事件。如果参数为true，表示元素与事件都会被复制
 
  1. 			$(function(){
  2. 				$('li').first().remove();  //<li>red</li>被移除
  3. 				
  4. 				$('span').click(function(){
  5. 					console.log(1);
  6. 				});
  7. 				
  8. 				var newSpan=$('span').clone(true);
  9. 				$('div').append(newSpan);
  10. 			});
  12. 		<ul>
  13. 			<li>red</li>
  14. 			<li>green</li>
  15. 			<li>blue</li>
  16. 		</ul>
  17. 		
  18. 		<span>kaivon</span>
  19. 		<div></div>
6.上一个兄弟节点和下一个兄弟节点
             * 上一个兄弟节点
             *     .prev()
             * 
             * 下一个兄弟节点
             *     .next()
  1. 			$(function(){
  2. 				//上移功能
  3. 				$('input[value="上移"]').click(function(){
  4. 					var curLi=$(this).parent();
  5. 					var prevLi=curLi.prev();
  6. 					
  7. 					
  8. 					
  9. 					//因为这个是JQ的对象，所以判断上一个节点是否存在需要用length判断
  10. 					if(prevLi.length){
  11. 						prevLi.before(curLi);
  12. 					}else{
  13. 						alert('到头了');
  14. 					}
  15. 				});
  16. 				
  17. 				//下移功能
  18. 				$('input[value="下移"]').click(function(){
  19. 					var curLi=$(this).closest('li');
  20. 					var nextLi=curLi.next();
  21. 					
  22. 					if(nextLi.length){
  23. 						nextLi.after(curLi);
  24. 					}else{
  25. 						alert('到头了');
  26. 					}
  27. 				});
  28. 			});
  30. 		<ul>
  31. 			<li>1、<input type="button" value="上移"/><input type="button" value="下移"/></li>
  32. 			<li>2、<input type="button" value="上移"/><input type="button" value="下移"/></li>
  33. 			<li>3、<input type="button" value="上移"/><input type="button" value="下移"/></li>
  34. 			<li>4、<input type="button" value="上移"/><input type="button" value="下移"/></li>
  35. 			<li>5、<input type="button" value="上移"/><input type="button" value="下移"/></li>
  36. 		</ul>
七、JQ中索引值
             * index()        
             *     没有参数
             *         第一个元素（获取到的这个元素，因为jquery获取到的是一组数据）在兄弟元素中的排行
             *     有参数
             *         代表前面的元素在参数的标签（所有标签，不分兄弟）里排行第几
  1. 			$(function(){
  2. 				console.log($('#div1').index());			//0
  3. 				console.log($('div').index());			//1
  4. 				
  5. 				console.log($('span').index());			//4
  6. 				console.log($('#s1').index('span'));		//2
  7. 				console.log($('#s2').index('span'));		//5
  8. 				
  9. 				console.log($('.box').index('span'));	//-1		表示没有找到
  10. 			});
  12. 	
  13. 		<p>p</p>
  14. 		<div>div</div>
  15. 		<div>div</div>
  16. 		<!--<div id="div1"></div>-->
  17. 		<div>
  18. 			<div id="div1"></div>
  19. 		</div>
  20. 		
  21. 		
  22. 		<span></span>
  23. 		<span></span>
  24. 		<div class="box">
  25. 			<span id="s1">s1</span>
  26. 			<span></span>
  27. 			<span></span>
  28. 		</div>
  29.  		<div><span id="s2">s2</span></div>
             * 通过索引找到对应的元素（因为JQ中获取的对象是数组）
             *     eq(index)            参数为下标
              JS中通过索引找到对应元素 xxx[index]
            
  1. 			$(function(){
  2. 				$('#box input').click(function(){
  3. 					$('#box input').attr('class','');
  4. 					$(this).attr('class','active');
  5. 					$('#box div').attr('style','display:none');
  6. 					$('#box div').eq($(this).index()).attr('style','display: block;');
  7. 					   
  8. 				})
  9. 			})
  10. 	
  11. 		<div id="box">
  12. 			<input class="active" type="button" value="按钮一" />
  13. 			<input type="button" value="按钮二" />
  14. 			<input type="button" value="按钮三" />
  15. 			<div style="display: block;">1111</div>
  16. 			<div>2222</div>
  17. 			<div>3333</div>
  18. 		</div>
八、JQ中的循环
             * each(i,elem)            循环
             *         i                每个元素对应的下标（索引）
             *         elem                每个元素，原生的元素
  1. 			$(function(){
  2. 				$('li').each(function(i,elem){
  3. 					console.log(i,elem);
  4. 					
  5. 					console.log(this==elem);		//true    每个元素，原生的元素
  6. 					
  7. 					if(i==2){
  8. 						return;		//跳出循环
  9. 					}
  10. 					
  11. 					$(elem).html(i);		//elem是一个原生的对象，需要要转成jquery的对象
  12. 				});
  13. 			});
  14. 			
  15. 		<ul>
  16. 			<li></li>
  17. 			<li></li>
  18. 			<li></li>
  19. 			<li></li>
  20. 			<li></li>
  21. 		</ul>
九、JQ中包装对象
 
             * 包装对象：在外层包一层标签
             *     wrap()            在标签外在加一层父级    
             *     wrapAll()        把所有的标签都拿过来，放在一起，然后在他们的外面加一个父级
             *     wrapInner()        在父级的里面添加一个标签，并把内容放到这个标签里面
             *     unwrap()            删除父级(不包含body标签)
  1. 			$(function(){
  2. 				//$('span').wrap('<div style="color: #f00;"></div>');		//在span标签外面添加一个div作为父级
  3. 				//$('span').wrapAll('<h2 style="color: green;"></h2>');    //把所有的span标签集中到一起，然后给添加一个h2标签的父级
  4. 				//$('div span').wrapInner('<a href="#"></a>');				//在特定的span标签里面添加一个a标签
  5. 				$('span').unwrap();										//所有的span最近的父级都删除。
  6. 			});
  7. 	
  8. 		<div><span>kaivon1</span></div>
  9. 		<span>kaivon2</span>
  10. 		<div>
  11. 			<p><span>kaivon3</span></p>
  12. 		</div>
实例
  1. 			$(function(){
  2. 				$('input').click(function(){
  3. 					if($(this).val()=='管理员'){
  4. 						$('span').wrap('<a href="#"></a>');
  5. 					}else{
  6. 						$('span').unwrap();
  7. 					}
  8. 				});
  9. 			})
  10. 			
  11. 			
  12. 		<input type="radio" value="管理员" name="user" />管理员
  13. 		<input type="radio" value="普通用户" name="user" />普通用户
  14. 		<span>登录</span>
十、JQ中元素的尺寸
   1.元素自身的宽高
             * width()            获取元素的宽度（值不带单位）
             *         有参数的话，代表设置宽度，参数不用带单位
             * height()            获取元素的高度
             *         有参数的话，代表设置高度，参数不用带单位
             * innerWidth()        width+padding
             * innerHeight()        height+padding
             * outerWidth()        width+padding+border
             * outerHeight()        height+padding+border
    2.页面的宽高
                $(document).width()     页面的宽
                $(document).height()    页面的高
    3.可视区的宽高
                $(window).width()        可视区的宽
                $(window).height()       可视区的高
    4.元素相对于文档的距离
                .offset().left                元素距离文档左边的距离
                 .offset().top                元素距离文档顶部的距离    
    5.元素相对于父级的距离
                .position().left            元素相对于父级左边的距离
                .position().top            元素相对于父级顶部的距离
                但是position的值是不会把margin的值算进去。
     6.元素最近的有定位的父级
                .offsetParent()
  1. 			#div1{
  2. 				width: 200px;
  3. 				height: 200px;
  4. 				background: red;
  5. 				position: absolute;
  6. 				left: 50px;
  7. 				top: 50px;
  8. 			}
  9. 			#div2{
  10. 				width: 100px;
  11. 				height: 100px;
  12. 				background: green;
  13. 				margin: 50px;
  14. 				position: absolute;
  15. 				left: 20px;
  16. 				top: 20px;
  17. 			}
  19. 			
  20. 			
  21. 			
  22. 			$(function(){
  23. 				console.log($('#div1').offset().top);		//50
  24. 				console.log($('#div1').offset().left);		//50
  25. 				console.log($('#div2').offset().top);		//120
  26. 				console.log($('#div2').offset().left);		//120
  27. 				
  28. 				console.log($('#div2').position().left);		//20
  29. 				console.log($('#div2').position().top);		//20
  30. 				
  31. 				
  32. 				//绿色块离红色块的真正距离
  33. 				console.log($('#div2').offset().left-$('#div1').offset().left);   //70
  34. 				
  35. 				
  36. 				console.log($('#div2').offsetParent());		//div1
  37. 			})
  38. 	
  39. 		<div id="div1">
  40. 			<div id="div2"></div>
  41. 		</div>

     7.滚动条的距离      
            $(document).scrollTop()       竖向滚动条的距离
            $(document).scrollLeft()        横向滚动条的距离
            如有参数，就代表设置滚动条的距离   
  1. 			img{
  2. 				display: block;
  3. 				margin-top: 500px;
  4. 			}
  5. 	
  6. 			/*
  7. 			 * scroll()		滚动事件
  8. 			 */
  9. 			/*$(function(){
  10. 				$(document).scroll(function(){
  11. 					var sTop=$(document).scrollTop();
  12. 					var viewHeight=$(window).height();
  13. 					
  14. 					$('img').each(function(i,elem){
  15. 						//图片离文档最上面的距离如果比可视区的距离+滚动条的距离要小，说明图片已经进入到了可视区
  16. 						if($(elem).offset().top<viewHeight+sTop){
  17. 							$(elem).attr('src',$(elem).attr('_src'));
  18. 						}
  19. 					});
  20. 				});
  21. 			});*/
  22. 			
  23. 		
  24. 	
  25. 		<img _src="img1/1.jpg"/>
  26. 		<img _src="img1/2.jpg"/>
  27. 		<img _src="img1/3.jpg"/>
  28. 		<img _src="img1/4.jpg"/>
  29. 		<img _src="img1/5.jpg"/>
十一、JQ中的事件对象
        event.client  和 enent.page都是代表鼠标的位置
             * clientX          不带滚动条的距离  （和js一样都是代表相对于可视区的距离）
             * pageX            带滚动条的距离    （相对于文档的距离）

拖拽实例 -
  1. 			div{
  2. 				width: 100px;
  3. 				height: 100px;
  4. 				background: red;
  5. 				position: absolute;
  6. 				left: 0;
  7. 				top: 0;
  8. 			}
  9. 		</style>
  10. 		
  11. 			$(function(){
  12. 				$('div').mousedown(function(ev){
  13. 					var disX=ev.pageX-$(this).offset().left;    //算上了滚动条的距离
  14. 					var disY=ev.pageY-$(this).offset().top;
  15. 					
  16. 					$(document).mousemove(function(ev){
  17. 						$('div').css('left',ev.pageX-disX);
  18. 						$('div').css('top',ev.pageY-disY);
  19. 					});
  20. 					
  21. 					$(document).mouseup(function(){
  22. 						$(this).off();
  23. 					});
  24. 					
  25. 					return false;
  26. 				});
  27. 			});
  28. 			
  29. 			
  30. 	
  31. 	<body style="height: 2000px;">
  32. 		<div></div>
  33. 	</body>
十二、JQ中的事件委托
       语法
         $(元素).on('事件'，'委托的对象'，callback)
    
  1. 			$(function(){
  2. 				//点击li会改变背景色，但是新增的li就没有这个功能，可以使用事件委托
  3. 				/*$('li').click(function(){
  4. 					$(this).css('background','red');
  5. 				})*/    
  6. 				
  7. 				
  8. 				//把事件添加给ul，但是只有li才能触发这个事件 这个就是事件委托
  9. 				$('ul').on('click','li',function(){
  10. 					//console.log(1);
  11. 					//这里面的this指向第二个参数
  12. 					//console.log($(this));
  13. 					
  14. 					$(this).css('background','red');
  15. 				});
  16. 				
  17. 				//添加li
  18. 				$('input').click(function(){
  19. 					var li=$('<li>2222</li>');
  20. 					
  21. 					//li.appendTo($('ul'));
  22. 					$('ul').append(li);
  23. 				});
  24. 				
  25. 			});
  27. 		<input type="button" value="添加" />
  28. 		<ul style="border: 1px solid #f00;">
  29. 			<li>111</li>
  30. 			<li>111</li>
  31. 			<li>111</li>
  32. 			<li>111</li>
  33. 			<li>111</li>
  34. 		</ul>
十三、自定义事件
                //语法
                   //和普通的添加事件一样，用on   $(元素).on('自定义事件'，callback);
                   //触发器            $(元素).trigger('自定义事件')；
  1. 			$(function(){
  2. 				//自定义事件的绑定器用on，写法和普通的添加事件一样
  3. 				$('div').on('kaivon',function(){
  4. 					console.log('这是一个鼠标点击的自定义事件');
  5. 				});
  6. 				
  7. 				
  8. 				//自定义事件不会自己触发
  9. 				$('div').click(function(){
  10. 					//自定义事件触发器
  11. 					$('div').trigger('kaivon');
  12. 				});
  15. 		<div>kaivon</div>
十四、JQ中的运动(内部的机制是靠定时器实现的)
1. 渐隐渐现（只改变元素的透明度，不改变宽高）
             * 渐隐渐现
             * fadeIn(duration,easing,complate)        显示
             * fadeOut(duration,easing,complate)        隐藏
             * 
             * duration
             *         slow        600
             *         normal    400
             *         fast        200
             * 
             * easing
             *         linear,swing(默认)
             * 
             * complate
             *         运动完成后执行的回调函数
  1. 			$(function(){
  2. 				var btn=true;
  3. 				$('input').click(function(){
  4. 					if(btn){
  5. 						$('div').fadeOut(500,'linear',function(){
  6. 							console.log('隐藏运动完成了');
  7. 						});
  8. 						
  9. 						//$('div').fadeOut(400);		//默认是没有时间的，需要传一个时间参数
  10. 					}else{
  11. 						$('div').fadeIn(500,'linear',function(){
  12. 							console.log('显示运动完成了');
  13. 						});
  14. 						
  15. 						//$('div').fadeIn(400);		//默认是没有时间的，需要传一个时间参数
  16. 					}
  17. 					
  18. 					btn=!btn;
  19. 				});
  20. 			})
  21. 	
  22. 		<input type="button" value="点击" />
  23. 		<div></div>
             * fadeToggle(duration,easing,complate)        在两种效果之间进行切换(每次执行的时候系统会自动判断当前的效果)
             * 
             * duration
             *         slow        600
             *         normal    400
             *         fast        200
             * 
             * easing
             *         linear,swing(默认)
             * 
             * complate
             *         运动完成后执行的回调函数 
  1. 			$(function(){
  3. 				$('input').click(function(){
  4. 					$('div').fadeToggle(500,'linear',function(){
  5. 						console.log('toggle完了');
  6. 					});
  7. 				});
  8. 			})
  10. 		<input type="button" value="点击" />
  11. 		<div></div>
2.元素高度的张开与收缩
             * slideUp(duration,easing,complate)            收缩
             * slideDown(duration,easing,complate)        展开
             * 
             * duration
             *         slow        600
             *         normal    400
             *         fast        200
             * 
             * easing
             *         linear,swing(默认)
             * 
             * complate
             *         运动完成后执行的回调函数
    这种运动方法也有一种toggle     ---slideToggle()
    * slideToggle(duration,easing,complate)        在两种效果之间进行切换(每次执行的时候系统会自动判断当前的效果)

3.元素的显示与隐藏  （改变元素的宽高以及透明度）
             * show(duration,easing,complate)        显示
             * hide(duration,easing,complate)        隐藏
             * 
             * duration
             *         slow        600
             *         normal        400  
             *         fast        200
             * 
             * easing
             *         linear(匀速),swing(默认，缓冲)
             * 
             * complate
             *         运动完成后执行的回调函数

 这种运动方法也有一种toggle     ---toggle()
    * toggle(duration,easing,complate)        在两种效果之间进行切换(每次执行的时候系统会自动判断当前的效果)

4.元素的运动
             * animate(property,duration,easing,complate)
             *     property            要运动的属性，它是一个对象
             *     duration            运动的时间（默认为400）
             *     easing            运动的形式
             *                     swing        缓冲
             *                     linear        匀速
             *     complate            回调函数（运动完成后触发）.
  1. 			div{
  2. 				width: 200px;
  3. 				height: 100px;
  4. 				background: green;
  5. 				color: #fff;
  6. 				margin-top: 10px;
  7. 			}
  9. 			$(function(){
  10. 				$('input').eq(0).click(function(){
  11. 					$('#div1').animate({width:400},2000,'linear',function(){
  12. 						console.log('运动完成了');
  13. 					});
  14. 					$('#div2').animate({width:400},2000,'swing');
  15. 				});
  16. 				
  17. 				/*
  18. 				 * +=		在原有的基础上加上一个数值
  19. 				 * -=		在原有的基础上减去一个数值
  20. 				 */
  21. 				$('input').eq(1).click(function(){
  22. 					//$('#div3').animate({width:'+=100'},500,'linear');
  23. 					$('#div3').animate({width:'-=100'},500,'linear');
  24. 				});
  25. 				
  26. 				
  27. 				$('input').eq(2).click(function(){
  28. 					$('#div4').animate({width:'toggle',height:"toggle"},500,'linear');
  29.                                     toggle不仅是一种方法也是数据
  30. 				});
  31. 				
  32. 			});
  34. 		<input type="button" value="点击" />
  35. 		<div id="div1">div1</div>
  36. 		<div id="div2">div2</div>
  37. 		
  38. 		<input type="button" value="点击" />
  39. 		<div id="div3">div3</div>
  40. 		
  41. 		<input type="button" value="点击" />
  42. 		<div id="div4">div4</div>
5.延迟动画
             *     设置延迟
             *         delay(time);
  1. $('#div1').animate({width:300},2000).delay(2000).animate({height:300},2000);
    元素想运动改变宽，停止了两秒之后再改变高
6.停止动画
             *     停止动画
             *         stop()                只停止当前的运动（属性），后面的运动还会接着走
             *         stop(true)            所有的运动都停了
             *         stop(true,true)        当前的属性会马上到达目标点，后面的运动不会走
             *         finish()                所有的属性都会马上到达目标点，没运动的效果

  1. 			$(function(){
  2. 				$('input').eq(0).click(function(){
  3. 					$('#div1').animate({width:300},1000,'linear').animate({height:300},1000,'linear');
  4. 				});
  5. 				
  6. 				$('input').eq(1).click(function(){
  7. 					//$('#div1').stop();		//当此元素运动时候执行stop，当前运动停止，并执行接下来的运动
  8. 					//$('#div1').stop(true);	//该元素的所有运动都被停止
  9. 					//$('#div1').stop(true,true);	//该元素的所有运动都会停止，当前运动会跳到目标值
  10. 					$('#div1').finish();		//所有运动会立即到达目标值
  11. 				});
  12. 			});
  14. 		<input type="button" value="开始" />
  15. 		<input type="button" value="停止" />
  16. 		<div id="div1">div1</div>
 
7.先停止再运动（注意）
         
  1. 			div{
  2. 				width: 200px;
  3. 				height: 200px;
  4. 				background: green;
  5. 				color: #fff;
  6. 			}
  8. 			$(function(){
  9. 				$('#div1').mouseover(function(){
  10.                 //鼠标快速的移入和移除多少次，事件就会记录多少次，直到实行完毕才会停下来。
  11.                     //所以用stop()的方法，每一次触发事件的时候将当前的运动停止。
  12. 					$('#div1').stop().animate({width:400,height:400});
  13. 				}).mouseout(function(){
  14. 					$('#div1').stop().animate({width:200,height:200});
  15. 				});
  16. 			});
  18. 		<div id="div1">div1</div>





posted @ 2017-04-15 16:29  CafeMing  阅读(349)  评论(0)  编辑  收藏  举报