Educoder Jquery事件

最新推荐文章于 2022-12-05 18:11:26 发布

Matcha_ice_cream

最新推荐文章于 2022-12-05 18:11:26 发布

阅读量1.3k

点赞数 7

分类专栏： jquery 文章标签： jquery html css js

本文链接：https://blog.csdn.net/Matcha_ice_cream/article/details/118000970

版权

jquery 专栏收录该内容

5 篇文章 18 订阅

订阅专栏

Educoder Jquery事件

第1关：Jquery鼠标事件

<!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 () {
            $(this).css("background", "#e7e7e7");
            $("p").html("这是个mouseenter事件");  
        });

        $("input").mouseleave(function () {
            $(this).css("background", "#4CAF50");
            $("p").html("这是个mouseleave事件");  
        });
            

       //------------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键盘事件

<!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表单事件

<!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文件/窗口事件

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

Matcha_ice_cream

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
Educoder Jquery事件

Educoder Jquery事件第1关：Jquery鼠标事件<!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
复制链接

扫一扫