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'));