Jquery事件一览

最新推荐文章于 2020-09-13 10:36:29 发布

Byte_Dance

最新推荐文章于 2020-09-13 10:36:29 发布

阅读量285

点赞数

分类专栏： Jquery

Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

9.1.页面载入
* 1:DOM加载完毕
* ( 1.1)当所有的标签都载入到页面的时候,调用脚本代码,这个时候只需要把所有的script标签放在body体之后就可以了
* ( 1.2)在实际开发过程中,都是直接写在外部 .js包内的文件,需要靠语句来引入,这个时候js引入标签就写在body体上边了,
我们需要再js代码内加入一段函数包裹
* 例如 : $(function(){
* // 等DOM文件加载完毕的时候调用以下代码
* js文件...
* })
* 在Juqery中还有专门的方法reday() 完成一样的等DOM加载完毕才执行的功能
* 例如 : $(document).raday(function(){
* // 等DOM文件加载完毕的时候调用以下代码
* js文件...
* }):
* 2:资源加载完毕
* 在我们平时进行网页特效的制作的时候,会加载一些图片或者文件,当图片没有加载完成的时候,程序就已经执行到需要用到图片的位置了,
这个时候我们就会发现没有找到图片,所以特效执行起来会有很大的问题,解决方法就是:
* ( 2.1)把所有特效放到 $(window).load(function(){}); 的load函数体内,这样就会等到所有的页面都加载完毕后才执行函数,

* ( 2.2)JS下的写法是 window.onload = function(){}

9.2.事件处理
bind(type, [data], fn) 给元素绑定事件,$("#foo").bind("click", function(){});
                                                                        和JS中的addEventListener效果类似,不过JS需要做对IE做兼容性判断
unbind([type], [data]) 给元素解绑事件 $("#foo").unbind("click");
                                                                         和JS中的removeEventListener效果类似,不过JS需要做对IE做兼容性判断
one(type, [data], fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
trigger(type, [data]) 在每一个匹配的元素上触发某类事件。
triggerHandler(type, [data]) 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。
                                                                            但不会执行浏览器默认动作，也不会产生事件冒泡。
9.3.事件委派
live(type, [data], fn) jQuery 给所有匹配的元素附加一个事件处理函数，
                                                                                即使这个元素是以后再添加进来的也有效。
die([type], [fn]) 此方法与live正好完全相反。如果不带参数，则所有绑定的live事件都会被移除。
9.4.事件切换
hover(over, out)     一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
toggle(fn, fn2, [fn3, fn4, ...]) 每次点击后依次调用函数。如果点击了一个匹配的元素，
                                                                  则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数
9.5.事件
blur( [fn] ) blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
change( [fn] ) change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。
click( [fn] ) 触发点击事件
dblclick( [fn] ) dblclick事件会在元素的同一点双击时触发。
error( [fn] ) error事件通常可以在元素由于点击或者tab导航失去焦点时触发。
focus( [fn] ) 在元素获取焦点的时候触发
keydown( [fn] ) 事件会在键盘按下时触发。
keypress( [fn] ) 这个函数会调用执行绑定到keydown事件的所有函数
keyup( [fn] ) 事件会在按键释放时触发。
mousedown(fn) 事件在鼠标在元素上点击后会触发
mousemove(fn) 事件通过鼠标在元素上移动来触发。其.clientX 和 .clientY 属性代表鼠标的坐标
mouseout(fn) 事件在鼠标从元素上离开后会触发
mouseover(fn) 事件会在鼠标移入对象时触发
mouseup(fn) mouseup事件会在鼠标点击对象释放时
resize(fn)         当文档窗口改变大小时触发
scroll(fn)         当滚动条发生变化时触发
select( [fn] ) 这个函数会调用执行绑定到select事件的所有函数
submit( [fn] ) 这个函数会调用执行绑定到submit事件的所有函数
unload(fn) 当用户离开页面时，会发生 unload 事件。如 : 点击某个离开页面的链接

/在地址栏中键入了新的 URL /使用前进或后退按钮 /关闭浏览器窗口 /重新加载页面

Jquery点赞功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞功能</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <button id="like">赞(<span>50</span>)</button>
    <script>
        //制作一个点赞功能
        var i = 0;
        $("#like").click(function(){
            if(i==0){
                //需要先把获取的span标签的内容转换为整数类型再做运算
                val = parseInt($("span").html())+1;
                $("span").html(val);
                $(this).css({"background":"red","color":"#fff"});
                i++;
            }else{
                alert("你已经点过赞了,请不要重复点击");
            }
        });
    </script>
</body>
</html>

元素跟随鼠标滑动案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖动元素跟随功能</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

    <style>
        *{
            margin:0;
            padding:0;
        }
        #divid{
            width:100px;
            height: 100px;
            background:red;
            position: absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>

<!--<p>鼠标位于坐标： <span></span>.</p>    });-->
<div id="divid">

</div>
<script type="text/javascript">
/**
  screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。
  clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。
  pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动
 */
//完整的鼠标拖动案例封装方法
    function drag(obj) {
        obj.bind("mousedown",start);
        function start(event){
            //deltaX 和deltaY就表示鼠标在元素的那个位置
            deltaX = event.clientX-obj.offset().left;
            deltaY = event.clientY-obj.offset().top;

            $(document).bind("mousemove",move);
            $(document).bind("mouseup",stop);
            return false;   //防止出现拖动速度过快发生的滑出屏幕现象

        }

        function move(event) {
            obj.css({
                    //然后元素的坐标就等于鼠标的位置减去鼠标和元素的偏移量
                "left": (event.clientX - deltaX) + "px",
                "top": (event.clientY - deltaY) + "px",
            })
            return false;   //防止出现拖动速度过快发生的滑出屏幕现象
        }

        function stop() {
            $(document).unbind("mousemove", move);  //把所有的事件解绑
            $(document).unbind("mouseup", stop);    //把所有的事件解绑
        }
    }
    obj = $("#divid");
    drag(obj);
//使用这种方法完成目的会有bug , 当元素移动到外边的时候,鼠标会跟随,鼠标释放事件就消失了
/*    $("#divid").mousedown(function(){
        $(document).bind("mousemove",function(e){
            x = e.clientX;
            y = e.clientY;
            $("#divid").css({"top":y+"px","left":x+"px"});
        });
        $(this).mouseup(function(){
            $(document).unbind("mousemove");
        });
    })*/

/*
使用JS的方式去实现
    val = document.getElementById("divid");
    val.onmousedown = function(){
        document.onmousemove = function(event){
            x = event.clientX;
            y = event.clientY;
            val.style.top = y+"px";
            val.style.left = x+"px";

        }
    }
*/

</script>

</body>
</html>

事件委派实现留言板案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委派实现留言板案例</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
        <style>
        #message{
            width: 600px;
            min-height:300px;   /*最小高度为300px*/
            overflow: hidden;
            background: #f4f4f4;
        }
        .in{
            background: #f6ffae;
            margin-top: 10px;
        }
        textarea:focus{
            /*获取焦点的时候把轮廓去掉*/
            outline:none;
        }
        textarea{
            resize: none;   /*禁止放大缩小*/
            width: 600px;
            height: 200px;
            border:2px solid black;
            font-size: 30px;
        }
        /*删除号 X 标签*/
        .close{
            float: right;
            cursor: pointer;
        }
        </style>
</head>
<body>

        <textarea> </textarea> <br>
        <button>评论</button> <br><br>
        <div id="message"></div>

        <script>
                /**
                 ive(type, [data], fn)  jQuery 给所有匹配的元素附加一个事件处理函数，
                       即使这个元素是以后再添加进来的也有效。
                 die([type], [fn])      此方法与live正好完全相反。如果不带参数，
                      则所有绑定的live事件都会被移除。
                 */
                    //点击评论就生成一个标签插入到元素内
                $("button").click(function(){
                    va = $("textarea").val();
                    if(va != 0){
                        str = "<div class='in'> "+va+"<div class='close'>&times</div>"+"</div>";
                        $("#message").append(str);
                    }else{
                        alert("您输入的内容为空!");
                    }
                });

            //再次获取输入焦点就清空内部数据
            $("textarea").focus(function(){
                $(this).val("");
            });

            // X 号一点击,就删除掉相对应的留言,使用时间委派绑定
            /*打个比方: 绑定事件的时候元素还没有生成,所以元素生成后根本没有相应的事件,
这个时候就需要使用事件委托来动态给元素绑定事件*/
            $(".close").live("click",function(){
                $(this).parent().hide(500); //删除的时候加上事件会生成动态效果
            })

        </script>
</body>
</html>

Byte_Dance

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery事件一览

9.1.页面载入 * 1:DOM加载完毕 * ( 1.1)当所有的标签都载入到页面的时候,调用脚本代码,这个时候只需要把所有的script标签放在body体之后就可以了 * ( 1.2)在实际开发过程中,都是直接写在外部 .js包内的文件,需要靠语句来引入,这个时候js引入标签就写在body体上边了, 我们需要再js代码内加入一段函数包裹 * ...
复制链接

扫一扫

专栏目录