$.each()
- $.each()可以遍历jQuery对象, 也可以遍历原生的数组和对象.
$.each(arr, function (index, item) {});
// - $.each()可以遍历jQuery对象, 也可以遍历原生的数组和对象.
// - `$.each(arr, function (index, item) {});`
// console.log($('li'));
var s = $.each($('li'), function (index, item) {
console.log(index, item);
});
console.log(s); // $('li')
var arr = [1, 2, 3, 4, 5, 6];
var s = $.each(arr, function (index, item) {
console.log(index, item);
});
console.log(s); // arr
var arr = [
{
name: 'lilei',
age: 20
},
{
name: 'hanmeimei',
age: 21
},
{
name: 'lucy',
age: 22
}
];
$.each(arr, function (index, item) {
console.log(index, item, item.name, item.age);
});
$.map()
- $.map(): 遍历对象, 把处理结果返回给数组
$.map(arr, function () { item, index });
var s = $.map($('li'), function (item, index) {
console.log(index, item);
return item;
});
console.log(s);
var arr = [1, 2, 3, 4, 5, 6];
var s = $.map(arr, function (item, index) {
console.log(index, item);
if (item > 3) {
return item;
}
});
console.log(s);
var arr = [
{
name: 'lilei',
age: 20
},
{
name: 'hanmeimei',
age: 16
},
{
name: 'lucy',
age: 17
}
];
var s = $.map(arr, function (item, index) {
console.log(index, item);
if (item.age >= 18) {
return item;
}
});
console.log(s);
$.extend()
- $.extend(): 将一个或多个对象合并到目标对象中
$.extend(target, src1, src2...);
将src1,src2…合并到target对象
// - $.extend(): 将一个或多个对象合并到目标对象中
// - `$.extend(target, src1, src2...);` 将src1,src2...合并到target对象
// var target = {
// name: 'lilei'
// };
// var src1 = {
// age: 18
// };
// $.extend(target, src1); // 把src1合并到target, 直接修改了target对象
// console.log(target, src1); // {name: "lilei", age: 18} {age: 18}
// var target = {};
// var src1 = {
// name: 'lilei'
// };
// var src2 = {
// age: 18
// };
// $.extend(target, src1, src2); // 把src1和src2合并到target
// console.log(target, src1, src2); // {name: "lilei", age: 18} {name: "lilei"} {age: 18}
var target = {};
var src = {
name: 'lilei',
age: 18,
gf: {
name: "hanmeimei",
age: 20
}
};
// $.extend(target, src); // 浅拷贝
// src.gf.age = 21;
// console.log(target, src); // { name: 'lilei', age: 18, gf: { name: "hanmeimei", age: 21 } } { name: 'lilei', age: 18, gf: { name: "hanmeimei", age: 21 } }
// 使用$.extend()第一参数为true, 实现深拷贝
$.extend(true, target, src);
src.gf.age = 21;
console.log(target, src); // // { name: 'lilei', age: 18, gf: { name: "hanmeimei", age: 20 } } { name: 'lilei', age: 18, gf: { name: "hanmeimei", age: 21 } }
jQuery中的BOM
元素的宽高
// 获取
console.log($('div').width()); // 200 width
console.log($('div').innerWidth()); // 300 width+padding
console.log($('div').outerWidth()); // 320 width+padding+border
console.log($('div').outerWidth(true)); // 420 width+padding+border+margin
// 设置
$('div').width(300); // width300
$('div').innerWidth(300); // width200 padding50
$('div').outerWidth(300); // width180 padding50 border10
$('div').outerWidth(300, true); // width80 padding50 border10 margin50
// 文档的宽高
console.log($(document).width());
console.log($(document).height());
// 可视区的宽高
console.log($(window).width());
console.log($(window).height());
元素的位置
- jQuery对象.offset(): jQuery对象相对于当前视窗的相对偏移
// jQuery对象.offset(): jQuery对象相对于当前视窗的相对偏移
console.log($('.box1').offset()); // {top: 8, left: 8}
console.log($('.box2').offset()); // {top: 108, left: 108}
console.log($('.box2').offset().left);
console.log($('.box2').offset().top);
滚动条
$(window).scroll(function () {
console.log($(window).scrollTop()); // 滚动时距离顶部的距离
console.log($(window).scrollLeft()); // 滚动时距离左侧的距离
});
DOM操作
创建节点
- 把HTML片段放进$(), 就可以创建对应的节点.
// - 把HTML片段放进$(), 就可以创建对应的节点.
console.log($('<div></div>'));
console.log($('<div>div</div>'));
console.log($('<div class="box">div</div>'));
插入节点
// 新节点.appendTo(目标): 把新节点作为子节点拼接到目标中
$('<div class="box1">box1</div>').appendTo($('body'));
// 目标.append(新节点): 把新节点作为子节点拼接到目标中
$('body').append($('<div class="box2">box2</div>'));
// 新节点.prependTo(目标): 把新节点作为子节点插入到目前中(最前面)
$('<div>box3</div>').prependTo($('body'));
// 目标.prepend(新节点): 把新节点作为子节点插入到目前中(最前面)
$('body').prepend($('<div>box4</div>'));
// 新节点.insertAfter(目标): 把新节点作为兄弟元素插入到目标节点后面
$('<div>box5</div>').insertAfter($('.box1'));
// 目标.after(新节点): 把新节点作为兄弟元素插入到目标节点后面
$('.box1').after($('<div>box6</div>'));
// 新节点.insertBefore(目标): 把新节点作为兄弟元素插入到目标节点前面
$('<div>box7</div>').insertBefore($('.box1'));
// 目标.before(新节点): 把新节点作为兄弟元素插入到目标节点前面
$('.box1').before($('<div>box8</div>'));
删除节点
- jQuery对象.remove(): 删除并返回元素
- jQuery对象.detach(): 删除元素并返回, 保留事件
- jQuery对象.empty(): 清除节点的所有内容(所有额后代元素)
复制节点
- jQuery对象.clone(): 复制节点, 接收一个参数, 参数为Boolean, true表示复制节点和事件, false表示不复制事件
// - jQuery对象.clone(): 复制节点, 接收一个参数, 参数为Boolean, true表示复制节点和事件, false表示不复制事件
$('.box').click(function () {
console.log('click');
});
// $('.box').clone().appendTo($('body')); // 只是复制节点,事件不会复制
$('.box').clone(true).appendTo($('body')); // 复制节点和事件
替换节点
- 被替换的元素.replaceWith(新元素): 使用新元素替换旧元素
- 新元素.replaceAll(被替换的元素): 使用新元素替换旧元素
// - 被替换的元素.replaceWith(新元素): 使用新元素替换旧元素
// - 新元素.replaceAll(被替换的元素): 使用新元素替换旧元素
$('div').replaceWith($('<span>span</span>'));
$('<span>span</span>').replaceAll($('div'));
事件对象
$('.box').click(function (event) {
console.log(event); // 事件对象
console.log(event.originalEvent); // 原生的事件对象
console.log(event.pageX, event.pageY); // 相对于文档的距离
console.log(event.clientX, event.clientY); // 相对于可视区的距离
console.log(event.offsetX, event.offsetY); // 相对于触发事件元素的左上角的距离
console.log(event.screenX, event.screenY); // 相对于屏幕的距离
console.log(event.target); // 事件源
console.log(event.delegateTarget); // 事件绑定的对象
console.log(event.ctrlKey);
console.log(event.shiftKey);
console.log(event.altKey);
event.preventDefault(); // 阻止默认事件
event.stopPropagation(); // 阻止冒泡
return false; // 阻止默认事件+阻止冒泡
});
事件绑定
// 从jQuery1.7开始, 使用 `on()` 替代了 `bind()`, `delegate()`, `live()`. `jQuery对象.on(事件类型, 事件函数)`
// $('div').on('click', function () {
// console.log('click1');
// });
// // 等同于:
// $('div').click(function () {
// console.log('click2');
// });
// 多个事件绑定同一个函数
// $('div').on('click mouseenter', function () {
// console.log('click mouseenter');
// });
// 可以使用对象的形式一次绑定多个事件
// $('div').on({
// click: function () {
// console.log('click');
// },
// mouseenter: function () {
// console.log('mouseenter');
// },
// mouseleave: function () {
// console.log('mouseleave');
// }
// });
// 自定义事件
$('div').on('haha', function () {
console.log('haha');
});
$('div').trigger('haha'); // 触发事件