jQuery的遍历、jQuery中的BOM以及DOM操作

$.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 });

// - $.map(): 遍历对象, 把处理结果返回给数组
// - `$.map(arr, function () { item, index });`
var s = $.map($('li'), function (item, index) {
    
    
    console.log(index, item);
    // return 1;
    return item;
});
console.log(s);

var arr = [1, 2, 3, 4, 5, 6];
var s = $.map(arr, function (item, index) {
    
    
    console.log(index, item);
    // return index;
    if (item > 3) {
    
    
        return item;
    }
});
console.log(s); // [4, 5, 6]

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); // [{name: 'lilei',age: 20}]

$.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'); // 触发事件

jQuery的遍历、jQuery中的BOM以及DOM操作

$.each()

$.map()

$.extend()

jQuery中的BOM

元素的宽高

元素的位置

滚动条

DOM操作

创建节点

插入节点

删除节点

复制节点

替换节点

事件对象

事件绑定

猜你喜欢