第四章 jQuery中的事件和动画
加载DOM
$(window).load(function(){
//处理函数绑定给window对象 所有内容加载完毕后触发
//如果绑定在元素上，元素内容加载完毕后触发
})
事件绑定
bin( type [,data] ,fn); //简写像click mouseover mouseout这类事件
合成事件
hover(enter,leave); //模拟光标悬停事件 光标移动到元素上触发enter 移除元素触发leave
toggle(fn1,fn2,...fnN); //模拟鼠标连续点击 第一次触发函数fn1 依次触发fn2
事件冒泡
$("element").bind("click" ,function(event){ //event事件对象
event.stopPropagation(); //停止事件冒泡
event.preventDefault(); //阻止默认行为
return false; //也可用return false
})
事件对象的属性
event.type() //获取事件类型
event.preventDefault() //阻止默认行为
event.stopPropagation() //停止事件冒泡
event.target() //获取触发事件的元素
event.relatedTarget() //
event.pageX() //获取光标相对于页面的x和y坐标
event.pageY()
event.which() //鼠标单击事件获取鼠标的左 中 右键 在键盘事件中获取键盘按键
event.metaKey() //获取ctrl按键
event.originalEvent() //指向原始的事件对象
移除事件
unbind([type][, data]) //第一个参数是事件类型 第二个参数是要移除的函数
$("div").unbind("click");
模拟操作
trigger()
$("#btn").trigger("click") //简化$("#btn").click()
jQuery中的动画
show() //slow normal fast 1000毫秒=1秒
hide()
fadeIn() //改变元素的透明度
fadeOut()
slideUp() //改变原始的高度
slideDown()
自定义动画
animate(params ,speed ,callback);
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px" ,height:"500px"} ,3000); //使元素在3秒内 向右移动500像素
})
})
stop() //停止动画
:animate //获取动画元素
其他动画方法
toggle(speed,[callback]) //显示隐藏
slideToggle(speed,[callback])
fadeTo(speed,opacity,[callback])
第5章 jquery对表单 表格的操作及更多应用
表单应用
focus() //获得焦点
blur() //失去焦点
keyup() //松开键盘时触发
find() //查找元素
attr() //元素属性
$(function(){
$(":input").focus(function(){
$(this).addClass("fucos");
}).blur(function(){
$(this).removeClass("fucos");
});
})
复选框应用
<form>
<label><input type="checkbox" name="items" value="足球" />足球</label>
<label><input type="checkbox" name="items" value="篮球" />篮球</label>
<label><input type="checkbox" name="items" value="羽毛球" />羽毛球</label>
<label><input type="checkbox" name="items" value="冰球" />冰球</label>
<br />
<label><input type="checkbox" name="CheckedALL" id="CheckedALL" value="" />全选/全不选</label>
<input type="button" id="CheckedREV" value="反选" />
<input type="button" id="Send" value="提交" />
</form>
<script>
$(function(){
$("#CheckedALL").click(function(){
if(this.checked){
$("[name=items]:checkbox").attr('checked' ,true);
} else {
$("[name=items]:checkbox").attr('checked' ,false);
}
});
//反选
$("#CheckedREV").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked = !this.checked;
})
});
//提交
$("#Send").click(function(){
var str = "";
$("[name=items]:checkbox:checked").each(function(){
str += $(this).val() + "\n";
})
alert(str);
});
})
</script>
下拉框
<form>
<select multiple="multiple" id="s1" name="select" style="height:200px; 100px;">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
<option value="6">option6</option>
<option value="7">option7</option>
<option value="8">option8</option>
<option value="9">option9</option>
</select>
<input type="button" id="toRight" value=">>" />
<input type="button" id="toRightALL" value="ALL>>" />
<select multiple="multiple" id="s2" name="select" style="height:200px; 100px;">
</select>
<input type="button" id="toLeft" value="<<" />
<input type="button" id="toLeftALL" value="<<ALL" />
</form>
<script>
$(function(){
$("#toRight").click(function(){
var $option = $("#s1 option:selected");
$option.appendTo("#s2");
});
$("#toRightALL").click(function(){
var $option = $("#s1 option");
$option.appendTo("#s2");
});
$("#s1").dblclick(function(){
var $option = $("option:selected" ,this);
$option.appendTo("#s2");
});
$("#toLeft").click(function(){
var $option = $("#s2 option:selected");
$option.appendTo("#s1");
});
$("#toLeftALL").click(function(){
var $option = $("#s2 option");
$option.appendTo("#s1");
});
$("#s2").dblclick(function(){
var $option = $("option:selected" ,this);
$option.appendTo("#s1");
});
})
</script>