动态加载的jquery报错怎么解决

动态加载的jquery报错怎么解决,第1张

1、jQuery的load()事件处理的BUG,当是从浏览器缓存取得时,获取的是错误的尺寸。

2、错误的代码是:

(错误) 在添加了HTML之后立即调用代码获取尺寸

3、(错误) 用jQuery的load()事件处理

4、经实际测试,使用jQuery 132及以上版本(162、182),在服务器端测试读取浏览器缓存时,可以得到正确尺寸。不存在原作者所说的jQuery的load()事件存在BUG的问题。

5、下面这种才是真正正确的方法,使用JavaScript的Image类:

(正确) 的方法:

6、或一种办法

解决方法:原生jsonload方法:

mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,mouseout事件于用户把鼠标移出一个元素时触发。

下面为你详细介绍下jquery中的鼠标事件:

(1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发;

$('p')click(function(){

alert('click function is running

!');

});

(2):dbclick事件:dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于 *** 作系统的设置。一般双击事件在页面中不经常使用;

$('p')dbclick(function(){

alert('dbclick function is running

!');

});

(3):mousedown事件:mousedown事件在用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发;

$('p')mousedown(function(){

alert('mousedown function is

running !');

});

(4):mouseup事件:mouseup事件在用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发;

$('p')mouseup(function(){

alert('mouseup function is running

!');

})click(function(){

alert('click

function is running too !');

});

(5):mouseover事件:mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性;

(6):mouseout事件:mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。

jQuery 不直接支持鼠标滑轮事件,有一个插件叫做 jQuery Mousewheel,你可以 Google 一下

但用原生 JavaScript 也可以轻松来实现

<script type="text/javascript">

// 鼠标滑轮滚动后执行的函数

// delta > 0 = 向上滚动

// delta < 0 = 向下滚动

function mousewheelEvent(e, delta) {

    documentgetElementById("debug")innerHTML += (delta + "<br />");

    // 其它代码

}

            

if (documentattachEvent) {

    documentattachEvent("onmousewheel", function(e) {

        mousewheelEvent(e, ewheelDelta);

    });

}

else if (documentaddEventListener) {

    documentaddEventListener("DOMMouseScroll", function(e) {

        mousewheelEvent(e, edetail -40);

    }, false);

}

</script><body style="height: 3000px">

<div id="debug" style="position: fixed"></div>

如果要控制从一个格子点击开始事件,在另一个格子取消事件,只需置个标志位,如sign=false,在某个格子mousedown时设置sign为true,在释放事件时设置sign为false,拖动时sign为true时才触发事件即可。

<style>

        {

            margin: 0%;

            padding: 0%;

        }

        box{

            width: 340px;

            border: 1px solid blue;

            margin: 10px auto;

        }

        box h1{

            height: 40px;

            color: #fff;

            padding-left: 15px;

            background-color: blue;

            font-size: 25px;

        }

        ul li{

            padding-left: 15px;

            list-style-type: none;

            line-height: 45px;

            border-bottom: 1px dashed #ccc;

        }

        ul li:last-child{

            border-bottom: none;

        }

    </style>

</head>

<body>

    <div class="box">

        <h1>

            祝福冬奥

        </h1>

        <ul>

          <li>贝克汉姆</li>

          <li >姚明</li>

          <li>张宏</li>

          <li>肖恩怀特</li>

      </ul>

      </div>

    <script src="/jquery-1124js"></script>

    <script>

        / jQuery的链式调用 /

        / $('div')$('div')text('我是学生')css('color','red')attr({name:'zhangsan',age:30}) /

        / 链式调用的原理jq里面的方法都会return this 把当前调用者return出去实现链式调用 /

        / $('ul li')first()css('background','yellow')end()eq(1)css('background','red') /

        / 获取的只是content里面的距离,不包括padding margin border里面的距离 /

        / 返回以像素为单位的top和left的坐标,仅对可见元素有效 /

        / top和left值都会包括自己的margin和父元素border的值 /

        consolelog($('div2')offset()top);

        consolelog($('ul')width());

        consolelog($('ul')height());

        / offsetParent 返回最近的自己定位的祖先元素 /

        consolelog($('div2')offsetParent());

        / position() 返回第一个匹配元素相对于父元素的位置 /

        consolelog($('div')position());

        / scrollLeft([position]) 参数可选,设置返回匹配元素相对滚动条左侧的偏移/

        / 设置滚动条的距离 /

        $(window)scrollLeft(100)

        / 获取滚动条的距离 /

        $(window)scroll(function(){

            consolelog($(document)scrollLeft());

        })

    </script>

<style>

        div1{

            width: 300px;

            height: 300px;

            border: 1px solid red;

        }

        div2{

            width: 200px;

            height: 200px;

            background-color: red;;

        }

    </style>

</head>

<body>

    <div class="div1">

        <div class="div2">

        </div>

    </div>

    <script src="/jquery-1124js"></script>

    <script>

        / mouseenter mouseleave 在进入子元素区域时不会触发

           mouseover 和mouseout 会触发 /

        / $('div1')mouseenter(function(){

            $(this)css('background','green')

        })

        $('div1')mouseleave(function(){

            $(this)css('background','yellow')

        }) /

        / 由mouseenter 和mouseleave组成 /

        $('div1')hover(function(){

            $(this)css('background','yellow')

            consolelog(1);

        })

    </script>

<style>

        {

            margin: 0%;

            padding: 0%;

        }

        box{

            width: 340px;

            border: 1px solid blue;

            margin: 10px auto;

        }

        box h1{

            height: 40px;

            color: #fff;

            padding-left: 15px;

            background-color: blue;

            font-size: 25px;

        }

        ul li{

            padding-left: 15px;

            list-style-type: none;

            line-height: 45px;

            border-bottom: 1px dashed #ccc;

        }

        ul li:last-child{

            border-bottom: none;

        }

    </style>

</head>

<body>

    <div class="box">

        <h1>

            祝福冬奥

        </h1>

        <ul>

          <li>贝克汉姆</li>

          <li >姚明</li>

          <li>张宏</li>

          <li>肖恩怀特</li>

      </ul>

      </div>

      <script src="/jquery-1124js"></script>

      <script>

        / $('li:eq(0)')mouseenter(function(){

            $(this)css('background','red')

        })

        $('li:eq(0)')mouseout(function(){

            $(this)css('background','')

        }) /

        $('li')hover(function(){

            / css('background','')不会改变元素原来bgc样式 /

            $('li')first()css('background','red')siblings()css('background','')

        })

        $('li:eq(1)')mouseenter(function(){

            $(this)css('background','yellow')

        })

        $('li:eq(1)')mouseout(function(){

            $(this)css('background','')

        })

      </script>

<style>

        box{

            margin: 30px auto;

            width: 500px;

            height: 300px;

            border: 1px solid cyan;

            position: relative;

        }

        img-list img{

            width: 500px;

            height: 300px;

            display: block;

            position: absolute;

            left: 0;

            top: 0;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="img-list">

            <img src="/imgs/1jpg" alt="">

            <img src="/imgs/2jpg" alt="">

            <img src="/imgs/3jpg" alt="">

            <img src="/img/4jpg" alt="">

        </div>

    </div>

    <button style="margin-left: 450px;" class="left">后退</button>

    <button class="right">前进</button>

    <script src="/jquery-1124js"></script>

    <script>

        / 定时器 过2s 显示一张图 显示最后一张图的时候再跳回第一张 /

        / let i = 0

        $('img')eq(0)show()siblings()hide();

        setInterval(function(){

          i++;

          if(i==$('img')length){

              i=0

          } /

          / 淡入淡出 /

          / $('img')eq(i)fadeIn('slow')siblings()fadeOut('slow')

        },2000) /

        let i = 0;

        let timer = null

        $('img')eq(i)show()siblings()hide();

        / 自动播放 /

        show();

        $('left')click(function(){

            / 先清空定时器 阻止自动播放 /

            clearInterval(timer);

            i--;

            / 防止减到-1找不到对应的 /

            if(i == -1){

              i=$('img')length - 1

            }

            / 展示当前对应的其他淡出 /

            $('img')eq(i)show()siblings()hide();

            / 继续开始自动播放 /

            show();

        })

        $('right')click(function(){

            / 先清空定时器 阻止自动播放 /

            clearInterval(timer);

            i++;

            / 防止减到-1 找不到对应的 /

            if(i==$('img')length){

              i=0

            }

            / 展示当前对应的其他淡出 /

            $('img')eq(i)show()siblings()hide();

            / 继续开始自动播放 /

            show()

            / 定时器 过两秒 显示一张图 显示最后一张图的时候

            再跳到第一张 /

        })

        function show(){

            timer = setInterval(function (){

                i++;

                if(i == $('img')length){

                   i = 0

                }

                / fadeIn 淡入 fadeOut淡出 /

                $('img')eq(i)fadeIn()siblings()fadeOut();

            },2000)

        }

 </script>

<body>

    用户名:<input type="text"><br>

    密码: <input type="password">

    <script src="/jquery-1124js"></script>

    <script>

        / 按下键盘 /

        / $('input[type=text]')keydown(function(){

            alert('我按下了')

        }) /

        / 抬起键盘 /

        / $('input[type=password]')keyup(function(){

            alert('我抬起了')

        }) /

        / keypress 连续敲击键盘 /

        / $('input[type=text]')keypress(function(){

            alert('连续打字')

        }) /

        $(window)keyup(function(e){

            if(ekeyCode==13){

                alert('已提交')

            }

        })

    </script>

</body>

以上就是关于动态加载的jquery报错怎么解决全部的内容,包括:动态加载的jquery报错怎么解决、jquery中鼠标移上和移开的动作是什么、jQ中鼠标滚轮事件事件吗等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/10154666.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-05
下一篇2023-05-05

发表评论

登录后才能评论

评论列表(0条)

    保存