jquery

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即可。

选择器

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”]’);

事件

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’); });

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

posted on 2015-06-23 23:00  紫夜、秋晨  阅读(99)  评论(0编辑  收藏  举报