前端开发

jQuery学习笔记

jQuery语法

基础语法：$(selector).action()

  • 美元符号定义jQuery
  • 选择符（selector）“查询”和“查找”HTML元素
  • jQuery的action()执行对元素的操作

例子：演示 jQuery 的 hide() 函数，隐藏 id=”test” 的元素。

1
2
3
4
5
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

所有 jQuery函数位于一个 document ready 函数中：

1
2
3
$(document).ready(function(){
   // 开始写 jQuery 代码...
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

提示：简洁写法（与以上写法效果相同）:

1
2
3
$(function(){
   // 开始写 jQuery 代码...
});

jQuery事件

  • 鼠标移入事件mouseenter
  • 鼠标移出mouseleave
  • 鼠标双击事件dblclick
  • 鼠标按下 mousedown
  • 鼠标松开 mouseup
  • hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定的第二个函数（mouseleave）。
  • focus()——当元素获得焦点时，发生 focus 事件。
    当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
  • 当元素失去焦点时，发生 blur 事件。
    1
    2
    3
    4
    5
    $(document).ready(function(){
      $("#p1").mouseenter(function(){
        alert("您的鼠标移到了 id=p1 的元素上!");
      });
    });

hover()实例：

1
2
3
4
5
6
7
8
$(document).ready(function(){
	$("#p1").hover(function(){
		alert("hello");
	},
	function(){
		alert("bye");
	});
});

focus()和blur()

1
2
3
4
5
6
7
8
$(document).ready(function(){
	$("input").focus(function(){
		$(this).css("background-color","#ccc");
	});
$("input").blur(function(){
		$(this).css("background-color","red");
	});
});

jQuery隐藏、显示

  • 隐藏hide()

  • 显示show()

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

  • toggle() 用于切换hide()和show()方法

    1
    2
    3
    4
    语法:
    	$(selector).toggle(speed,callback);
    	可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
    	可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
1
2
3
4
5
6
7
8
9
10
11
<div class="ex">
	<button class="hide">点我隐藏</button>
	<p>站点名: Google<br> 
	站点 URL：http://www.google.com</p>
</div>
$(document).ready(function(){
	$(".ex .hide").click(function(){
		$(this).parents(".ex").hide("slow");
	});
});

jQuery 淡入淡出

jQuery有四种fade方法：

  • fadeIn() 淡入已隐藏的元素
  • fadeOut() 用于淡出可见元素
  • fadeTo() 允许渐变为给定的不透明度（值介于 0 与 1 之间）
  • fadeToggle() 切换 fadeIn() 与 fadeOut() 方法

fadeIn()语法:

1
2
3
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

1
2
3
4
$("button").click(function(){
	$("#div1").fadeIn();
	$("#div2").fadeIn("slow");
});

fadeOut()语法:

1
2
3
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeToggle()语法:

1
2
3
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

1
2
3
4
5
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo()语法:

1
2
3
4
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

1
2
3
4
5
$("button").click(function(){
	$("#div1").fadeTo("slow",0.15);
	$("#div2").fadeTo("slow",0.4);
	$("#div3").fadeTo("slow",0.7);
});

jQuery 效果之滑动

  • slideDown() 向下滑动元素
  • slideUp() 向上滑动元素
  • slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换

三者的语法:

1
2
3
4
/* functionName可为slideDown、slideUp、slideToggle */
$(selector).functionName(speed,callback);  
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

1
2
3
$("#flip").click(function(){
  $("#panel").slideDown();
});

jQuery效果之动画

jQuery animate()方法用于创建自定义动画。

1
2
3
4
5
语法：
	$(selector).animate({params}, speed, callback);
	必需的 params 参数定义形成动画的 CSS 属性。
	可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
	可选的 callback 参数是动画完成后所执行的函数名称。

1
2
3
4
5
6
7
8
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
_____________________________________________________________________
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});

默认情况下，所有HTML元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的CSS position属性设置为relative、fixed或absolute！

操作多个属性

1
2
3
4
5
6
7
8
$("button").click(function(){
	$("div").animate({
		left:'250px',
		opacity:'0.5',
		height:'150px',
		width:'150px'
	});
});

可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jquery.com 下载 Color Animations 插件。

stop()方法用于在动画或效果完成前对它们进行停止。

1
2
3
4
5
6
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
	$(selector).stop(stopAll,goToEnd);
	可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
	可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
	因此，默认地，stop() 会清除在被选元素上指定的当前动画。

jQuery Callback 函数在当前动画 100% 完成之后执行。

1
2
3
4
5
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("The paragraph is now hidden");
  });
});

jQuery方法链接
有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示： 这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

1
$("#p1").css("color","red").slideUp(2000).slideDown(2000);