飞比寻常 (JOE) 生，简单，活，简单，生活，不简单！
JOE个人网站
JOE个人网站，不仅仅是一个网站，更像是一个展现自我的平台，致力于让朋友们都可以
有所感触，有所收获。
1、添加bind事件
$('div:eq(1)').bind('click',{n1:'abc',n2:'def'},function(e){
var name=e.data.n2;
alert('Hello'+name);
});
----------------------------------------------------
$('div:eq(1)').bind('click',['aaa','bbb'],function(e){
var name=e.data[1];
alert('Hello'+name);
});
-----------------------------------------------------
绑定多事件
$('div').bind('click',['aaa','bbb'],function(e){
var name=e.data[1];
alert('Hello'+name);
}).bind('mouseover',function(){
alert('鼠标移动上去');
});
-----------------------------------------------------
2、解除绑定事件
$('div:eq(1)').unbind('click');
解除多事件
$('div:eq(1)').unbind('click').unbind('mouseover');
$('div:eq(1)').unbind('click mouseover');
3、事件只触发一次 one
$('div').one('click',function(){
alert('点击了');
}).one('mouseover',function(){
alert('移上了');
});
4、事件一直存活 live 之后再添加子节点也有这个事件效果
$('p').live('click',function(){
alert(1);
});
$('div').append('<p>ppppppppppppp</p>');
5、unload
google 浏览器不支持，所以不建议大家使用
#jQuery的事件对象 event
1、获取鼠标坐标
event.pageX //X轴坐标
event.pageY //Y轴坐标
-------------------------------------------
<script type="text/javascript" charset="utf-8">
$(function(){
var $box=$("<div ><img src='./a.jpg' /></div>");
$('img').mouseover(function(e){
$('body').append($box);
$box.css({
'position':'absolute',
'top':e.pageY+20+'px',
'left':e.pageX+20+'px'
});
}).mousemove(function(e){
$box.css({
'top':e.pageY+20+'px',
'left':e.pageX+20+'px'
});
}).mouseout(function(){
$box.remove();
});
});
</script>
</head>
<body>
<img src="./a.jpg" width=100 height=100 />
</body>
---------------------------------------------------
2、获取键盘ASCII码
event.which
-------------------------------
$(function(){
$(window).keyup(function(e){
alert(e.which);
});
});
-----------------------------------
3、阻止冒泡
e.stopPropagation();
--------------------------------------
$('body').click(function(){
alert('body');
});
$('div').click(function(e){
e.stopPropagation();//阻止冒泡
alert('div');
});
----------------------------------------
4、阻止默认效果
e.preventDefault();
#事件切换
hover 鼠标移动上去切换事件，移上执行函数1，移出执行函数2；
------------------------------------------
$('div').hover(function(){
alert(1);
},function(){
alert(2);
});
------------------------------------------------
toggle 点击切换事件
-------------------------------------------------
$(function(){
$('button').toggle(function(){
$('img').show(1000);
},function(){
$('img').hide(1000);
});
});
------------------------------------------------
$jQuery 动画
1、show 显示
fast 0.2
normal 0.4
slow 0.6
-----------------------------------------------
$('button').click(function(){
$('img').show(3000);
});
---------------------------------------------
2、hide 隐藏 参数和show是一样
-----------------------------------------------
$('button').toggle(function(){
$('img').show(1000);
},function(){
$('img').hide(1000);
});
-----------------------------------------------
3、slideDown() 下拉显示
slideUp() 上拉隐藏
-----------------------------------------------
$('button').toggle(function(){
$('img').slideDown(1000);
},function(){
$('img').slideUp(1000);
})；
------------------------------------------------
4、animate 动画
------------------------------------------
$(function(){
$(document).click(function(e){
$('div').animate({
'left':e.pageX-25+'px',
'top':e.pageY-25+'px'
},1000);
});
});
<div style="width:50px;height:50px;border:1px solid gray;position:absolute;"></div>
--------------------------------------------
5、fadeIn,fadeOut
--------------------------------------------
$(function(){
$('button').click(function(){
$div=$("<div ></div>");
$div.css({
'position':'absolute',
'top':0,
'left':0,
'background':'green',
'width':$(window).width(),
'height':$(window).height(),
'display':'none',
'opacity':0.55
});
$('body').append($div);
$div.fadeIn(3000);
$div.click(function(){
$(this).remove();
});
});
});
-----------------------------------------------------
<script type="text/javascript" charset="utf-8">
$(function(){
$('button').toggle(function(){
$('img').fadeIn(1000);
},function(){
$('img').fadeOut(1000);
});
});
</script>
</head>
<body>
<button >点击</button>
<div ></div>
<img src="./b.jpg" style="display:none" />
</body>
---------------------------------------------------
#form 可以用 val()获取值 $(this).val(); 也可以赋值 $(this).val('新的值');
-------------------------------------------------
<script src="./jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#bt1').click(function(e){
e.preventDefault();//阻止默认效果
$('#select1 option:selected').appendTo('#select2');
});
$('#bt2').click(function(e){
e.preventDefault();
$('#select2 option:selected').appendTo('#select1');
});
});
</script>
</head>
<body>
<form>
<select id="select1" name='one' multiple style="width:100px;height:100px;">
<option value="1">你</option>
<option value="2">我</option>
<option value="3">他</option>
<option value="4">人</option>
</select>
<button id="bt1" style="position:relative;top:-50px;">》》</button>
<button id="bt2" style="position:relative;top:-30px;">《《</button>
<select id="select2" name="two" multiple style="width:100px;height:100px;">
</select>
</form>
</body>
--------------------------------------------------------------
# 获取html和文本
$('p').html();
$('p').html(value);
$('p').text();
$('p').text(value);