不懂事件操作,jQuery等于白学
页面事件
javascript中
window.onload = function(){}
jQuery中
//写法1:
$(document).ready(function(){})
//写法2:
jQuery(document).ready(function(){})
//写法3:建议这种写法
$(function(){})
//写法4:
jQuery(function(){})
区别:window.onload
只能调用一次,如果多次调用,则只会执行最后一个
//解决方法
window.addEventListener("load", function(){}, false);
jQuery中,ready事件是可以多次执行的。从这里也可以看出jQuery近乎完美的兼容性。
鼠标事件
click
单击事件
mouseover
移入事件
mouseout
移出事件
mousedown
按下事件
mouseup
松开事件
mousemove
鼠标移动事件
jQuery事件比JavaScript事件只是少了“on”前缀。
$(function () {
$("div").click(function(){
alert("玩我么?")
})
})
click()
方法自动触发点击事件实现图片轮播
$(function () {
$("#btn").click(function () {
alert("欢迎来到绿叶学习网!");
}).click();
})
mouseover
和mouseout
实现下拉菜单展开收缩功能
///
jQuery中,如果对同一个对象进行多种操作,则可以使用链式调用的语法。
$("div").mouseover(function(){$(this).css("color", "red");
}).mouseout(function () {$(this).css("color", "black");})
在实际开发中,mousedown、mouseup
和mousemove
经常用来配合实现拖拽、抛掷等效果
键盘事件
keydown
和keyup
$("#txt").keyup(function(){
var str = $(this).val();
$("#num").text(str.length);
})//实现实时统计字符的长度
键盘事件一般有两个用途:**表单操作和动画控制。**对于动画控制,常见于游戏开发。
表单事件
focus
与blur
focus
表示获取焦点时触发的事件,blur
表示失去焦点时触发的事件,两者是相反操作。
只有以下两种html元素有焦点事件
表单元素(单选框、复选框、单行文本框、多行文本框、下拉列表)
超链接
$("#search").focus(function(){
if($(this).val() == txt){
$(this).val("");
}
})//focus()实现改变文本框内的默认值
$(function(){
$("#txt").focus();
})//focus()作为方法,实现打开网页自动获取焦点
select()
选中“单行文本框”或“多行文本框”中的内容时,就会触发select事件。
$(function () {
$("#search").click(function(){
$(this).select();
})
})//作为方法,实现自动选中文本框中的所有内容
change()
<p><label><input id="selectAll" type="checkbox"/>全选/反选:</label></p>
<label><input type="checkbox" class="fruit" value="苹果" />苹果</label>
$(function () {
$("#selectAll").change(function(){
var bool = $(this).prop("checked");
if(bool){
$(".fruit").prop("checked","checked");
}else{
$(".fruit").removeProp("checked");
}
})
})//实现复选框的全选与反选
<select>
<option value="http://wwww.baidu.com">百度</option>
<option value="http://www.qq.com">腾讯</option>
</select>
$(function () {
$("select").change(function(){
var link = $(":selected").val();
window.open(link);
})
})//实现下拉菜单选中时跳转网页
编辑事件
右键操作。
contextmenu事件
$(function () {
$("body").contextmenu(function(){
return false;
})
})//禁用鼠标右键
$(function () {
$("div").contextmenu(function(){
$(this).css("background-color", "hotpink");
})
})//点击右键切换颜色
滚动事件
拉动页面滚动条时触发的事件。
$().scroll(function(){})
///
$(function () {
//获取box2距离顶部的距离
var top = $("#box2").offset().top;
//根据滚动距离判断定位
$(window).scroll(function () {
//当滚动条距离大于box2距离顶部的距离时,设置固定定位
if ($(this).scrollTop() > top) {
$("#box2").css({ "position": "fixed", "top": "0" });
}
//当滚动条距离小于box2距离顶部的距离时,设置相对定位
else {
$("#box2").css({ "position": "relative" });
}
});
})//实现元素固定在窗口某个位置
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
/
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$("div").css("display", "inline-block");
}
else {
$("div").css("display", "none");
}
});
$("div").click(function () {
$("html,body").scrollTop(0);
}); /*实现点击滚动回顶部*/