jQuery基础知识整理

目录

1、class操作

2、css操作

3、元素宽高

4、元素的位置

5、滚动条

6、操作节点

7、事件

---

1、class操作

• jQuery元素.addClass('class名'); 添加 一次可以添加多个

• jQuery元素.removeClass('class名'); 删除 一次可以删除多个

• jQuery元素.toggleClass('class名'); 切换 如果有这个class，则删除，如果没有，则添加

• jQuery元素.hasClass('class名'); 查找是否有，返回布尔值

2、css操作

• jQuery元素.css('样式属性', '值'); // 设置

• jQuery元素.css('样式属性'); // 获取

• jQuery元素.css({'样式属性1': '值1', '样式属性2': '值2', ...}); // 参数为对象，可以一次设置多个

3、元素宽高

①获取元素的宽

元素.css('width')   --------   有单位，同getStyle

元素.width()  ---------------   ---    原生没有对应的

元素.innerWidth（）-----------------width+padding   与原生(clientWidth)相对应

元素.outerWidth （）--------------- width+padding+border  与原生（offsetWidth）相对应

元素.outerWidth(true) ------------------width+padding+border+margin   (原生无对应)

②设置元素的宽：向括号里面加属性值即可

4、元素的位置

jQuery对象.offset(); --------返回一个对象，有left和top属性，元素相对于文档的距离。

jQuery对象.position();-----返回元素距它最近的有定位属性的父级的距离，如果没有定位的父级，则返回到body的距离(相当于原生的offsetLeft  offsetTop)

5、滚动条

获取滚动条

• jQuery对象.scrollTop()

• jQuery对象.scrollLeft()

设置滚动条

• jQuery对象.scrollTop(值)

• jQuery对象.scrollLeft(值)

6、操作节点

①创建节点     格式：$(html 片段); // 创建节点

②添加节点

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

• 元素.appendTo(目标);

• 目标.append(元素);

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

• 元素.prependTo(目标);

• 目标.prepend(元素);

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

• 元素.insertAfter(目标);

• 目标.after(元素);

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

• 元素.insertBefore(目标);

• 目标.before(元素);

③替换节点

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

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

④删除节点

• jQuery对象.remove(); 返回被删除元素的引用，不保留之前的事件

• jQuery对象.detach(); 返回被删除元素的引用，保留之前的事件

• jQuery对象.empty(); 清空元素，删除元素的子孙节点

⑤克隆节点

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

7、事件

①事件对象

// 事件对象：当一个事件发生的时候，跟这个事件有关的一些详细信息，保存在一个对象中，这个对象就是事件对象（event对象  和  事件函数的第一个参数）
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; // 阻止默认事件 + 阻止冒泡的操作
});

②事件的绑定

• 格式：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);

③时间的取消

• 格式：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'); // 解绑多个

④事件的命名空间

var box = $('#box');

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

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

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

⑤事件代理

• 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); // 事件绑定的对象
})

⑥一次性事件

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

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

var box = $('#box');

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

⑦合成事件

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

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

var box = $('#box');

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

⑧滑上事件

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

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

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

</script>