Jquery Dom操作

write less,do more.

测试的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)：one()函数的作用和参数的作用和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)：在每一个匹配的元素上触发某类事件。这个函数也会导致浏览器同名的默认行为的执行。比如，用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false，也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。

$("form:first").trigger("submit")          提交第一个表单，但不用sumbit

下面的代码可以显示一个"Hello World"

$("p").bind("MyEvent",functiion(event,message1,message2) {

    alert(message1+‘ ’+message2);  })

$("p").trigger("MyEvent",["Hello","World!"]);

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!’);            //   第一次点击的时候显示“Click Me odd!”，第二次点击的时候显示“Click Me even!”
    },
    function ()
    {
        alert(’Click Me even!’);
    }
);
  $("p").toggle();          //   切换元素的可见状态
</script>
事件：
blur()：触发匹配对象的onblur（失去焦点）的事件。
blur(fn） ：为每一个匹配的blur事件绑定事件处理函数

// 任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数

$("p").blur(function() {       alert('弹出框！') ;  }           );

change()：触发匹配的对象value被修改时change事件，该事件会在焦点离开时触发
change(fn)：为匹配的对象加载value被修改时onchange触发的函数。
<script>
$(”#input_button”).click(function(){
    $(”#input_button”).change();
})
$(”#input_button”).change(function(){                  // 为每一个匹配的button绑定onChange事件处理函数
    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>
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>

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>
focus()：触发匹配的对象的onselect（文本被选择）事件。
select(fn)：为匹配的对象加载onselect事件时触发的函数。
<script>
$(’#input_button’).select(function(){
    alert(’Your Selected Me!’);
})
$(’#input_button’).select();
//在页面载入的时候，会显示“Your Selected Me!”
</script>
submit()：触发匹配的对象的onsubmit（表单提交）事件。
select(fn)：为匹配的对象加载onsubmit事件时触发的函数。
<script>
$(’#input_button’).select(function(){
    alert(’Your Submit Form!’);
})
$(’#input_button’).select();
//在页面载入的时候，会显示“Your Submit Form!”
</script>