jQuery学习总结

1：jQuery是什么

jQuery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库，兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种 应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插 入一堆js来调用命令了，只需定义id即可。

2：jQuery选择器

jQuery最强大的方面之一就是它能够简化DOM遍历任务。一般来说，可以通过html文档中的元素的标签名，id属性，class属性来获取该元素。举例如下：

标签名：$(‘p’)会取得文档中所有的段落。

Id：$(‘#some-id’)会取得文档中具有对应id为some-id的一个元素。这里使用的是“#”号。

Class：$(‘.some-class’) 会取得文档中带有some-class类的所有元素。这里使用的是“.”符合

由于通过选择器获取的元素可能不止一个，因此，一个jQuery对象实际上可以说是一个集合，集合中包含多个被获取到的元素。

有时，我们可能需要通过元素的属性对元素进行选择。在jQuery中，在涉及属性选择符时，jquery使用了XPath中的惯例来标识属性，即将属性前 置一个@符号并放在一个方括号中。例如，要选择所有带title属性的链接，可以使用下面的代码：$(‘a[@title]’)。属性选择符允许以类似正 则表达式的语法来标识字符的开始(^)和结尾($)，也可以使用(*)来表示字符串中的任意位置。例如，要取得所有电子邮件链接，需要构造一个选择符，用 来寻找所有href属性([]@href)且以mailto开头(^=”mailto”)的锚元素。结果如下所示：

$(‘a[@href^=”mailto”]’);

3：jQuery事件有哪些

bind():为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。例如：当每个段落被点击的时候，弹出其文本，

$("p").bind("click", function(){

alert( $(this).text() );

});

unbind():bind()的反向操作，从每一个匹配的元素中删除绑定的事件。例如：将段落的click事件取消绑定，

$("p").unbind( "click" );

而实际上，我们经常不这么写，因为jQuery本身已经提供了很多常用的事件的函数供我们调用，例如：将页面内所有段落点击后隐藏，

$("p").click( function () { $(this).hide(); });

另外，在不前置@符的情况下，可以用来指定包含在另一个元素中的属性。例如取到包含一个ol元素的所有div元素，代码：$(‘div[ol]’)。

在jQuery中，当触发任何事件处理程序时，关键字this引用的都是携带相关行为的DOM元素。通过在事件处理程序中使用$(this)，可以为相应的元素创建一个jQuery对象。例如如下用法：

$("p").click( function () { $(this).addClass(‘selected’); });

4：jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：

$("#msg").html();
$("#msg")[0].innerHTML;

5：ajax

asynchronous javascript and xml:异步的javascript和xml。

ajax是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象 (XMLHttpRequest)异步(即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面，只是部分的数据，一般使用文本或者xml返回)来部分更新当前页面。使用ajax技术之后，页面无刷新，并且不打断用户

的操作。

ajax的优点

(1).页面无刷新

(2).不打断用户的操作，用户的体验好。

(3).按需获取数据，浏览器与服务器之间数据的传输量减少。

(4).是一个标准技术，不需要下载任何的插件。

(5).可以利用客户端(浏览器)的计算能力。

请求方式

get和post请求

ajax的缓存问题：

当使用IE浏览器时，如果使用get方式发请求，浏览器会先缓存之前

访问的数据，如果访问的地址不变，不会向服务器发请求。

解决方式1:使用post方式发请求。

解决方式2: 在请求地址后面添加一个随机数。

发送同步请求：

xhr.open('post','check_username.do',false);

function check_username(){

var xhr = getXhr();xhr.open('post','show.do',true);

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

xhr.onreadystatechange=function(){

if(xhr.readState == 4){

var txt = xhr.responseText;alert(txt);

$('username_msg').innerHTML=txt;

}

};

xhr.send('username=' + $F('username'));