在jQuery中都将事件封装为对应的事件方法, 事件方法去掉了on前缀
jQuery对象.事件方法(function(){
//写代码
})
简单事件处理
blur(fn) 在每一个匹配元素的blur事件中绑定一个处理函数
change(fn) 在每一个匹配元素的change事件中绑定一个处理函数
click(fn) 在每一个匹配元素的click事件中绑定一个处理函数
dblclick(fn) 在每一个匹配元素的dblclick事件中绑定一个处理函数
focus(fn) 在每一个匹配元素的focus事件中绑定一个处理函数
mouseover(fn) mouseover事件会在鼠标移入对象时触发
mouseout(fn) mouseout事件在鼠标从元素上离开后会触发
submit(fn) 事件将会在表单提交时触发
keydown(fn) 当键盘按下时
scroll(fn) 当滚动条滚动时
select(fn) 当内容被选中
DOM1级事件设置
<input type="text" onclick="过程性代码" value='tom' />
<input type="text" onclick="函数()"/>
itnode.onclick = function(){}
itnode.onclick = 函数;DOM2级事件设置
itnode.addEventListener(事件类型, 处理函数, bCapture); //不带on
itnode.removeEventListener(事件类型, 处理函数, bCapture); //不带on
itnode.attachEvent(事件类型, 处理函数);
itnode.detachEvent(事件类型, 处理函数);
jQuery事件设置
$().事件类型(事件处理函数fn); //设置事件
$().事件类型(); //触发事件执行
例如：$(form).submit()可以使得表单进行提交。
事件类型：click、keyup、keydown、mouseover、mouseout、blur、focus等等
例如：$('div').click(function(){事件触发过程this});
(该方式事件函数内部this都代表jquery对象内部的DOM节点对象)。
jQuery调用的大部分方法里边的this关键字都代表其对应的DOM对象。
$("#apple").click(function(){
this代表唯一的一个DOM对象
})
$("li").click(function(){
this分别依次代表每个li的DOM对象
})
this的使用
HTML代码：
<h2>this的使用</h2>
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
</ul>jQuery代码:
$(function(){
//click()方法[不局限click方法，包括jquery的大部分方法]本身有遍历机制
//会为每个li都设置click事件
$('li').click(function(){
//this代表每个li的dom对象
alert($(this).html());
});
});实例:
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
//页面加载完毕给h2设置click事件
$(function(){
//$().click(function)设置事件
//$().click() 触发事件
$('h2').click(function(){
//this代表dom对象(h2节点对象)
var clr = Math.floor(Math.random()*200);
this.style.backgroundColor = "rgb(0,100,"+clr+")";
});
$('h2').mouseover(function(){
console.log('来了');
});
$('h2').mouseout(function(){
console.log('走了，不送');
});
});
function f1(){
//通过代码形式使得h2的"点击"事件得到"执行"
$('h2').click();
}
</script>
<style type="text/css">
h2 {width:300px; height:200px; background-color:pink;}
</style>
</head>
<body>
<h2>简单事件设置</h2>
<input type="button" value="触发执行" onclick="f1()" />
</body>
</html>
change和keyup使用方法:
$("选择器").change(function(){
}).keyup( function () {
$(this).change();
});实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现的搜索列表过滤</title>
<style>
body {
background: #fff;
font-size: 13px;
}
#wrap {
position: relative;
}
.product-head h1 {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 3px;
margin-left: 3px;
}
.product-head {
font-size: 12px;
padding: 4px;
background-color: #ccc;
width: 235px;
}
.filterform input {
font-size: 15px;
padding: 3px;
border: 1px solid #999;
}
li {
padding: 5px;
margin: 3px;
list-style: none;
width: 230px;
border-top: 1px solid #ccc;
}
li a {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px
}
ul {
margin: 0;
padding: 0;
}
.clear {
clear: both;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
(function($) {
jQuery.expr[':'].Contains = function(a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
function filterList(header, list) {
var form = $("<form>").attr({
"class": "filterform",
"action": "#"
}),
input = $("<input>").attr({
"class": "filterinput",
"type": "text"
});
$(form).append(input).appendTo(header);
$(input)
.change(function() {
var filter = $(this).val();
if (filter) {
$matches = $(list).find('p:Contains(' + filter + ')').parent();
$('li', list).not($matches).slideUp();
$matches.slideDown();
} else {
$(list).find("li").slideDown();
}
return false;
})
.keyup(function() {
$(this).change();
});
}
$(function() {
filterList($("#form"), $("#list"));
});
}(jQuery));
</script>
</head>
<body>
<noscript>
<div id="noscript">需要开启浏览器的JavaScript功能才能查看更多效果!</div>
</noscript>
<div id="container">
<div id="wrap">
<div class="product-head">
<h1>搜索</h1>
<div id="form"></div>
<div class="clear"></div>
</div>
<ul id="list">
<li>
<p href="#/Apple/">html</p>
</li>
<li>
<p href="#/Broccoli/">css</p>
</li>
<li>
<p href="#/Carrot/">javascript</p>
</li>
<li>
<p href="#/Celery/">jQuery</p>
</li>
<li>
<p href="#/Lettuce/">less</p>
</li>
<li>
<p href="#/Mushroom/">sass</p>
</li>
<li>
<p href="#/Onion/">php</p>
</li>
</ul>
</div>
</body>
</html>