jQuery事件

最新推荐文章于 2025-04-03 13:38:14 发布

weiweiweb888

最新推荐文章于 2025-04-03 13:38:14 发布

阅读量439

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/weiweiweb888/article/details/128328067

版权

3、元素宽高

var box = $('#box');

// 相对原生来讲，它还可以获取隐藏元素的宽高

// 获取
console.log(box.width()); // 100 width
console.log(box.innerWidth()); // 120 width+padding             clientWidth
console.log(box.outerWidth()); // 122 width+padding+border      offsetWidth
console.log(box.outerWidth(true)); // 142 width+padding+border+margin


// 设置
box.width(200);
box.innerWidth(200);
box.outerWidth(200);
box.outerWidth(200, true);


// ----------------------------------
// 可视区宽高
alert($(window).width());
alert($(window).height());


// 文档宽高，如果比可视区小，则取可视区高，如果比可视区大，则取自己的大
alert($(document).width());
alert($(document).height());

4、元素的位置

jQuery对象.offset();

// 相当于自己封装的getPos
// jQuery对象.offset(); 返回元素相对于文档的距离。
// 注意：该方法返回一个对象，这个对象有 left 和 top 两个属性。left 代码到文档左边的距离，top 代表到文档顶部的距离。
console.log(box3.offset()); // {top: 108, left: 88}

jQuery对象.position();

// 相当于原生的offsetLeft offsetTop
// jQuery对象.position(); 返回离它最近的有定位属性的父级的距离，如果没有定位的父级，返回到body的距离
console.log(box3.position()); // {top: 50, left: 40}

5、滚动条

获取滚动条
- jQuery对象.scrollTop()
- jQuery对象.scrollLeft()
设置滚动条
- jQuery对象.scrollTop(值)
- jQuery对象.scrollLeft(值)

// 在window绑定滚动事件
$(window).scroll(function () {
    // 滚动的时候，打出滚动条的位置
    console.log($(window).scrollTop()); // 获取
});


// 在页面点击一下，让滚动条的位置到500
$(document).click(function () {
    $(window).scrollTop(500);
});

6、创建节点

$(‘html 片段’)

// 创建没有内容的元素
$('<div></div>').appendTo('body');

// 创建有内容有属性
$('<div id="box" class="abc" title="必须的">小王自愿放手机</div>').appendTo('body');


$(`<nav>
    <div class="main">
        <img src="./img/index/logo.png" alt="" class="logo">
        <ul class="">
            <li class="check"><a href="./index.html">首页</a></li>
            <li><a href="./pages/online.html">同步课程</a></li>
            <li><a href="javascript:;">在线练习</a></li>
            <li><a href="javascript:;">精品课程</a></li>
        </ul>
    </div>
</nav>`).appendTo('body');

7、添加节点

1、将元素插入目标中，作为子元素，放在最后

元素.appendTo(目标);
目标.append(元素);

2、将元素插入目标中，作为子元素，放在最前

元素.prependTo(目标);
目标.prepend(元素);

3、将元素插入到目标元素的后面，作为兄弟元素

元素.insertAfter(目标);
目标.after(元素);

4、将元素插入到目标元素的前面，作为兄弟元素

元素.insertBefore(目标);
目标.before(元素);

8、替换节点

被替换的元素.replaceWith(新的替换的元素);
新的替换的元素.replaceAll(被替换的元素);

9、删除节点

jQuery对象.remove(); 返回被删除元素的引用，不保留之前的事件
jQuery对象.detach(); 返回被删除元素的引用，保留之前的事件
jQuery对象.empty(); 清空元素，删除元素的子孙节点

<button>remove</button>
<button>detach</button>
<button>empty</button>
<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

var btn = $('button');
var ul = $('ul');

ul.click(function () {
    console.log('点我了');
});

// remove
btn.eq(0).click(function () {
    var u = ul.remove(); // 删除，返回被删除元素的引用
    setTimeout(function () {
        u.appendTo('body'); // 2s以后，又添加到body中
    }, 2000);
});


// detach
btn.eq(1).click(function () {
    var u = ul.detach(); // 删除，返回被删除元素的引用
    setTimeout(function () {
        u.appendTo('body'); // 2s以后，又添加到body中
    }, 2000);
});

// empty
btn.eq(2).click(function () {
    ul.empty(); // 推荐
    // ul.html('');
});

10、克隆节点

jQuery对象.clone(参数); 参数可选。布尔值。规定是否复制元素的所有事件处理

var ul = $('ul');

ul.click(function () {
    console.log('点我了');
});

$('button').click(function () {
    ul.clone(true).appendTo('body'); // 参数true，会克隆之前的事件
});

11、事件

1、事件对象

$('#box').click(function (ev) {
    // console.log(ev); // jQuery封装好的事件对象
    // console.log(ev.originalEvent); // 返回原生的事件对象

    console.log(ev.pageX, ev.pageY); // 鼠标到文档的距离
    console.log(ev.clientX, ev.clientY); // 鼠标到可视区的距离
    console.log(ev.which); // 相当于 keyCode，但比 keyCode 强大，还可以记录鼠标的键值，返回 1\2\3 即左\中\右;

    console.log(ev.target); // 事件源
    console.log(ev.delegateTarget); // 事件绑定的对象
    console.log(ev.type); // 事件类型

    console.log(ev.ctrlKey); // 返回 true 或 false，相应的 ctrl 键是否按下
    console.log(ev.shiftKey); // 返回 true 或 false，相应的 shift 键是否按下
    console.log(ev.altKey); // 返回 true 或 false，相应的 alt 键是否按下

    ev.preventDefault(); // 阻止默认事件
    ev.stopPropagation(); // 阻止冒泡的操作
    return false; // 阻止默认事件 + 阻止冒泡的操作
});

2、事件的绑定

格式：jQuery对象.on(‘事件名’, 函数);

// jQuery对象.事件名(函数);
// jQuery对象.on('事件名', 函数);

var box = $('#box');

// 1、普通事件绑定
box.on('click', function () {
    console.log('点我了');
    console.log(this); // 触发这个事件的元素，且是原生的
})


// 2、一次绑定多个事件
box.on('mouseover mouseout click', function () {
    console.log('触发了');
})

// 3、写成对象的形式
box.on({
    mouseover: function () {
        console.log('滑上了');
    },
    mouseout: function () {
        console.log('滑离了');
    },
    click: function () {
        console.log('点击了');
    }
})


// 4、绑定自定义事件
box.on('abc', function () {
    console.log('我是自定义事件');
});
setTimeout(function () {
    box.trigger('abc'); // 自定义事件，需要trigger触发
}, 3000);

注意：获取节点或选择器会进行遍历操作，因此不要在绑定点击事件里再绑定事件。

   <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
<script>
    
    //如：使用选择器获取元素绑定事件
   $('ul').children().click(function() {
            $('ul').children().click(function() {
                console.log(this);//点一次会打印一次，点两次会打印两次。打n次打印n次
            });
        });
    
</script>

3、事件的取消

格式：jQuery对象.off(‘事件名’); // 没有参数，取消该元素上所绑定的全部事件

var box = $('#box');

box.on({
    mouseover: function () {
        console.log('滑上了');
    },
    mouseout: function () {
        console.log('滑离了');
    },
    click: function () {
        console.log('点击了');
    }
})

// box.off(); // 没有参数，解绑全部的事件
// box.off('click'); // 解绑click
box.off('mouseover mouseout'); // 解绑多个

4、事件的命名空间

var box = $('#box');

// 同一个元素的同一个事件，触发不同的函数

box.on('click.a', function () {
    console.log(1);
})
box.on('click.b', function () {
    console.log(2);
})

// 需求：解绑打印2的
box.off('click.b');

5、事件代理

jQuery对象父级.on(‘事件’, ‘子级’, 函数);

// jQuery对象父级.on('事件', '子级', 函数);
// 函数中的this即点击的哪个子级元素，且是原生的

$('ul').on('click', '.abc', function (ev) {
    // console.log('点我了');
    // console.log(this);
    $(this).css('background', 'red');


    console.log(ev.target); // 事件源
    console.log(ev.delegateTarget); // 事件绑定的对象
})

6、一次性事件

jQuery元素.one(‘事件名’, 回调函数);

// jQuery对象.one('事件名', 函数)

var box = $('#box');

box.one('click', function () {
    console.log('点我了');
})

7、合成事件

jQuery元素.hover(滑上执行的函数, 滑离执行的函数);

// 采用的是mouseenter mouseleave，而不同于mouseover mouseout

var box = $('#box');

box.hover(function () {
    console.log('滑上了');
}, function () {
    console.log('滑离了');
});

12、滑上事件

<div id="box">
    <span></span>
</div>
<script>
    var box = document.getElementById('box');
    var n = 0;

    // 冒泡
    // box.onmouseover = function () {
    //     n++;
    //     console.log(n);
    // }

    // 不冒泡
    box.onmouseenter = function () {
        n++;
        console.log(n);
    }

</script>