jQuery学习总括之jQuery事件,jQuery学习笔记

先是,大家来看叁个有效的实例,来强化从前所主宰的学问,个中多少是在头里出现过的。

.加载DOM

复制代码 代码如下:

 

<img id=”imgGoogle”
src=””
alt=”google.com” />
<input type=”button” id=”btnHide” value=”遮掩图片” />

        Javascript
与HTML之间的相互是经过用户操作浏览器页面引发的风云来拍卖的。jQuery提供了丰盛的事件管理机制。从上篇博客中,大家驾驭浏览器先是加载DOM树的,在加载DOM成分之后,浏览器就初步为因素增加事件。所以,首先要明白浏览器是经过什么情势加载DOM的。在js中,加载DOM的主意是因此window.onload方法,而在jQuery中使用的是$(document).ready()方法。那三种办法的分别在于:1.window.onload()是在网页中的全数因素加载成功时才开端实行DOM事件,而$(document).ready()方法规是在网页中的DOM树加载成功之后就足以实行,举例来佛讲,假如大家打开贰个含有众多图形的网址,若是用window.onload()方法的话,那么必须等到网页上的有所图片全体加载成功之后才开头实践,而选择$(document).lready()方法的话则是独有DOM树加载成功,不要求等到全体图片都加载成功就能够实践。2.其次,在写法上$(document).ready(function(){})能够简化写为:$(function(){}.)。

jQuery(document).ready(function() {
  jQuery("#btnHide").click(function() {
    jQuery("#imgGoogle").hide("1000");
  });
});

 

当点击隐敝图片时,google的logo图片就要一分钟举办遮盖。这里我们用到了hide()方法,当然也可不钦命时间,假诺要展现图片的话应该利用show()方法,感觉是还是不是很棒。

二. 事件绑定

当今开始本篇的主要性内容:事件。我们莫不已经注意到了,下面已经在多处用到了事件。个中,document.ready正是一个平地风波,当文书档案希图好了,它告诉jQuery可以实施事件了,鼠标移动、点击、文本框宗旨离开等都以事件。

 

在过去,我们平常来看:

既然如此加载完了,我们本来将要开端绑定大家所急需的风波喽,那么应该怎么绑定呢?这里大家将一个Demo示例来演示。先来看下述Html代码。

复制代码 代码如下:

 

<div onclick=”alert(‘租房贵’);” id=”divRent”>在北京</div>

复制代码

这种写法。从前几天开始,大家应该甩掉这种写法。完结js代码和html的分别,那样页面整洁了,作用也会越来越高。未来的写法,将会变成:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;

jQuery("#divRent").click(function() {
  alert("租房贵");
});

<html xmlns=”;

既是是总计,小编依旧像前三篇那样,用实例来记录尽也许多的事件措施,方便大家在供给的时候查阅。

<head>

以下是和睦在求学进程中遭受的:

    <title>事件绑定</title>

1、one()事件,绑定要实施一次的平地风波

    <style type=”text/css”>

复制代码 代码如下:

    *

<div id=”divRent”>人在新加坡市</div>

{

复制代码 代码如下:

    margin:0;

jQuery(“#divRent”).one(“click”, function() {
    alert(“租房贵”);
});

    padding:0;    

以上绑定贰回单击事件,第二次点击时,不会再弹出提示。

}

2、focus()和blur()事件

body 

复制代码 代码如下:

{

<input id=”tTest” type=”text” />

    font-size:13px;

复制代码 代码如下:

    line-height:130%;

jQuery(“#tTest”).focus(function() {
    jQuery(this).css(“background”, “yellow”);
}).blur(function() {
    jQuery(this).css(“background”, “white”);
});

    padding:60px;

此例实用到了链式写法,相信简单精晓。如若对jQuery操作css样式面生,能够看看第二篇计算。此例当难点聚集在本文框时,背景观变为浅蓝,离开时又变回琥珀色。那样做的目标,能够增加用户体验,笔者个人以为。

}

3、keydown()和keyup()事件

#panel

复制代码 代码如下:

{

<input type=”text” id=”tTest” />
<label id=”lResult”></label>

    width:300px;

复制代码 代码如下:

    border:1px solid #0050D0;

jQuery(“#tTest”).keyup(function() {
    jQuery(“#lResult”).html(jQuery(this).val());
});

}

当键弹起时(这里以为糟糕表明^_^),在label大校会议及展览示文本框中的内容。操作成分属性部分可以看看第三篇计算。

.head

4、submit()事件

{

复制代码 代码如下:

    height:24px;

<form id=”form2″ runat=”server”>
    <input id=”text” type=”text” />
    <asp:button id=”btnTest” onclick=”btnTest_Click” runat=”server”
text=”测试”>
    </asp:button>
</form>

    line-height:24px;

复制代码 代码如下:

    text-indent:10px;    

jQuery(“#form1”).submit(function() {
    if (jQuery.trim(jQuery(“#text”).val()).length == 0) {
        return false;
    }
});

    background:#96E555;

可以看到,本实例使用了服务器控件。实质上是同样的,最终会进展表单提交。点击按键时,举行表单提交。如若文本框内容为空时,重临false,进而不进行提交;不然,进行付出。此类应用在web开采中随处可遇。

    cursor:pointer;

5、hover()事件

    width:100%;

复制代码 代码如下:

}

<div id=”divHover”>hover me</div>

.content

复制代码 代码如下:

{

jQuery(“#divHover”).hover(function() {
    jQuery(this).css(“background”, “yellow”);
}, function() {
    jQuery(this).css(“background”, “red”);
});

    padding:10px;

鼠标移动到div上时,div背景观变成黄绿,移出背景象形成湖蓝。

    text-indent:24px;

上述二种事件是比较常见的,也是用的比较多的。当然本篇总结的只是一小部分,学习中遇见标题还得用jQuery文书档案进行查看。

    border-top:1px solid #0050D0;

您可能感兴趣的作品:

  • jQuery异步加载数据并丰盛事件示例
  • jQuery响应鼠标事件并隐藏与彰显input默许值
  • jquery
    bind(click)传参让列表中每行绑定三个事变
  • JQuery完成表格动态扩展行并对新行加多事件
  • jquery阻止后续事件只实行第二个事件
  • jquery中的常用事件bind、hover、toggle等示范介绍
  • jQuery新的事件绑定机制on()示例应用
  • JQuery1.8
    决断成分是不是绑定事件的不二诀要
  • jquery
    为a标签绑定click事件示例代码
  • 浅谈 jQuery
    事件源码定位难点
  • jquery
    新建的因素事件绑定难题化解方案
  • jQuery移除成分自动解绑事件达成思路及代码
  • jQuery事件用法实例汇总

    display:block;

    display:none;

}

   </style>

</head>

<body>

<div id=”panel”>

    <h5 class=”head”>怎么样?</h5>

    <div class=”content”>还不易啊。</div>

</div>  

</body>

</html>

复制代码

此刻大家要做的成效就是当鼠标划到“怎么着”三个字的时候,会自行弹出上边包车型大巴<div>区域,呈现“还不易哦。”当鼠标离开时候,该区域又再一次隐蔽。为直达那几个效果,大家就需在<h5>上绑定多个事件,一个为mouseove和mousout事件。整理好思路,我们就起来写jQuery代码。

 

复制代码

<script type=”text/javascript”>

        $(function () {                                
 //等待DOM加载成功

            $(“.head”).bind(“mouseover”, function () {  
//为<h5>绑定mouseover事件,即当鼠标划进来的时候使class=”content”的<div>区域呈现

                $(this).next().show();

            }).bind(“mouseout”, function () {          
 //为<h5>绑定mouseout事件,即当鼠标划出的时候使class=”content”的<div>区域隐敝 

                $(this).next().hide();

            })

        })

</script>

复制代码

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图