Web基础学习笔记-jQuery

jQuery简介

jQuery是一个JavaScript库。

jQuery极大地简化了JavaScript编程。

jQuery很容易学习。

什么是jQuery

jQuery是一个JavaScript函数库。

jQuery是一个轻量级地“写的少，做的多”的JavaScript库。

jQuery库包含一下功能：

• HTML元素选取
• HTML元素操作
• CSS操作
• HTML事件函数
• JavaScript特效和动画
• HTML DOM遍历和修改
• AJAX
• Utilities

除此之外，jQuery还提供了大量的插件

为什么使用jQuery

目前网络上有大量开源的JS框架，但是jQuery是目前最流行的JS框架，而且提供了大量的扩展。

很多大公司都在使用jQuery,例如：

Google，Microsof，IBM

jQuery安装

可以通过多种方法在网页中添加jQuery。

1，从jquery.com下载jQuery库

2, 从CDN中下载jQuery,如从Google中加载jQuery

下载jQuery

有两个版本jQuery可供下载：

Production version-用于实际的网站中，已被精简和压缩。

Development version--用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从jquery.com中下下载。

jQuery库是一个JavaScript文件，您可以使用HTML的标签引用它：

将下载的文件放在网页的同一目录下，就可以使用jQuery。

jQuery语法

通过jQuery,可以选取（查询，query) HTML元素，并对他们执行操作（action)。

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作

基础语法：

$(selector).aciton()

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

 实例：

• $(this).hide()-隐藏当前元素
• $("p").hide()-隐藏所有

  元素

• $("p.test").hide()-隐藏所有class="test"的

  元素 

$("test").hide()-隐藏所有id="test"的元素

jQuery入口函数：

$(document).ready(function(){
//执行代码
});
//或者
$(function(){
//执行代码
});

 JavaScript入口函数：

window.onload = function(){
//执行代码
}

 jQuery入口函数与JavaScript入口函数的区别：

jQuery的入口函数是在html所有标签（DOM)都加载之后，就会去执行。

JavaScript的window.onload事件是等到所有内容，包括外部图片之类的文件加载完成后，才会执行。

hello
hello
hello

$(document).ready(function(){
	// alert("文档加载完毕");
	$("p").click(function(){
		$(this).hide();
	})
});

选择器

$(document).ready(function(){
	$("button").click(function(){
		$("p").text("p");
		$("#pid").text("p元素被修改了");
		$(".class").text("类选择器");
	});
});

	
	
	
	


	
p1
	
p2
	
p3
	click me

jQuery事件：

• 常用事件方法
• 绑定事件
• 解除绑定事件
• 事件的目标
• 事件的冒泡
• 自定义事件

	
	
	
	


	click me

$(document).ready(function(){
	// $("button").click(function(){ //鼠标单击
	// $("button").dblclick(function(){  //鼠标双击
	// $("button").mouseenter(function(){  //鼠标滑过
	$("button").mouseleave(function(){  //鼠标离开
		$(this).hide();
	});
});

事件之绑定，解除绑定事件

$(document).ready(function(){
	// $("#clickMeBtn").click(function(){
		// alert("hello")
	// });
	$("#clickMeBtn").bind("click",clickHandler1);//绑定事件
	$("#clickMeBtn").bind("click",clickHandler2);
	$("#clickMeBtn").unbind("click",clickHandler1);//接触绑定
	
	$("#clickMeBtn").on("click",clickHandler1);
	$("#clickMeBtn").on("click",clickHandler2);
	$("#clickMeBtn").off("click",clickHandler1);
});
function clickHandler1(e){
	console.log("clickHandler1")
}
function clickHandler2(e){
	console.log("clickHandler2")
}

	
	
	
	


	click me

事件之事件目标与冒泡

$(document).ready(function(){
	$("body").bind("click",bodyHandler);
	$("div").bind("click".divHandler1);
	$("div").bind("click".divHandler2);
});
function bodyHandler(event){
	console.log(event);
}
function divHandler1(event){
	console.log(event);
	event.stopPropagation();//阻止父级冒泡
	// event.stopImmediatePropagation();//阻止所有的冒泡
}
function divHandler2(event){
	console.log(event);
}

	
	
	
	


	

	

		
A

		
B

		
C

		
D

	

事件之自定义事件

var ClickMeBtn;
$(document).ready(function(){
	ClickMeBtn = $("#ClickMeBtn");
	ClickMeBtn.click(function(){
		var e = jQuery.Event("MyEvent");
		ClickMeBtn.trigger(e);
	});
	ClickMeBtn.bind("MyEvent",function(event){
		console.log(event);
	});
});

	
	
	
	


	Click me

jQuery效果

• jQuery隐藏/显示
• jQuery淡入淡出
• jQuery滑动
• jQuery动画
• jQuery停止动画
• jQuery Callback
• jQuery Chaining

jQuery隐藏/显示

div{
	background:#ece023;
	width:50px;
	height:50px;
	margin:2px;
	float:right;
}

$(document).ready(function(){
	$("#hide").click(function(){
		$("p").hide(1000);//1000毫秒
	});
	$("#show").click(function(){
		$("p").show(1000);//1000ms
	});
	$("#toggle").click(function(){
		$("p").toggle(1000);
	});
});

	
	
	
	
	


	
	
	
	
	
		for(var i=0;i