问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JavaScript中这个jQuery,如果用JavaScript写,怎么写?

头像
特爱点赞的野蛮人
    1.2k8124165
    头像
    张小猪粉鼻子
      2.9k2512

      不要建议我问这个简单的问题哈,我自己在网上学的,也没人问,也没经验什么的,你帮我解答了,我对着自己慢慢查,我就了解了,谢谢了!
      我会做一个div 元素的 mouseover 事件,这种整个页面的,我就不会了.

      <script>
    $(document).ready(function() {
        $(document).mousemove(function(event) { 
            $("span").text("X: " + event.pageX + ", Y: " + event.pageY); 
        });
    });
</script>
<body>

    <p>The mouse pointer position is at: <span></span></p>

</body>
      javascripthtmlcss
      阅读 4k
      4 个回答
      得票最新
      头像
      yeahs
        302512
        ✓ 已被采纳
        <script>
    window.onload = function() {
        document.onmousemove = function(event) {
            var spanEl = document.getElementsByTagName('span')[0];
            var text = "X: " + event.pageX + ", Y: " + event.pageY;
            spanEl.innerHTML = text;
        }
    }
<script>
        头像
        张小猪粉鼻子
          2.9k2512

          帮题主调了一下缩进，不然看着好蛋疼。。。
          题主说的用 JavaScript 写应该意思是原生 JS 吧，其中用到的几个方法:

          • 获取节点 - getElementById getElementsByClassName getElementsByTagName querySelector 等

          • 监听事件 - addEventListener

          • dom 加载完毕 - readystatechange 或者 DOMContentLoaded

          • 获取坐标 - 鼠标事件的事件对象

          • 修改节点文本 - textContent

          题主可以先自己尝试一下。

          头像
          落山基胡扔队
            5052724
            <script>
    window.onload = function() {
        document.onmousemove = function(event) {
            var spa = document.getElementsByTagName('span')[0];
            var text = "X: " + event.pageX + ", Y: " + event.pageY;
            spa.innerHTML = text;
        }
    }
<script>
            头像
            张亚涛
              5.3k2412
              <script>
    var ready = (function () {
            var readyState = false;
            return function (callback) {
                if (readyState) {
                    callback();
                }
                if (window.addEventListener) {
                    window.addEventListener('DOMContentLoaded', function () {
                        readyState = true;
                        callback();
                    }, false);
                } else {
                    var complete = function () {
                        if (document.readystate == 'interactive' || document.readystate == 'complete') {
                            readyState = true;
                            callback();
                            clearInterval(timer)
                        }
                    };
                    var timer = setInterval(function () {
                        try {
                            document.documentElement.doScroll('left');
                            clearInterval(timer);
                            readyState = true;
                            document.detach('readystatechange', complete);
                            callback();
                        }
                        catch (ex) {
                        }
                    }, 50);
                    document.attachEvent('readystatechange', complete);
                }
            }
        })();
        ready(function () {
            // 获取span没有必要放到onmousemove里面.如果放到里面每次触发鼠标事件都会获取元素,完全没有那个必要,只获取一次即可.
            var spa = document.getElementsByTagName('span')[0];
            document.onmousemove = function(event) {
                spa.innerHTML = "X: " + event.pageX + ", Y: " + event.pageY;
            }
        })
<script>
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题