jQuery库（第一部分）

一：jQuery简介：
1）：jQuery是一个JavaScript的库，他可以用简单的代码，实现复杂的功能。
2）：学习起来简单，可以快速实现某个需求。

二：jQuery的安装：
1）：可以下载jQuery库，在HTML代码中进行引入。
2）：使用CDN进行引入，（百度，谷歌，新浪，）
3）：查看jQuery的版本信息：在浏览器控制台输入：$.fn.jquery即可查看版本。

三：jQuery的语法：
1）： $(selector).action()
selector：查询或者查找HTML元素。
action：执行对应的元素。
2）：例子： $§.hide()
3）：文档就绪事件：
方法一：
$(document).ready(function(){

		// 开始写 jQuery 代码...

		});
		方法二：
		$(function(){

		// 开始写 jQuery 代码...

		});

四:jQuery选择器：
1）：选取标签的元素：KaTeX parse error: Expected 'EOF', got '#' at position 12: ("p") 2）：#̲id选择器：("#id")
3）：.class选择器：$(".class")
4）：更多示例：
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$(“p.intro”) 选取 class 为 intro 的

元素
$(“p:first”) 选取第一个

元素
$(“ul li:first”) 选取第一个

• 元素的第一个
• 元素
  $(“ul li:first-child”) 选取每个
  • 元素的第一个
  • 元素
    $("[href]") 选取带有 href 属性的元素
    $(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 元素
    $(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 元素
    $(":button") 选取所有 type=“button” 的 元素 和 元素
    $(“tr:even”) 选取偶数位置的 元素
    $(“tr:odd”) 选取奇数位置的 元素

五：jQuery函数的引用：
1）：为了使代码易于管理与维护通常我们将jQuery函数独立放在js文件夹中，最后用scr进行引入。
示例：

六：jQuery的事件：
1）：什么是事件：
页面对不同访问者的响应叫做事件。
示例：1，在元素上移动鼠标
2，选取单选按钮,3，点击元素

	2）：常见的DOM事件：
	1，鼠标事件：click  dblclick  mouseenter  mouseleave  hover
	2，键盘事件：keypress	  keydown  keyup	
	3，表单事件：submit	change	focus	blur	
	4，文档/窗口事件：load	resize	scroll	unload
	3）：jQuery事件方法语法：
	在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
	页面中指定一个点击事件：$("p").click();
	下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
	
	$("p").click(function(){
	// 动作触发后执行的代码!!
	});
	

	4）：常用的jQuery事件方法：
	$(document).ready()   
	文档完全加载后执行函数。
	
	click()               
	点击后触发一个函数。		
	
	dblclick()
	当双击元素时，会发生 dblclick 事件。
	
	mouseenter()
	当鼠标指针穿过元素时，会发生 mouseenter 事件。
	
	mouseleave()
	当鼠标指针离开元素时，会发生 mouseleave 事件。
	
	mousedown()
	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
	
	mouseup()
	当在元素上松开鼠标按钮时，会发生 mouseup 事件。
	
	mouseup() 
	方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

	hover()方法用于模拟光标悬停事件。

	focus()
	当元素获得焦点时，发生 focus 事件。
	当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

	blur()
	当元素失去焦点时，发生 blur 事件。
	blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

七：jQuery效果 — 隐藏和显示：
1）：jQuery hide（）和 show（）来隐藏和显示HTML元素：
$("#hide").click(function(){
$(“p”).hide();
});

	$("#show").click(function(){
		$("p").show();
	});
	2）：jQuery toggle（）通过jQuery，您可以使用toggle（）方法来切换hide（）和show（）方法
	$("button").click(function(){
		$("p").toggle();
	});

八：jQuery效果 — 淡入淡出
1）：jQuery fadeIn() 方法jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
实例
$(“button”).click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn(“slow”);
$("#div3").fadeIn(3000);
});

	2）：jQuery fadeOut() 方法
	jQuery fadeOut() 方法用于淡出可见元素。
	语法:
	$(selector).fadeOut(speed,callback);
	可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
	可选的 callback 参数是 fading 完成后所执行的函数名称。
	下面的例子演示了带有不同参数的 fadeOut() 方法：
	实例
	$("button").click(function(){
		$("#div1").fadeOut();
		$("#div2").fadeOut("slow");
		$("#div3").fadeOut(3000);
	});


	3）：jQuery fadeToggle() 方法
	jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
	如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
	如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
	语法:
	$(selector).fadeToggle(speed,callback);
	可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
	可选的 callback 参数是 fading 完成后所执行的函数名称。
	下面的例子演示了带有不同参数的 fadeToggle() 方法：
	实例
	$("button").click(function(){
	$("#div1").fadeToggle();
	$("#div2").fadeToggle("slow");
	$("#div3").fadeToggle(3000);
	});


	4）：jQuery fadeTo() 方法
	jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
	语法:
	$(selector).fadeTo(speed,opacity,callback);
	必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
	fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
	可选的 callback 参数是该函数完成后所执行的函数名称。
	下面的例子演示了带有不同参数的 fadeTo() 方法：
	实例
	$("button").click(function(){
		 $("#div1").fadeTo("slow",0.15);
		 $("#div2").fadeTo("slow",0.4);
		 $("#div3").fadeTo("slow",0.7);
	});

九：jQuery效果 - 滑动：
1）：jQuery slideDown（）方法用于向下滑动的元素。
语法：
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。

	2）：jQuery slideUp() 方法用于向上滑动元素。
	语法：
	$(selector).slideUp(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。


	3）：jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。
	$(selector).slideToggle(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。

十：jQuery效果 - 动画：
1）：jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

	2）：jQuery animate() - 操作多个属性
	请注意，生成动画的过程中可同时使用多个属性：


	3）：jQuery animate() - 使用相对值
	也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

	4）：jQuery animate() - 使用预定义的值
	您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
	
	5）：jQuery animate() - 使用队列功能
	默认地，jQuery 提供针对动画的队列功能。
	这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。