前言：
现在同学们对“jquery滚轴事件”大体比较关怀，同学们都需要学习一些“jquery滚轴事件”的相关资讯。那么小编同时在网上汇集了一些对于“jquery滚轴事件””的相关资讯，希望朋友们能喜欢，你们快快来学习一下吧！在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=";></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> 标签： #jquery滚轴事件 #jquery 触发 li 点击 #jqueryli的点击事件 #jquerydiv加载事件 #jquery页面事件
