星期六, 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月 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 176 次访问
本讲: 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 »
星期五, 4月 4th, 2008 103 次访问
本记：从21-->28点
21 prepend(content) 添加到element里面的前部．与append的方位不一样
<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>")==><p><b>Hello</b>I would like to say: </p>;
22 prependTo(content) 与prepend的添加对像相反．
<p>I would like to say: </p><div id="foo"><b>Hello</b></div>
$("p").prependTo("#foo") ==>
<div id="foo"><p>I would like to say: </p><b>Hello</b></div>;
23 clone(deep) 克隆一个新的element．参数deep为flase里不包括子element
<b>Hello</b><p>, how are you?</p>
$("b").clone().prependTo("p")==><b>Hello</b><p><b>Hello</b>, how are you?</p>
24.empty() 删除所有的内部节点
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
$("p").empty()==>[ <p></p> ]
Posted in jQuery, 技术 | No Comments »