jQuery 学习笔记二

第四章 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; width: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; width: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>