zoukankan      html  css  js  c++  java

  • 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({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({200,height:200,background:'green'});
    7. 						$('div').attr('on','true');
    8. 					}else{
    9. 						$('div').css({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({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. 				 200px;
    3. 				height: 200px;
    4. 				background: red;
    5. 				position: absolute;
    6. 				left: 50px;
    7. 				top: 50px;
    8. 			}
    9. 			#div2{
    10. 				 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. 				 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. 				 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({400},2000,'linear',function(){
    12. 						console.log('运动完成了');
    13. 					});
    14. 					$('#div2').animate({400},2000,'swing');
    15. 				});
    16. 				
    17. 				/*
    18. 				 * +=		在原有的基础上加上一个数值
    19. 				 * -=		在原有的基础上减去一个数值
    20. 				 */
    21. 				$('input').eq(1).click(function(){
    22. 					//$('#div3').animate({'+=100'},500,'linear');
    23. 					$('#div3').animate({'-=100'},500,'linear');
    24. 				});
    25. 				
    26. 				
    27. 				$('input').eq(2).click(function(){
    28. 					$('#div4').animate({'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({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({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. 				 200px;
    3. 				height: 200px;
    4. 				background: green;
    5. 				color: #fff;
    6. 			}
    8. 			$(function(){
    9. 				$('#div1').mouseover(function(){
    10.                 //鼠标快速的移入和移除多少次，事件就会记录多少次，直到实行完毕才会停下来。
    11.                     //所以用stop()的方法，每一次触发事件的时候将当前的运动停止。
    12. 					$('#div1').stop().animate({400,height:400});
    13. 				}).mouseout(function(){
    14. 					$('#div1').stop().animate({200,height:200});
    15. 				});
    16. 			});
    18. 		<div id="div1">div1</div>
  • 相关阅读:
    基本排序算法
    Ubuntu下fcitx安装。（ibus不会用）
    sublime搭建Java编译平台及编码问题
    Centos6.5（final）安装gcc和g++，python以及导致问题的解决方法
    如何查询centos查看系统内核版本,系统版本,32位还是64位
    vim插件之SnipMate
    Linux rename命令
    Hadoop安装（Ubuntu Kylin 14.04）
    vim 文字插入
    Checkbox indeterminate属性
  • 原文地址：https://www.cnblogs.com/CafeMing/p/6714575.html
Copyright © 2011-2022 走看看