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