Archive for the ‘jQuery’ Category
星期六, 4月 12th, 2008 195 次访问
本记记录78-87点
78.$.post(url, params, callback) 用post的方式下载一个页面返回XMLHttpRequest
url: 请求的页面
params:表示请求的要发送的参数.
callback: 请求结束后,调用的方法
eg:$.post("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
79. ajaxStart(callback) 当ajax请求发送前,将触发callback.
eg;
$("#loading").ajaxStart(function(){
$(this).show();
});
80. ajaxSend(callback)当ajax请求发送时触发callback,参数是XMLHttpRequest和settings请求设置
eg:
$("#msg").ajaxSend(function(request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
Posted in jQuery, 技术 | 7 Comments »
星期四, 4月 10th, 2008 457 次访问
下面主要介绍jQuery的ajax的调用方法. 以下翻译自: jQuery (71-77点)
71.$.ajax(params)这个方法是jQuery中调用ajax的最基本方法,功能十分强大.参数是一个对象.所有的参数用key:value的形式设置
下面主要介绍一下各种参数:
(string)url: 要请求的网址,可以把参数get参数设置到url上面
(string)type: 请求的类型,可以是Post与get,默认情况下是GET
(string)dataType: 你所期望返回的数据格式,可以是xml,html,script,json.最终返回类型还是服务器决定.
(Boolean)ifModified:只当返回值改变的时候才会成功返回正确值.主要判断依据是请求头的Last-Modified.默认情况下,这个值设置为false
(Number)timeout:设置请求时间,这个时间会替换全局的时间($.ajaxTimeout)
(Boolean)global:是否触发全局的ajax事件句柄.例如ajaxStart,ajaxStop.默认情况是true
(Function)error: 请求错误处理的函数.
(Function)success: 请求成功处理的函数.
(Function)complete:请求完成处理的函数.
(Object|string)data:发送到服务器端的数据.如果不是字符串,则被转化成字符串,被加到url上面,做为查询字符串.如果不想用默认的方式处理,可以设置processData状态.
(Boolean)processData.默认情况是true,把object转化成string,做查询字符串.可以设置为false,则以DOMDocments发送.
(String)contentType.默认是"application/x-www-form-urlencoded",一般情况不用修改.
(Boolean)async .默认值为true.表示异步请求,如果想改成同步.只要把设为false就可以了.
(Function)beforeSend.用于对在发送请求之前,对请求头的设置.有XMLHttpRequest做为参数
例子:
取一个js文件.
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
})
post数据到服务器端,并且成功时提示用户.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
同步请求数据
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
传送domdocument,data将不会被强行转化.
var ...
Posted in jQuery, 技术 | 2 Comments »
星期三, 4月 9th, 2008 251 次访问
本记主要关于如何用jQuery处理特效 （70-76）
71. animate(params, speed, easing, callback)动画特效.
params:是动画的设置,用来表示动画的展现以及结束,
speed:动画的速率可以是("slow", "normal", or "fast")也可以是毫秒数.eg: 1000
easing:默认是'linear',如想用其它参数,就要添加jQuery的特效插件.
callback: 当动画完成时的调用的函数.
eg:
1. $("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
2. $("p").animate({ left: 50, opacity: 'show' }, 500);
3. $("p").animate({ opacity: 'show'}, "slow", "easein");
72. fadeIn(speed, callback),fadeOut(speed, callback),fadeTo(speed, opacity, callback)
淡入,淡出效果,speed表示速度,可以用"slow,normal,fast"代替,也可以直接写毫秒数. callback表示淡入,淡出后的调用的函数.fadeTo表示淡入到某个透明度。opacity (Number):取值范围就0-1
eg:
$("p").fadeTo("slow", 0.5, function(){
alert("Animation Done.");
});
73. hide(),hide(speed, callback).前者是把element隐藏用的是display:none的样式。后
者是把element的长，宽，以及透明度都改变。callback表示动画完成后调用的函数。speed表示速度
eg: 1. <p>Hello</p>
$("p").hide()==>[ ...
Posted in jQuery, 技术 | No Comments »
星期一, 4月 7th, 2008 303 次访问
本篇主要记录jQuery事件响应的处理
50. bind(type, data, fn)对所有选定的element判断事件,type是事件类型,data是参数,fn是事处理方法.
eg:1. $("p").bind("click", function(){ alert( $(this).text() ); });
2. function handler(event) { alert(event.data.foo); }
$("p").bind("click", {foo: "bar"}, handler)==>alert("bar")
51. blur() 触发blur方法,blur(fn)设置blur函数
eg: <p>Hello</p>
$("p").blur( function() { alert("Hello"); } );==>
<p onblur="alert('Hello');">Hello</p>
52. change(fn)设置onchange事件的方法
eg:<p>Hello</p>
$("p").change( function() { alert("Hello"); } );==><p onchange="alert('Hello');">Hello</p>
53 click()触发onclick事件, click(fn)设置onclick方法
Posted in jQuery, 技术 | No Comments »
星期日, 4月 6th, 2008 233 次访问
下部主要记录的是CSS的控制命令
40 1/. CSS(name)读取样式属性值
eg:<p style="color:red;">Test Paragraph.</p>
$("p").css("color")==>"red";
2/css(properties)设置style
eg:<p>Test Paragraph.</p>
$("p").css({ color: "red", background: "blue" })==>
<p style="color:red; background:blue;">Test Paragraph.</p>;
3/css(key, value)设置单个样式属性,如果设置的值是数字的话,会被自动转化为像素单位
eg : <p>Test Paragraph.</p>
$("p").css("color","red")==><p style="color:red;">Test Paragraph.</p>;
$("p").css("left",30)==><p style="left:30px;">Test Paragraph.</p>;
41 1/height()取得当前匹配节点数组中的第一个节点的高的值
eg: <p>This is just a test.</p>
$("p").height() ==>300;
2/ height(val) 设置所有匹配的节点的高,如果val的单位不是ex ,%,那么单位自动设为px
eg: <p>This is just a test.</p>
$("p").height(20)==><p style="height:20px;">This is just a test.</p>;
42 width() 设置宽度,width(val)设置高度.用法与height一样
以上是基本的CSS的js用法,下面主要记录jQuery的一些功能函数
Posted in jQuery, 技术 | No Comments »
星期六, 4月 5th, 2008 175 次访问
本讲: 29--39点(与dom相关)
29 add(params) 在$所取到的节点数组中添加新的节点．
参数可以是expr, html,element
eg: 1.<p>Hello</p><span>Hello Again</span>
$("p").add("span")==>[ <p>Hello</p>, <span>Hello Again</span> ]
2.<p>Hello</p>
$("p").add("<span>Again</span>")==>
[ <p>Hello</p>, <span>Again</span> ]
3. <p>Hello</p><p><span id="a">Hello Again</span></p>
$("p").add( document.getElementById("a") )===>
[ <p>Hello</p>, <span id="a">Hello Again</span> ]
30 children(expr)取得子节点,当expr为空时，取得所有的子节点
eg<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
$("div").children()==>[><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p> ]
$("div").children(".selected")==>
[ <p class="selected">Hello Again</p> ]
31 contains(str)找出字节点中包含有str的节点．str起到过滤做用
eg: <p>This is just a test.</p><p>So is this</p>
$("p").contains("test")==>[ <p>This is just a test.</p> ...
Posted in jQuery, 技术 | 1 Comment »