Educoder/头歌——jQuery事件

本文介绍: 问：什么是事件？答：页面对不同访问者的响应叫做事件。问：那事件处理程序又是什么呢？答：事件处理程序指的就是当HTML中发生某些事件时所调用的方法。为了完成本关任务，你需要掌握：click() 事件方法；dblclick()事件方法；mouse e n t e r()事件方法；mouse leave()事件方法；了解其他鼠标事件。

第1关：Jquery 鼠标事件

编程要求

在右侧编辑器中补充代码，jquery已经引入，平台会对你的代码进行检测，要求如下：

单击 button元素，p 标签内文字显示为“这是个click事件”；

双击button元素，p 标签内文字显示为“这是个dblclick事件”；

鼠标指针移入button元素，button的背景颜色为#e7e7e7，p标签内文字显示为“这是个mouseenter事件”；

鼠标指针移出button元素，button的背景颜色为#4CAF50,p标签内文字显示为“这是个mouseleave事件”。

注意：为了方便评测，这里统一用双引号 “” 来包含字符串或属性。

<!doctype html&gt;
<html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8" /&gt;
    <title&gt;step1</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
    <h1>鼠标事件演示</h1>
        <input type="button" value="button" class="button">
        <p></p>
</div>
<script>
    $(function(){    
       //-----------begin-----------
    $("input").click(function () {
        $("p").html("这是个click事件");
    });
    $("input").dblclick(function () {
        $("p").html("这是个dblclick事件");
    });
    $("input").mouseenter(function () {
        $("p").html("这是个mouseenter事件");
        $(this).css("background","#e7e7e7");
    });
    $("input").mouseleave(function () {
        $("p").html("这是个mouseleave事件");
        $(this).css("background","#4CAF50");
    });          
            
       //------------end------------ 
        
    })
</script>
<style>
    .container{
        width: 500px;
        margin: 40px auto;
    }
    .button{
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
</style>
</body>
</html>

第2关：Jquery 键盘事件

基本语法：

$(selector).key down(function(){
…
})
$(selector).key up(function(){
…
})
说明:selector表示要操作的dom元素

示例：在键盘上输入按键，当触发key down事件时数值+1，当触发keyup事件时数值+2。

按键的次数: 0

i=0; $(“in put“).keydown(function(){ $(“span“).text(i+=1); }); $(“in put“).keyup(function(){ $(“span“).text(i+=2); });

注意：观察效果图我们可以明显的看到中间有一个值的过渡的过程，也就说明按下一个按键它触发了二个方法。

keypre ss事件

keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键。
我们可以理解为keypress事件将keydown事件和keyup事件进行组合。

基本语法：

$(selector).keypress(function(){
…
})
示例：记录按键按下的次数，没按下一次键盘的按键相应的值+2。

按键的次数: 0

i=0; $(“.button”).keypress(function () { $(“span“).text(i+=2); });

编程要求

根据提示，在右侧编辑器中补充代码，jquery已经引入，平台会对你的代码进行检测，要求如下：

从键盘上输入数据到第一个输入框中，并记录按键的次数；

从键盘上输入数据到第二个输入框中，当键盘按下时将输入框的背景色设置为yellow色，当按键抬起时将输入框的背景颜色设置为pink色。

提示：页面有两个输入框，操作对象已经为你提供了class属性名。
注意：为了方便评测，这里统一用双引号 “” 来包含字符串或属性。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>step2</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
		
		<h1>键盘事件演示</h1>

        <input type="text" class="input1" placeholder="输入你的名字">
		<p>按键的次数: <span>0</span></p>

		<input type="text" class="input2" placeholder="这里输入文字">

</div>

<script>
    $(function(){    

       //-----------begin-----------

       i=0;
        $(".input1").keypress(function () {
            $("span").text(i+=1);
        });
        $(".input2").keydown(function(){
            $(".input2").css("background-color", "yellow");
        });
        $(".input2").keyup(function(){
            $(".input2").css("background-color", "pink");
        });
       //------------end------------ 
    });

</script>

<style>
    .container{
        width: 500px;
        margin: 40px auto;
    }
</style>
</body>
</html>

第3关：Jquery 表单事件

编程要求

根据提示，在右侧编辑器中补充代码，jquery已经引入，平台会对你的代码进行检测，要求如下：

获取第一个输入框时，输入框的背景颜色变成yellow色，当失去焦点时，输入框的背景颜色为green；

选中下拉框的显示项时，将有红色背景色的div（已提供在任务文件中）显示出来，选中不显示时，将其隐藏。（默认 div为隐藏）；

当选中第二个输入框中的文本时，在输入框后面追加“Text select!”文本。

提示：相应的操作对象已经为你提供了class属性名和id属性名。
注意：为了方便评测，这里统一用双引号 “” 来包含字符串或属性。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>step3</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
		
		<h1>表单事件演示</h1>

        <input type="text" class="input1">

		<br><br><select id="mySelect">
		  <option value ="显示">显示</option>
		  <option value ="不显示" selected = "selected">不显示</option>
		</select>

		<br><div id="box" style="width:200px;height:100px;background:red;display:none;"></div>

		<br><br><input type="text" class="input2" value="www.educoder.net">

</div>

<script>
    $(function(){    

       //-----------begin-----------

		//1.获取焦点失去焦点事件
		$(".input1").focus(function() {
           // $(".input1").css("display","inline");
            $(".input1").css("background-color","yellow");
        })
        $(".input1").blur(function() {
            $(".input1").css("background-color","green");
        })


		 

		//2.改变文本事件
		$("#mySelect").change(function(){
            if($(this).find("option:selected").text()=="显示"){
                $("#box").show();
            }else{
                $("#box").hide();
            }
        });



		
		//3.选中文本事件
		 $(".input2").select(function(){
            $(".input2").after("Text select!");
        });




       //------------end------------ 
        
    });

</script>

<style>
    .container{
        width: 500px;
        margin: 40px auto;
    }
</style>
</body>
</html>

第4关：Jquery 文件/窗口事件

相关知识

为了完成本关任务，你需要掌握：

resize()事件方法；

scroll()事件方法。

resize事件

当调整浏览器窗口大小时，发生 resize 事件。

基本语法：

$(selector).resize(function(){
…
})
说明:selector表示要操作的dom元素

示例：记录改变窗口大小的次数。

窗口重置了 0 次大小。

x=0; $(window).resize(function(){ $(“span“).text(x+=1); });

scroll事件

当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

基本语法：

$(selector).scroll(function(){
…
})
示例：滚动文本内容，记录其滚动次数。

滚动了 0 次。

x=0; $(“div”).scroll(function(){ $(“span“).text(x+=1); }); ## 编程要求根据提示，在右侧编辑器中补充代码，jquery已经引入，平台会对你的代码进行检测，要求如下：

当改变窗口大小时，弹出提示框“不建议调整窗口大小!”；
当滚动文本内容时，将下方文字Scroll not happened改成Scroll happened!，并使得每次滚动内容时文本都有淡出fa deOut的动画效果。
提示：相应的操作对象已经为你提供了class属性名和id属性名。
注意：为了方便评测，这里统一用双引号 “” 来包含字符串或属性。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>step4</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
		
		<h1>文档/窗口事件演示</h1>

　　	<div id="target" style="overflow: scroll; width: 300px; height: 100px;">
		  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
		  sed do eiusmod tempor incididunt ut labore et dolore magna
		  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
		  ullamco laboris nisi ut aliquip ex ea commodo consequat.
		  Duis aute irure dolor in reprehenderit in voluptate velit
		  esse cillum dolore eu fugiat nulla pariatur. Excepteur
		  sint occaecat cupidatat non proident, sunt in culpa qui
		  officia deserunt mollit anim id est laborum.
		</div>
		<p>滚动状态 - <span>Scroll not happened</span></p>


</div>

<script>
    $(function(){    

       //-----------begin-----------
		
		//1.窗口大小改变事件
		$(window).resize(function(){
            alert("不建议调整窗口大小!");
        });


		 

		//2.滚动文本内容事件
		$("#target").scroll(function(){
            //$("span").html("Scroll happened!");
            $("span").css("display", "inline").fadeOut("slow"); 
        });

       //------------end------------ 
        
    });

</script>

<style>
    .container{
        width: 500px;
        margin: 40px auto;
    }
</style>
</body>
</html>

原文地址:https://blog.csdn.net/m0_71106830/article/de tails/130948545

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_39100.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

事件处理程序方法

第1关：Jquery 鼠标事件

相关 知识

click事件

d b lc lick事件

mouse e n t er事件

mouse leave事件

其他鼠标事件方法

编程要求

第2关：Jquery 键盘事件

相关知识

基本语法：

keypre ss事件

编程要求

第3关：Jquery 表单事件

相关知识

focus事件和blur事件

change事件

select事件

submit事件

编程要求

第4关：Jquery 文件/窗口事件

相关知识

resize事件

scroll事件

发表回复取消回复

第1关：Jquery鼠标事件

click事件

dblclick事件

mouseenter事件

mouseleave事件

其他鼠标事件方法

编程要求

第2关：Jquery键盘事件

相关知识

基本语法：

keypress事件

编程要求

第3关：Jquery表单事件

相关知识

focus事件和blur事件

change事件

select事件

submit事件

编程要求

第4关：Jquery文件/窗口事件

相关知识

resize事件

scroll事件

相关文章

发表回复 取消回复

第1关：Jquery 鼠标事件

d b lc lick事件

mouse e n t er事件

mouse leave事件

第2关：Jquery 键盘事件

keypre ss事件

第3关：Jquery 表单事件

第4关：Jquery 文件/窗口事件

发表回复取消回复