jquery学习笔记

把当年的学习笔记发给大家看看，希望大家都能养成良好的学习方法。
从此开始我的JQuery学习历程，首先说下自己的学习心得，“不懂就学，不会就抄，会了就总结”。现在便是该总结的时候了，这是一个很重要的习惯，只有总结了才算没有白学。我媳妇说凡事不能半途而废嘛。呵呵。。。费话不多说了，首先讲下JQuery….
一。 JQuery的作用与规范
jQuery是javascript的一个框架，JQuery可以取代javascript更轻松地完成编程任务，有时可以将代码精简为一两行。
书写JQuery时应该注意一些编程规范，最主要是要使用自己的命名空间来防止和其它程序的冲突，最好将代码组织为整洁而有条理的模块。
二。 选择和过滤
顾名思义就是通过jQuery找到HTML中的具体DOM元素或元素集。只有找到相应的DOM元素并将其转换为对象才可以对其进行操作。JQuery提供了一系列的方法来选择和过滤DOM中的元素。
例一：
var tmpExample = {
ready : function(){
$(‘input#tmpDialogueOpen’).click(
function($e){
$e.preventDefault();
$(‘div#tmpDialogue’).addClass(‘tmpDialogueOn’);
}
);
$(‘input#tmpDialogueClose’).click(
function($e){
$e.preventDefault();
$(‘div#tmpDialogue’).removeClass(‘tmpDialogueOn’);
}
);
}
};
$(document).ready(tmpExample.ready);
首先创建了一个字面对象tmpExample，其中包含一个ready方法。最后用$(document).ready(tmpExample.ready);当文档加载完成后执行tmpExample对象的ready方法。这是一种写法。也可写成：
$(document).ready(
function(){
……………..
};
)
意思就是$(document)对象挂构了一个ready事件，当文档准备好后事件被触发，执行下面的回调函数function.
里面的$(‘input#tmpDialogueOpen’)即将id为tmpDialogueOpen的input元素，将其变成一个jquery对象。
‘input#tmpDialogueOpen’就是最普通的像CSS一样的选择元素或元素集的方法，然后在该对象后挂构一个click点击事件，当事件被触发就执行下面回调函数。$e为事件对象，指的是click事件本身，$e.preventDefault();是阻止click事件的默认动作发生。然后为’div#tmpDialogue’添加一个样式类名为tmpDialogueOn。
从这里我们可以看出来，jquery的格式无非就是，用$()将DOM元素变成对象，然后在对象后挂构事件，事件里面一般传递一个用于执行动作的回调函数。即： 对象.事件(动作); 哈哈，这样看来jquery也没什么呀，不像刚开始看的时候那么乱和复杂了。
选择元素或元素集，就是根用CSS一样的呀，这些可以参考下CSS教程，我了解的也不全，以后看看这方面的书吧，顺便学下CSS。
知道怎么选择DOM元素或元素集了，那么接下来学习怎么过滤DOM元素的选择集。jquery提供了很多方法用来过滤，很简单只要记住这些方法就行了，
(1) find() 在选择集中查找指定元素。
Example:
$(‘ul#tmpFavorites’).find(‘li’).addClass(‘tmpFound’); //选择ID为tmpFavorites的UL下面的所有li元素。
(2) siblings() 兄弟 查找元素的兄弟节点。
Example:
$(‘ul#tmpPlaces li.tmpExampleCity’).siblings(‘.tmpRealmOfMen’).addClass(‘tmpSiblings’); //选择id为tmpPlaces的UL下面class为tmpExampleCity的兄弟节点，在兄弟节点里找到类名为tmpRealmOfMen的兄弟元素。
(3) next() prev() nextAll() prevAll() 下一个，上一个，后面所有的， 前面所有的 （元素）
Example:
$(‘ul#tmpFavorites’).next().addClass(‘tmpFound’); //取id为tmpFavorites的ul的下一个元素
$(‘ul#tmpFavorites’).prev().addClass(‘tmpFound’); //取id为tmpFavorites的ul的上一个元素
$(‘ul#tmpFavorites’).nextAll().addClass(‘tmpFound’); //取id为tmpFavorites的ul的下面所有的元素
$(‘ul#tmpFavorites’).prevAll().addClass(‘tmpFound’); //取id为tmpFavorites的ul的上面所有的元素
(4) parents() parent() 父辈们 父亲 （元素） 查找元素的所有父辈节点。 查找元素的父亲节点。
Example:
$(‘li.tmpExampleCity’).parents(‘div#tmpPlacesWrapper’).addClass(‘tmpParent’); //查找类名为tmpExampleCity的li元素的所有父辈节点里面id为tmpPlacesWrapper的div元素。
$(‘li.tmpExampleCity’).parent().addClass(‘tmpParent’); //查找类名为tmpExampleCity的li元素的父亲节点，
(5) children() 儿子 选取一个元素的子元素。
Example:
$(‘ul’).children().addClass(‘tmpChild’); //查找ul的所有子元素。
(6) not() 反选元素
Example:
$(‘li’).not(‘li.tmpThreeStooges’).addClass(‘tmpFunny’); //查找所有LI里面类名不为tmpThreeStooges的所有元素。
(7) slice() 片段 选取元素集中的片段子集
Example:
$(‘li’).slice(0, 4).addClass(‘tmpFunny’); //查找所有li里面的第1个到第4个元素。
$(‘li’).slice(5).addClass(‘tmpFunny’); //查找所有li里面的第5个元素后面的所有元素。
(8) add() 加一个元素或元素集。 就是并集求和
Example:
$(‘ul#tmpMarx li’).add(‘ul#tmpAbbot li’).addClass(); //查找’ul#tmpMarx li’ + ‘ul#tmpAbbot li’ 的所有元素
(9) eq() 等于，就是从结果集中选择特定元素。
example:
$(‘ul li’).eq(3).addClass(‘tmpQueen’); //查找ul下面所有LI中编号为3的li，即第一4个li元素。
好了，基本的就是这些方法了，其它的具体的可以参考Jquery手册。从这又可以把上面总结的加深一点，jquery的结构就是　对象.过滤.事件(对象.过滤.操作) 还有要指当前事件就用$e（也可以自己定义）,要指当前元素对象就用$(this),嘿嘿。从这看是不是Jquery很简单了，还提供了很多简单的方法，难怪会把javascript变得更简单呢，本人思想一直就是化繁为简，怎么简单怎么搞，相信以后的程序会越来越简单呀，对于PHP我一直都是流水线似的写程序，不会方法也不会对象，学了会JQuery发现要使程序变得简单清晰还是少不了这些东西，以后要加紧学习怎么搞PHP的面象对象了。
好了，讲了选择和过滤元素和元素集，那下面就是挂构事件了。
三，事件。
对于事件，jquery不仅简化了提供了很多方法，还处理了一些跨浏览器不兼容的现象和一些限制，对于不兼容不用提了，肯定是很郁闷的一个东西了，
限制比如像传统的事件模型只能挂构一个事件，W3c事件模型可以挂构多个事件。还有this关键字在一般的事件模型中都是指当前元素对象，而在IE里面则是指window对象，因为IE不支持W3c事件模型，它用的是Microsoft JScript事件模型，对于不同的事件模型挂构事件的方法也不一样，然而Jquery在这些方面都有处理和统一。
jquery挂构事件的方法有两种，一种是bind()方法绑定事件，二种是直接使用事件方法就可以绑定，比如。click() 等， 如果是模拟执行，则直接调用事件方法就可以。
来总结下事件方法：
(1) bind() //绑定事件方法。
Example:
$(document).bind(
‘ready’,
function(){
$(‘div’).bind(
‘mouseover’,
function(){
$(this).addClass(‘tmpExampleOver’);
}
)
};
)
先是对象.bind()绑定方法，其中传入两个参数，一个是要绑定的事件，二个是事件执行的回调函数。 即：对象.bind(‘事件’，动作 )
(2) 事件方法，
1， mouseover() //当鼠标移到上面时。
Example:
$(‘div’).mouseover(
function(){ $(this).addClass(‘tmpExampleOver’); }
)
2， mouseout() //当鼠标移走时。
Example:
$(‘div’).mouseout(
function(){ $(this).addClass(‘tmpExampleOver’); }
)
3， click() //当鼠标点击时。
Example:
$(‘div’).click(
function(){ $(this).addClass(‘tmpExampleOver’); }
)
4， toggle() //当鼠标交互点击时。
Example:// 因为是交易动作，所以点一下执行第一个function再点一下执行下个 function,这样交替执行，还可以有很多个function,做为参数。
$(‘div’).toggle(
function(){ $(this).addClass(‘tmpExampleOver’); }
function(){ $(this).removeClass(‘tmpExampleOver’); }
)
5， hover() //mouseover()和mouseout()方法的交互动作，此方法和toggle()方法一样也是交互性的。
6， focus() 得到焦点时
7, blur() 失去焦点时
可以看到，这里直接用事件方法加在对象后面，而省略了bind()这步操作，这就又简化了吧。
(3) 触发事件
jquery提供了一个trigger()方法来触发事件，也可直接写事件方法不要参数来了触发事件。
Example:
$(document).ready(
function(){
$(‘input’).focus(
function(){ $(this).addClass(‘tmpFocused’); }
);
$(‘input’).blur(
function(){ $(this).removeClass(‘tmpFocused’); }
);
$(‘input’).trigger(‘focus’); //此处的trigger()即为触发事件，触发上面的focus事件，当网页加载后立即执行focus事件
这里也可以用 $(‘input’).focus(); 这种形式直接触发。
}
)
好了，事件也就是这些了，其实最简单就是一个方法挂构在一个对象上，方法里面的参数是要执行的动作。
知道了元素集对象，事件，那接下来就是事件要执行的操作了。也就是对DOM元素内容和属性的操作。
四，操纵内容和属性
这一部分也是jquery最核心的动作部分，前面所学的都是为了执行这些操作，Jquery提供了很多方法来满足我们的需要，所以内容相对比较多吧。
(1) 设置和访问属性 attr()
attr()有四种使用的方式：
1， $(this).attr(‘id’); 则是获得属性id的值，
2， $(this).attr(‘id’,'tmpExample’); 则是设置属性id的值班为tmpExample
3， $(this).attr( 通过传入一个对象字面量作为参数，设置多个属性的值。
{
id: ‘tmpExample’,
title: ‘xxxxx’,
href: ‘http://www.example.com’
}
);
4， $(this).attr( 通过传入一个回调函数来设置属性的值。
‘id’,
function()
{ return ‘tmp’ + $(this).text(); }
);
(2) 操纵类名。 addClass() hasClass() removeClass()
(3) 操纵HTML和文本内容
1, html() 设置或获取一个或多个元素的HTML内容。
$(this).html(‘sssssssssssssssssssssss<i>ggggggggg</i>’);
2, text() 设置或获取一个或多个元素的文本内容。
$(this).text(‘sssssssssssssssssssssss<i>ggggggggg</i>’);
html(”) text(”) 如果不加字符串参数，则为删除内容。
3, append() prepend() 将内容添加到当前元素的子节点之前或之后。
$(this).append(‘sssssssssssssssssssssss<i>ggggggggg</i>’); //当前元素子节点后插入引号内的内容
$(this).prepend(‘sssssssssssssssssssssss<i>ggggggggg</i>’); //当前元素子节点前插入引号内的内容
4, after() before() 将内容添加到当前元素节点的之前或之后。
$(this).after(‘sssssssssssssssssssssss<i>ggggggggg</i>’); //当前元素之后插入引号内的内容
$(this).before(‘sssssssssssssssssssssss<i>ggggggggg</i>’); //当前元素之前插入引号内的内容
5, insertAfter() insertBefore() 将一个选择集中的元素插入到另一个选择集中的元素之前或之后。
$(this).insertAfter(‘div#tmpExample’); //将当前元素的内容插入到id为tmpExample的DIV之后。
$(this).insertBefore(‘div#tmpExample’); //将当前元素的内容插入到id为tmpExample的DIV之前。
6, wrap() wrapAll() wrapInner() 将一个或多个元素包装在另外的元素中。
$(this).wrap(‘<div></div>’); //wrap()是将选择集中的元素分别包装到div中。如果有4个元素，那4个元素每个外面加上一个DIV。
$(this).wrapAll(‘<div></div>’); //将当前选择集的元素全部包装在一个DIV中。
$(this).wrapInner(‘<div></div>’); //wrapInner()如wrap()相似是分别包装，只是它是把内容分别包装到div中。
(4) 替换元素
1， replaceWith(); //用传入的内容参数替换选择元素的内容。
$(this).replaceWith(‘<p>ffffffffffffffffffffff</p>’); //用<p>ffffffffff</p>替换$(this)的内容。
2， replaceAll(); //用选择元素的内容替换传入元素的内容。
$(p).replaceAll(this); //用P元素中的内容替换this当前元素中的内容。
(5) 移除内容 empty() remove()
(6) 克隆内容
clone() 克隆复制内容的元素以及其所有子节点， 如果传入参数clone(true)还可以克隆其中的事件处理函数。
OK，常用的操作方法也就这些，在实际应用中多加使用就会熟练了。接下来该干什么呢，恩，玩了一天，接着来，发现总不想学习，很郁闷。。。。。。
五，数组和迗代
看这节的名字都有点害怕，感觉很难的样子。怎么办？那就让我们来化繁为简吧，
这节肯定是讲数组的，还有遍历数组这些东西的，以前要遍历都是用的FOR循环，比较麻烦，现在JQuery用于遍历数组的方法是：
(1) each() 数组和选择集的遍历
1， 怎么用：两种方式，1， $(数组).each(操作); 2， $.each(数组，操作);
Example:
$(document).ready(
function(){
var $items = ['john','paul','george','ringo'];
$($items).each( //这里是第一种形式，
function(){
$(‘ul’).append(“<li>” + this + “</li>”); //每一次循环去的数组中的当前值都可以用this代替
}
);
}
)
Example:
$(document).ready(
function(){
var $items = ['john','paul','george','ringo'];
$.each(
['john','paul','george','ringo'], 这里是第二种形式，直接将数组做为一个参数。
function(){
$(‘ul’).append(“<li>” + this + “</li>”); //每一次循环去的数组中的当前值都可以用this代替
}
);
}
)
现在遍历数组是不是也很简单了。
2， 变量作用域
这里提到了一个变量作用域，在js中变量作用域是：如果一个变量在函数，对象，闭包外定义，它就是个全局变量，
如果在函数内定义，前面加上var就是局部变量，前不不加var就是全局变量。
3， 还有for循环里有break跳出循环，continue跳出当前轮循环，在each里怎么写呢，
return(false); 等价于 break;
return(true); 等价于 continue;
4， each()方法不仅可以遍历数组，也同样可以遍历元素集，同上面一样，其中this为遍历的当前元素，对元素进行操作就$(this)将元素变成对象就可以了。
上面讲的都是each()方法，下面还有很多方法，
(2) filter() grep() 对选择择集进行过滤 对数组进行过滤
filter() 对选择择集进行过滤—对选择集中的每个元素执行一次过滤
$(‘li’).filter(‘.xxx’); //直接过滤
$(‘li’).filter( function(){ return $(this).hasClass(‘xxx’) } ); //通过回调函数过滤
grep() 对数组进行过滤 它只能使用$.grep这种形式，而不能用$($array).grep()这种是无效的。
$array1 = $.grep(
$arr,
function($value, $key){
return( $value.indexOF(‘you’) != -1 ); //这里返回的是true就将元素保留在数组中，返回false就将元素移除。
}
)
(3) 映射选择集或数组 map()
映射：对于一个集合中的值，修改其中一个或多个值，从而创建一个新的集合。在映射过程中不会移除集合中的任何元素。
对象.map(动作);
上面不管是遍历，过滤还是映射都是属于循环处理，下面来看一些处理数组的实用方法。
$makeArray(data) 将任何数据转换为一个真正的数组。
$.inArray(needle,haystack) 在haystack数组中查找指定元素needle，返回第一次匹配时元素在数组中的索引。
$.merge(first,second) 将second数组合交到first数组中。
$.unique(array) 从数组中移除重复的值。
get() 将一个选择集转换成一个新数组。
concat() 将两个数组连接为一个新数组。
ok,这部分就这些了，其实也不难吧。呵呵。。。。。。。。。。。。。。。。。。。。。。。。。
六 css
(1) css() 用来访问和设置css样式，像传统js里面的style一样。
作用：返回选择集中第一个匹配元素的一个属性值。
为一个或多个元素设置一个或多个属性值。
$(‘div’).css(‘backgroundColor’);
$(‘div’).css(‘backgroundColor’,'red’);
$(‘div’).css(
{
backgroundColor:’red’,
border:’1px solid red’,
padding:’5px’
}
);
(2) outerWidth() outerHeight() 获得一个元素的宽和高，宽和高包括border和padding的宽度。
$(‘div’).outerWidth(); //获得div的宽
$(‘div’).outerWidth({margin:true}); //获得div包括margin的宽。 google浏览器不支持outerWidth()方法
七， ajax
这一节相信对于后台程序员都是很重要的一节，现在使用无刷新与服务器交互在实际应用中也是越来越多，因为它将页面程序变得更像桌面应用程序一样。jquery将原本很复杂的ajax变得更加简洁，对实际工作很有帮助。
1， 首先我们要像服务器发送数据请求，在HTTP协议下，有两种方法即， GET POST。
区别：GET方法是通过url传递数据的，用户可见，长度受url长度限制，但效率要高。POST是通过数据包发送，要比GET容量大，用户不可见。如果用于获得数据用GET就好，用于修改数据等用POST比较好。
2， 其次是我们在请求中传递数据的格式，ajax传递数据的格式主要有 XML,JSON,HTML这三种，当然还有其它的格式。
3， 然后是我们ajax的具体写法，像很多方法一样，jQuery提供了三种方法，$.get() $.post() load()
$.方法( ‘请求的页面链接’ ， 发送的数据， 处理响应回调函数，传递的数据格式 );
Example:
$.get( //可以是$.get,$.post,$.getJSON()最后一个方法跟get方法一样，就是可以省略最后一个参数。直接传JSON格式的
‘Example.php’, //url
{xxxxx:’yyyyy’}, //发送的数据，用对象字面量表式，不发送数据可以省略。
function($xml){ }, //服务器响应并返回数据后的回调函数，对数据进行处理。
‘xml’ //返回的数据格式，可以是xml,json,html。。等等
);
load()方法可以简单的在元素上返回html片段，可以省略后面的所有参数(也可不省略)，只要一个请求的URL即可。
$(‘div’).load(‘Example.php’);
另外处理xml数据的时候可以像处理DOM元素一样， $($xml).find(‘sss’).text()这样去处理。 处理json格式的时候，可以用$json.title用点连接即可。
四，serialize()
JQuery还提供了一个方法serialize()用于从各个输入元素找到正确的名称和值，并将其格式化为查询字符串。即获得所有表单中的数据。
$(‘form:input’).serialize() 用它来获得表单的值做为发送的数据，也就是第二个参数。
好，主要要学习的是这些内容了，其它的还有效果什么的，不用说了，可以自己了解一下，还有插件，jqueryUI库，提供了很多强大的功能效果，都可以去了解一下，以上仅为本人学习所用。不全的地方以后也可以慢慢增加。到此贫道也算是功德圆满，目前阶段JQUERY筑基期。

本文出自 “为明天做好准备” 博客，请务必保留此出处http://zaikuip.blog.51cto.com/4128335/1300140