Educoder/头歌——jQuery事件

第1关：Jquery鼠标事件

编程要求

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

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

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

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

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

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>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).keydown(function(){
…
})
$(selector).keyup(function(){
…
})
说明:selector表示要操作的dom元素

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

按键的次数: 0

i=0; $("input").keydown(function(){ $("span").text(i+=1); }); $("input").keyup(function(){ $("span").text(i+=2); });

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

keypress事件

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>

Educoder/头歌——jQuery事件

第1关：Jquery鼠标事件

相关知识

click事件

dblclick事件

mouseenter事件

mouseleave事件

其他鼠标事件方法

编程要求

第2关：Jquery键盘事件

相关知识

基本语法：

keypress事件

编程要求

第3关：Jquery表单事件

相关知识

focus事件和blur事件

change事件

select事件

submit事件

编程要求

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

相关知识

resize事件

scroll事件