jquery获取div坐标

jquery获取div坐标,第1张

你好,根据你的代码是没什么问题的,在拼px的时候有误,多了双引号,另外你代码可以做以下优化

$(document)ready(function () {  

$('#aboutUs contact maps li')mousemove(function (e) {  

    $('div',this)css({

        "left":epageX+'px',

        "top":epageY+'px'

    });   

 })});

如果还不可以,请追问我

在可编辑的DIV里,加上blur事件,就是当失去焦点时,获取失去焦点的DIV的ID,然后保存到全局变量里,这样你在做添加时,可以直接读取这个全局变量来获取最后是哪个DIV失去了焦点。

用jquery的话,一句代码就能为所有的DIV添加上失去焦点事件:

$("div")on("blur",function(){

    var id=$(this)prop("id");

});;

上面是为所有的DIV绑定了事件,但你可以在实际中,根据自己的需要来“缩小范围”,比如你要监听的只是其中包含“edit”样式的DIV,改成:

$("divedit")on("blur",function(){

    var id=$(this)prop("id");

});

你要插入的话,要不要记录光标所在的位置?

<head>

<meta charset="UTF-8">

<title>无缝滚动</title>

<style type="text/css">

body,ul,li{margin:0;padding:0}

ul{list-style:none;}

slide{

width:500px;

height:100px;

border:1px solid #ddd;

margin:20px auto 0;

position:relative;

overflow:hidden;

}

slide ul{

position:absolute;/相对于slide进行绝对定位/

width:1000px;/比slide宽度大一倍,做这种连续滚动效果的时候,要在后面把内容复制一份/

height:100px;

left:0;/可以改变该值让其动起来/

top:0;

}

slide ul li{

width:90px;

height:90px;

margin:5px;

background-color:#ccc;

line-height:90px;

text-align: center;

font-size:30px;

float:left;

}

btns{

width:500px;

height:50px;

margin:10px auto 0;

}

</style>

<script type="text/javascript" src="/js/jquery-1124minjs"></script>

<script type="text/javascript">

$(function(){

var $ul = $('#slide ul');

var left = 0;

var deraction = 2;//每次滚动的距离

//内容为两套li

$ulhtml($ulhtml() + $ulhtml());

//反复循环定时器,30ms动一下可以看起来比较平滑

var timer = setInterval(move, 30);

function move(){

left -= deraction;

//当第2套li完全显示出来的时候,整个移回原点重新移动,实现向左连续滚动

if(left < -500){

left = 0;

}

//瞬间跳回,实现向右连续滚动

if(left > 0){

left = -500;

}

$ulcss({left: left});

}

$('#btn1')click(function() {

deraction = 2;

});

$('#btn2')click(function() {

deraction = -2;

});

$('#slide')mouseover(function() {

clearInterval(timer);

});

$('#slide')mouseout(function() {

timer = setInterval(move,30);

});

})

</script>

</head>

<body>

<div class="btns">

<input type="button" name="" value="向左" id="btn1">

<input type="button" name="" value="向右" id="btn2">

</div>

<div class="slide" id="slide">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

</div>

</body>

鼠标移入要做的事情mouseover

鼠标移出要做的事情mouseout

<head>

    <meta charset="UTF-8">

    <title>鼠标移入移出</title>

    <style type="text/css">

        box{

            width: 200px;

            height: 200px;

            background-color: gold;

            margin: 100px auto 0;

        }

        son{

                width: 100px;

                height: 100px;

                background-color: green;

        }

    </style>

    <script type="text/javascript" src="js/jquery-1124minjs"></script>

    <script type="text/javascript">

         $(function(){

        /进入子元素也触发/

        /$('#div1')mouseover(function() {

        $(this)animate({marginTop: 50});//stop()

        });

        $('#div1')mouseout(function() {

        $(this)animate({marginTop: 100});//stop()

    });/

        /进入子元素不触发/

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

        $(this)stop()animate({marginTop: 50});//

        });

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

        $(this)stop()animate({marginTop: 100});//

        });/

        /通过hover(mouseenter+mouseleave)实现简写/

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

        $(this)stop()animate({marginTop: 50});

        }, function() {

        $(this)stop()animate({marginTop: 100});

            });

        })

    </script>

</head>

<body>

        <div id="div1" class="box">

                <div class="son"></div>

        </div>

</body>

创建一个子元素 促使鼠标移入到子元素才能移动

是由于时间mouse影响

则要使用mouseenter和mouseleave进行改变

也可以运用hover简化

autofocus

表单元素的值发生变化

<head>

                <meta charset="UTF-8">

                <title>input框事件</title>

                <style type="text/css">

                </style>

                <script type="text/javascript" src="js/jquery-1124minjs"></script>

                <script type="text/javascript">

                     $(function(){

                    // //一开始就获取焦点,相当于设置了autofocus自动获取焦点了(HTML5 新增表单控件属性)

                    // $('#txt01')focus();

                    // //文本框获取焦点的时候(有光标闪烁的时候)

                    // $('#txt01')focus(function() {

                    // alert('focus');

                    // });

                    // //失去焦点的时候(光标离开的时候)

                    // $('#txt01')blur(function() {

                    // alert('blur');

                    // });

                    // //输入框内容发生变化的时候,失去焦点后触发,可用于注册时验证用户名是否已存在

                    // $('#txt01')change(function() {

                    // alert('change');

                    // });

                    //松开键盘按键就触发

                    $('#txt01')keyup(function() {

                    alert('keyup');

                    });

                })

                </script>

</head>

<body>

        <input type="text" id="txt01">

</body>

<head>

            <meta charset="UTF-8">

            <title>jQuery其他事件</title>

            <style type="text/css">

            </style>

            <script type="text/javascript" src="js/jquery-1124minjs"></script>

            <script type="text/javascript">

            // // JS原生写法

            // windowonload = function(){

            // }

            // / /jQuery写法,等同于上面写法

            // $(window)load(function(){

            // })

            // //ready的写法

            // $(document)ready(function(){

            // })

            // //ready的简写

            // $(function(){

            // })

            // 窗口改变尺寸的时候,会高频触发

            $(window)resize(function() {

            consolelog('3');

            });

            </script>

</head>

<body>

            <div id="div1"></div>

</body>

鼠标移入要做的事情mouseover

鼠标移出要做的事情mouseout

div是没有value属性的,但是我们可以给它加上去也是可以获得的,在这里value只是一个自定义参数。

html代码

<div class="store"  value="tanyu"></div>

jq代码

$(function(){

$("store")click(function(){

alert($(this)attr('value'));

});

});

首先,要用jquery获取到这个元素,用attr方法可以输出这个元素的标签属性。例如:

<div id='id1' class='class2'></div>

$('#id1') 获取到这个元素,有很多种获取元素方法,可参考jquery的文档。

$('#id1')attr('id'),就是获取到ID

$('#id1')attr('class'),就是获取到整个的class样式,多个样式可以自行用空格split一下。

以上就是关于jquery获取div坐标全部的内容,包括:jquery获取div坐标、jquery怎么样可以监听到最近一次失去焦点的dom、鼠标移出移入、 focus获取焦点和blur失去焦点的运用等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址: http://outofmemory.cn/web/9781209.html

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

发表评论

登录后才能评论

评论列表(0条)

保存