程序员的知识教程库

网站首页 > 教程分享 正文

jQuery 事件类型和事件操作（jquery中有哪些基础事件方法?）

henian88 2024-10-17 09:33:26 教程分享 2 ℃ 0 评论

在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>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表