Archive for December, 2007

Jquery事件(Events)介绍

Sunday, December 30th, 2007

测试的HTML代码:

<input type="button" value="Click Me" id="input_button" />

页面载入:

ready(fn):在HTML完全载入以后执行的函数,相当于JS中加载在标签上面的onload事件,如果已经在标签有了onload事件,则此函数不会运行。

<script>
$
(document).ready(function(){
    
alert('Page Ready!'); // 显示Page Ready!
});
<
/script>

事件处理:

bind(type, data, fn):bind()函数对所有匹配的对象绑定事件。bind()有三个参数,第一个参数是事件名,第二个参数可选,表示event.data的值,第三个参数表示处理该事件的函数。

<script>
$
('#input_button').bind('click', 'any_data', function(e){
    
alert(e.data); // 显示 any_data
    
alert(e.pageX); // 显示鼠标点击按钮是页面X坐标的值
})
<
/script>

one(type, data, fn):onc()函数的作用和参数的作用和bind()函数相同,但是onc()只执行一次事件。

<script>
$
('#input_button').one('click', function(e){
    
alert('You Just Can Click Me Once!');
})
//点击按钮以后显示You Just Can Click Me Once!
<
/script>

trigger(type, data):触发匹配元素上的某一类事件。第一个参数表示需要触发的事件类型,第二个参数的使用在1.2.2b2上面没有测试成功,同样triggerHandler()函数的功能也没有测试成功,所以暂时不介绍。

<script>
$
('#input_button').bind('click', function(){
    
alert('Who Clicked Me!');
})
$
('#input_button').trigger('click');
//不用点击按钮,就会显示Who Clicked Me!
<
/script>

unbind(type, data):取消对一个事件的绑定。两个参数都是可选的,第一个参数表示取消绑定事件的类型,缺省情况下会取消所有的事件,第二个参数的使用没有测试成功。

<script>
$
('#input_button').bind('click', function(){
    
alert('Who Will Click Me!');
})
$
('#input_button').unbind('click');
// 没有任何事件会发生
<
/script>

交替执行:

hover(over, out):模拟一个hover,后面两个参数作为onmouseover和onmouseout事件的时候分别运行的函数。

<script>
$
("#input_button").hover(
    
function ()
    
{
        
alert('I am In!');
    
},
    
function ()
    
{
        
alert('I am Out!');
    
}
);
//鼠标放上去的时候显示“I am In!” 鼠标移出的时候显示“I am Out!”
<
/script>

toggle(fn, fn):在一个对象上面绑定两个交替运行的click事件,后面的两个参数分别是两次事件所运行的函数。

<script>
$
("#input_button").toggle(
    
function ()
    
{
        
alert('Click Me odd!');
    
},
    
function ()
    
{
        
alert('Click Me even!');
    
}
);
//第一次点击的时候显示“Click Me odd!”,第二次点击的时候显示“Click Me even!”。
<
/script>

事件:

blur():触发匹配对象的onblur(失去焦点)的事件。
blur(fn):为匹配的对象加载onblur事件所触发的函数。

<script>
$
("#input_button").click(function(){
    
this.blur();
})
$
("#input_button").blur(function(){
    
alert('You Blur Me!')
})
//点击按钮以后,会立即失去焦点,并触发失去焦点的函数。
<
/script>

change():触发匹配的对象value被修改时的onchange事件。
change(fn):为匹配的对象加载value被修改时onchange触发的函数。

<script>
$
("#input_button").click(function(){
    $
("#input_button").change();
})
$
("#input_button").change(function(){
    
alert('You Change Me?')
})
//点击按钮以后,显示You Change Me?
<
/script>

click():触发匹配的对象的onclick(单击)事件。
click(fn):为匹配的对象加载onclick事件时触发的函数。

<script>
$
("#input_button").click(function(){
    
alert('Who Clicked Me?')
})
$
("#input_button").click();
//在页面载入的时候,会显示“Who Clicked Me?”
<
/script>

dblclick():触发匹配的对象的ondbclick(双击)事件。
dblclick(fn):为匹配的对象加载ondbclick事件时触发的函数。

<script>
$
("#input_button").dblclick(function(){
    
alert('Who Double Clicked Me?')
})
$
("#input_button").dblclick();
//在页面载入的时候,会显示“Who Double Clicked Me?”
<
/script>

error():触发匹配的对象的onerror(错误)事件。
error(fn):为匹配的对象加载onerror事件时触发的函数。

<script>
$
("#input_button").error(function(){
    
alert('Am I Error?')
})
$
("#input_button").error();
//在页面载入的时候,会显示“Am I Error?”
<
/script>

focus():触发匹配的对象的onfocus(获取焦点)事件。
focus(fn):为匹配的对象加载onfocus事件时触发的函数。

<script>
$
("#input_button").focus(function(){
    
alert('You Focus Me!');
    
alert(error); // 制造一个错误,不然会死循环
})
$
("#input_button").focus();
//在页面载入的时候,会显示“You Focus Me!”
<
/script>

keydown():触发匹配的对象的onkeydown(键按下)事件。
keydown(fn):为匹配的对象加载onkeydown事件时触发的函数。

<script>
$
("#input_button").keydown(function(){
    
alert('You Keydown?');
})
$
("#input_button").keydown();
//在页面载入的时候,会显示“You Keydown?”
<
/script>

keypress():触发匹配的对象的onkeypress(按键)事件。
keypress(fn):为匹配的对象加载onkeypress事件时触发的函数。

<script>
$
("#input_button").keypress(function(){
    
alert('You keypressed?');
})
$
("#input_button").keypress();
//在页面载入的时候,会显示“You keypressed?”
<
/script>

keyup():触发匹配的对象的onkeyup(按键)事件。
keyup(fn):为匹配的对象加载onkeyup事件时触发的函数。

<script>
$
("#input_button").keyup(function(){
    
alert('You keyup?');
})
$
("#input_button").keyup();
//在页面载入的时候,会显示“You keyup?”
<
/script>

load(fn):为匹配的对象加载onload(frame,windows,image载入)事件时触发的函数。

<script>
$
(window).load(function(){
    
alert('page load over!');
})
//在页面载入的时候,会显示“page load over!”
<
/script>

mousedown(fn):为匹配的对象加载onmousedown(鼠标键按下)事件时触发的函数。

<script>
$
('#input_button').mousedown(function(){
    
alert('Your Mouse Down!');
})
//鼠标在按钮上按下的时候显示“Your Mouse Down!”
<
/script>

mousemove(fn):为匹配的对象加载onmousemove(鼠标在对象上面移动)事件时触发的函数。

<script>
$
('#input_button').mousemove(function(){
    
alert('Your Mouse Move!');
})
//鼠标在按钮上移动的时候显示“Your Mouse Move!”
<
/script>

mouseout(fn):为匹配的对象加载onmouseout(鼠标在对象上面移动)事件时触发的函数。

<script>
$
('#input_button').mouseout(function(){
    
alert('Your Mouse Out!');
})
//鼠标移出按钮的时候显示“Your Mouse Out!”
<
/script>

mouseover(fn):为匹配的对象加载onmouseover(鼠标移入)事件时触发的函数。

<script>
$
('#input_button').mouseover(function(){
    
alert('Your Mouse Over!');
})
//鼠标移入按钮的时候显示“Your Mouse Over!”
<
/script>

mouseup(fn):为匹配的对象加载onmouseup(鼠标键弹起)事件时触发的函数。

<script>
$
('#input_button').mouseup(function(){
    
alert('Your Mouse Up!');
})
//鼠标在按钮上弹起的时候显示“Your Mouse Up!!”
<
/script>

resize(fn):为匹配的对象加载onresize(对象大小调整)事件时触发的函数。

<script>
$
('#input_button').resize(function(){
    
alert('Your Resize Me!');
})
$
('#input_button').resize();
//在页面载入的时候,会显示“Your Resize Me!”
<
/script>

scroll(fn):为匹配的对象加载onscroll(滚动条拖动)事件时触发的函数。

<script>
$
('#input_button').scroll(function(){
    
alert('Your Scroll Me!');
})
$
('#input_button').scroll();
//在页面载入的时候,会显示“Your Scroll Me!”
<
/script>

select():触发匹配的对象的onselect(文本被选择)事件。
select(fn):为匹配的对象加载onselect事件时触发的函数。

<script>
$
('#input_button').select(function(){
    
alert('Your Selected Me!');
})
$
('#input_button').select();
//在页面载入的时候,会显示“Your Selected Me!”
<
/script>

submit():触发匹配的对象的onsubmit(表单提交)事件。
submit(fn):为匹配的对象加载onsubmit事件时触发的函数。

<script>
$
('#input_button').submit(function(){
    
alert('Your Submit Form!');
})
$
('#input_button').submit();
//在页面载入的时候,会显示“Your Submit Form!”
<
/script>

unload(fn):为匹配的对象加载onunload(页面关闭)事件时触发的函数。

<script>
$
('#input_button').unload(function(){
    
alert('Your Closed Page!');
})
$
('#input_button').unload();
//在页面载入的时候,会显示“Your Closed Page!”
<
/script>

Jquery DOM操作(Manipulation)介绍

Sunday, December 30th, 2007

PHP5中的类(class)

Friday, December 28th, 2007

麦子:我奋斗了18年才和你坐在一起喝咖啡

Thursday, December 27th, 2007

孙振耀谈人生 — 关于工作与生活

Thursday, December 27th, 2007