jQuery框架

一 、什么是jQuery

jQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。

二、 jQuery的功能和优势

功能：
1.像 CSS 那样访问和操作 DOM
2.修改 CSS 控制页面外观
3.简化 JavaScript 代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让 Ajax 技术更加完美 异步加载
7.基于 jQuery 大量插件
8.自行扩展功能插件**

优势：
就是特别的方便。比如模仿 CSS 获取 DOM，比原生的 JavaScript要方便太多。并且在多个 CSS 设置上的集中处理非常舒服，而最常用的 CSS 功能又封装到单独的方法，感觉非常有心。最重要的是 jQuery 的代码兼容性非常好，你不需要总是头疼

第一个入门程序

首先引用jQuery库

$(function () {	
	$('input').click(function () {	
	alert('第一个 jQuery 程序！');	
	});
});

代码风格

在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“KaTeX parse error: Unexpected character: '' at position 4: ”来起̲始的。而这个“”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写
：$(function () {});

//执行一个匿名函数KaTeX parse error: Expected 'EOF', got '#' at position 3: (‘#̲box’); //进行执行的…(‘#box’).css(‘color’, ‘red’);

//执行功能函数由于$本身就是jQuery对象的缩写形式，那么也就是说上面的三段代码也可以写成如下形式

`jQuery(function () {});jQuery(‘#box’);jQuery(‘#box’).css(‘color’, ‘red’);`

值得一提的是，执行了.css()这个功能函数后，最终返回的还是jQuery对象，那么也就是说，jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。$('#box').css('color', 'red').css('font-size', '50px');
//连缀jQuery中代码注释和JavaScript是保持一致的，有两种最常用的注释：单行使用“//…” ，多行使用“/* … */” 。

加载模式：

我们在之前的代码一直在使用$(function () {});这段代码进行首尾包裹，那么为什么必须要包裹这段代码呢？原因是我们jQuery库文件是在body元素之前加载的，我们必须等待所有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。在延迟等待加载，JavaScript提供了一个事件为load，方法如下：

window.onload = function () {}; 
//JavaScript等待加载

$(document).ready(function () {});
 //jQuery等待加载

对象互换
jQuery 对象虽然是 jQuery 库独有的对象，但它也是通过 JavaScript 进行封装而来的。 我们可以直接输出来得到它的信息。alert($);

//jQuery 对象方法内部alert($());

//jQuery 对象返回的对象，还是 jQueryalert($(’#box’));

//包裹 ID 元素返回对象，还是 jQuery从上面三组代码我们发现：只要使用了包裹后，最终返回的都是 jQuery 对象。这样的好处显而易见，就是可以连缀处理。但有时，我们也需要返回原生的 DOM 对象，比如：

alert(document.getElementById('box'));
 //[object HTMLDivElement]jQuery 

想要达到获取原生的 DOM 对象，可以这么处理：alert($(’#box’).get(0));

//ID 元素的第一个原生 DOM从上面 get(0)，这里的索引看出，jQuery 是可以进行批量处理 DOM 的.

三、常规选择器

$('div').css('color', 'red'); //元素选择器，返回多个元素KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').css('colo…(’.box’).css(‘color’, ‘red’);`
//类(class)选择器，返回多个元素为了证明 ID 返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。

alert($('div').size());

alert($(’#box’).length);

进阶选择器

KaTeX parse error: Unexpected character: '' at position 60: …群组选择器 jQuery 方式̲(‘ul li a’).css(‘color’, ‘red’);
//群组选择器 jQuery 方式$(’*’).css(‘color’, ‘red’);
//通配选择器

高级选择器

$(‘#box p’).css(‘color’, ‘red’);    等价于 $('#box').find('p').css('color', 'red');
$(‘#box > p’).css(‘color’, ‘red’);  等价于 $(‘#box’).children(‘p’).css(‘color’, ‘red’);$(‘#box+p’).css(‘color’, ‘red’);    等价于 $('#box').next('p').css('color', 'red');
$(‘#box ~ p’).css(‘color’, ‘red’);   等价于 $('#box').nextAll('p').css('color', 'red');

属性选择器

过滤选择器

$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素，负数从后开始$('li').first().css('background', '#ccc'); //元素 li 的第一个元素$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素

基础 DOM 和 CSS 操作

DOM 在 JavaScript 课程中我们详细的探讨过，它是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。在 JavaScript 中，DOM 不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。
在 jQuery 中，已经将最常用的 DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。

设置元素内容

我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候， 我们就可以对这些元素进行 DOM 的操作。 那么， 最常用的操作就是对元素内容的获取和修改。

html()和 text()方法

解绑事件

//使用 unbind 删除绑定的事件$('input').unbind(); //删除所有当前元素的事件//使用 unbind 参数删除指定类型事件
$('input').unbind('click'); //删除当前元素的 click 事件

//使用 unbind 参数删除指定处理函数的事件
function fn1() {
alert('点击 1');
}function fn2() {
alert('点击 2');}
//绑定了两个事件函数$('input').bind('click', fn1);
$('input').bind('click', fn2);
$('input').unbind('click', fn1); //只删除 fn1 处理函数的事件

解绑事件2

问题：有时候,我们的标签绑定了两个事件,而执行这两个事件的函数都是匿名函数,我们想解绑其中一个,那怎么办呢? 可以給事件加 一个命名空间 来区分。

$(‘input’).bind(‘click.abc’, function () {
//.abc 相当于个这个click事件起了个别名 这样就有了区分alert(‘abc’);});$(‘input’).bind(‘click.xyz’, function () {
alert(‘xyz’);
});
$(‘input’).unbind(‘click.abc’); 
//移除 click 事件中命名空间为 abc 的注意：
也可以直接使用('.abc')，这样的话，可以移除相同命名空间的不同事件。

事件对象event的属性

冒泡行为和默认行为的阻止和取消

高级事件 on off one

目前绑定事件和解绑的方法 在 jQuery1.7 以后推出了.on()和.off()方法彻底摒弃bind()和unbind()。

老方式 绑定事件 bind()   新方式  on()
老方式 解绑事件 unbind()  新方式 off()
以后推荐使用新方式来绑定和解绑事件

//替代.bind()方式
$('.button').on('click', function () {alert('替代.bind()');});
//替代.bind()
方式，并使用额外数据和事件对象
$('.button').on('click', {user : 'Lee'}, function (e) 
{alert('替代.bind()' + e.data.user);
});

动画上卷 下拉

jQuery 提供了一组改变元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顾名思义，向上收缩(卷动)和向下展开(滑动)。