目录
一: 页面载入
页面载入ready方法。 *{页面载入的三种方式window.onload()}*
jQuery中的语法: ***掌握记住工厂函数就可以了***
=>写法一:
$(document).ready(function(){
//事件编程
});
eg:*****$(document).ready(function(){
alert($('p').html());
}); //在head标签加载页面,弹出body标签内的p标签
=>写法二:
$().ready(function(){
//事件编程
});
eg:*****$().ready(function(){
alert($('p').html());
});
=>写法三: 俗称为工厂函数
$(function(){
//事件编程
});
eg:***** $(function(){
alert($('p').html());
}); //在head标签加载页面,弹出body标签内的p标签
**面试题:传统的window.onload方法与jQuery中的ready方法有和区别?
答: window.onload方法是必须等到当前页面的所有资源(css,js,图片等资源)
加载完毕后开始执行,而jQuery中的ready方法是当页面的dom结构加载完成
后,就会自动执行,所以在执行速度上ready方法要略快于window.onload方法;
二: jQuery基本事件
=> jQuery对象:jQuery对象.事件(事件的处理程序);
=> $(选择器).click(function(){
//事件编程
});
blur(fn) :当失去焦点时触发
change(fn) :当状态改变时触发
click(fn) :单击时触发
dblclick(fn) :双击时触发
focus(fn) :获取焦点时触发
keydown(fn) :键盘按下时触发
keyup(fn) :键盘弹起时触发
keypress(fn) :键盘按下时触发
load(fn) :页面载入时触发
unload(fn) :页面卸载(关闭)时触发
mousedown(fn) :鼠标按下时触发
mouseup(fn) :鼠标弹起时触发
mousemove(fn) :鼠标移动时触发
mouseover(fn) :鼠标悬浮时触发
mouseout(fn) :鼠标离开时触发
resize(fn) :大小改变时触发
scroll(fn) :滚动时触发
select(fn) :选中时触发
submit(fn) :表单提交时触发
eg: <script type="text/javascript">
$(function(){
$('button').click(function(){
//给div加样式
$('div').css({width:'200px',height:'200px',backgroundColor:'green',border:'1px solid red'})
});
});
</script>
<body>
<button>点击</button>
<div></div>
</body>
三: 探讨jQuery中的事件绑定中的this指向
=>谁触发这个动作,this就指向谁!
<a>在原生Javascript中,事件监听其内部this指向,指向window全局对象
<b>this是一个DOM对象;
eg: $(function(){
$('input').blur(function(){
//alert($('input').val());
alert($(this).val()); //this代表触发这个事件的DOM对象
});
});
<input type="text" value="100">
四: 事件切换
<a> hover(over,out) :鼠标悬浮与鼠标离开事件,第一个参数为over事件处理程序,第二个参数为out事件处理程序;
eg: //鼠标的悬浮和离开事件特有
$('div').hover(function(){
$(this).css('backgroundColor','red');//鼠标悬浮
},function(){
$(this).css('backgroundColor','green');//鼠标离开
})
<b> toggle(fn,fn) :点击事件切换,可以有多个参数 图片颜色切换
eg: $('button').toggle(function(){
$('div').toggleClass('cls1');
},function(){
$('div').toggleClass('cls1');
})