JQuery学习笔记（一）

最新推荐文章于 2024-01-20 21:49:50 发布

一只懒猫不爱睡觉

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量157

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/xyh123chh/article/details/75647285

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery学习主要内容：

1、页面加载完毕，函数编写。

2、jQuery选择器

3、jQuery事件

4、显示/隐藏效果

5、淡入/淡出效果

一、选择器

$('*') --》选择所有元素。

$('this') --》选择当前元素。

$('ul li:first') --》选取第一个<ul>元素的第一个<li>元素
$(ul li:first-child) --》选取每个<ul>元素的第一个<li>元素

$(':button') --》选取所有 type="button" 的 <input> 元素和 <button> 元素，如果：去掉，只能获取<button>元素。

二、事件

dblclick() --》双击元素发生该事件。

hover() --》用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

focus() --》当元素获得焦点时，发生 focus 事件
blur() --》当元素失去焦点时，发生 blur 事件。

三、显示和隐藏效果

$(selector).hide(speed,callback); $(selector).show(speed,callback);可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

toggle() 方法来切换 hide() 和 show() 方法。

代码如下：



	
		
   
   
		<script src="../js/jquery-1.9.0.js"></script>
	
	
		
   
   
    
    
			点击显示我就会出来，点击隐藏我就会消失掉
		
   
   	
		
		
   
   
    
    
			toggle方法既可以显示又可以隐藏
		
   
   		
		
		
		
		<script >
			$(function(){
				
				$('#show').click(function(){
					//$('.div1').show(1000);
					//$('.div1').show('slow');
					$('.div1').show('fast');
				});
				$('#hide').click(function(){
					//$('.div1').hide(1000);
					//$('.div1').hide('slow');
					$('.div1').hide('fast');
				});
				$('#toggle').click(function(){
					//$('.div2').toggle(1000);
					$('.div2').toggle('slow');
					//$('.div2').toggle('fast');
				});	
			});
		</script>

四、淡入和淡出效果

     $(selector).fadeIn(speed,callback)实现元素淡入，显示出来

     $(selector).fadeOut(speed,callback)实现元素淡出，消失。

    $(selector).fadeToggle(speed,callback)方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

    $(selector).fadeTo(speed,opacity,callback) 方法中， speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

代码如下：



	
		
    
    
		<script src="../js/jquery-1.9.0.js"></script>
	
	
		
		
		
		
		

		
    
    


		
    
    


		
    
    
		<script >
			$(function(){				
				$('#fadein').click(function(){
					$('#div1').fadeIn(1000);
					$('#div2').fadeIn('slow');
					$('#div3').fadeIn('fast');
				});
				$('#fadeout').click(function(){
					$('#div1').fadeOut(1000);
					$('#div2').fadeOut('slow');
					$('#div3').fadeOut('fast');
				});
				$('#fadeToggle').click(function(){
					$('#div1').fadeToggle(1000);
					$('#div2').fadeToggle('slow');
					$('#div3').fadeToggle('fast');
				});
				$('#fadeTo').click(function(){
					$('#div1').fadeTo(1000,0.15);
					$('#div2').fadeTo('slow',0.15);
					$('#div3').fadeTo('fast',0.15);
				});
			});
		</script>