12-jquery事件

jquery事件

事件函数列表：
blur() 元素失去焦点 做表单验证时用到
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入(进入子元素也触发)
mouseout() 鼠标离开(离开子元素也触发)
mouseenter() 鼠标进入(进入子元素不触发)
mouseleave() 鼠标离开(离开子元素不触发)
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户提交表单

 

获取、失去焦点、blur：

 

    <script>
        $(function(){
            /*在获得焦点的时候做什么事情，实际中很少有这种用法，基本上都是使一个元素获得焦点
            $("#input01").focus(function(){
                alert("获得焦点")
            })
            */

            //元素input02获取焦点
            $("#input01").focus()


            $("#input01").blur(function(){
                //获取input元素的value值用val()函数
                var sVal = $(this).val()
                alert(sVal)
            })

        })

    </script>
</head>
<body>
    <form>

    <input type="text" id="input01">
    <input type="text" id="input02">
    <input type="submit" value="submit" id="sub">
    
    </form>

 

 

提交：

 

在前面讲js函数时，讲到一个return函数有三个作用：
1、返沪函数执行的结果
2、结束函数的运行
3、阻止默认行为

 

其中第三条当时没讲，现在补充：

 

默认行为，比如点击submit就会自动去提交，就是一个默认行为

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    
        <script>
        $(function(){
          
            //转到：https://www.baidu.com/?data1=xxx&data2=xxxx
            //要提交，form需要有个action提交地址，input中需要有name属性值
            //ps:提交按钮不需要写这个就可以提交，写这个只是为了提交时执行函数（这里是弹出‘提交’）
            $('#form1').submit(function(){
                alert('提交')
            })


            //return有阻止默认行为的作用，这样就会阻止表单提交
            //为何要阻止呢，有时不想用默认提交方式，就要先阻止它的默认行为 
            $('#form1').submit(function(){

                //阻止默认的提交行为
                return false
            })

        })

    </script>
</head>
<body>

    <form id="form1" action="http://www.baidu.com">

    <input type="text" name="data1" id="input01">
    <input type="text" name="data2" id="input02">
    <input type="submit" value="submit" id="sub">
    
    </form>
</body>
</html>

 

 

 

 

鼠标移入、移出事件：

 

    <script src="js/jquery.js"></script>
    <script>

        $(function(){
            //鼠标移入时，移入子元素也会触发
            $('.con').mouseover(function(){
                alert("移入")
            })
            //鼠标移出时，移出子元素也会触发
            $('.con').mouseout(function(){
                alert("移出")
            })

            

            /*鼠标移入，移入子元素不会触发
            $('.con1').mouseenter(function(){
                alert("移入")
            })

            //鼠标移出，移出子元素不会触发
             $('.con1').mouseleave(function(){
                alert("移出")
            })

                */
            //上面两句可以用hover()合并成一句：
            //$(".con1").hover(function(){},function(){})
             $(".con1").hover(function(){alert("in")},function(){alert("out")})
             
            
        })
    

    </script>
    <style>
        .con,.con1{
            width:200px;
            height:200px;
            background-color:gold;
        }

        .box,.box1{
            width:100px;
            height:100px;
            background-color:green;
        }
    </style>
</head>
<body>
   <div class="con">
       <div class="box"></div>
   </div>
    <br>
    <br>
     <div class="con1">
       <div class="box1"></div>
   </div>
</body>
</html>

 

 

resize()

 

    <script>
    
        $(window).resize(function(){

            var $w = $(window).width()
　　　　　　　//缩放窗口会把窗口宽度打印到标题栏
            document.title = $w
        })

    </script>

 

posted @ 2019-03-29 23:00  greenfan  阅读(100)  评论(0)    收藏  举报