jquery dom操作 – 炮渣日记

、1、元素宽高

var box = $('#box');

// 原生不能获取隐藏元素的宽高，但是jq可以
// 获取元素的宽
console.log(box.css('width')); // 100px    有单位，同getStyle
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 (原生无对应)

// 设置元素的宽
console.log(box.css('width', 200));
console.log(box.width(200));
console.log(box.innerWidth(200));
console.log(box.outerWidth(200));
console.log(box.outerWidth(200, true));

// 获取可视区的宽高
alert($(window).width())
alert($(window).height())

// 获取文档的宽高
alert($(document).width())
alert($(document).height())

2、元素的位置

jQuery对象.offset();

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

var box3 = $('.box3');

// 原生有getPos
console.log(box3.offset()); // {top: 108, left: 88}

jQuery对象.position();

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

3、滚动条

获取滚动条

jQuery对象.scrollTop()

jQuery对象.scrollLeft()

设置滚动条

jQuery对象.scrollTop(值)

jQuery对象.scrollLeft(值)

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

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

4、创建节点

$('html 片段')

        // 格式：$(html 片段); // 创建节点
        $(function () {
            // 创建div元素
            $('<div></div>').appendTo('body');

            $('<div title="今天天气真好啊" abc="稍稍有点冷">平头哥</div>').appendTo('body');

        })

5、添加节点

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

元素.appendTo(目标);

目标.append(元素);

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

元素.prependTo(目标);

目标.prepend(元素);

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

元素.insertAfter(目标);

目标.after(元素);

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

元素.insertBefore(目标);

目标.before(元素);

6、替换节点

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

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

7、删除节点

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

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

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

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

// jQuery元素.remove(); 删除，返回被删除的元素，方便下次使用（不保留被删除元素之前的事件）
// jQuery元素.detach(); 删除，返回被删除的元素，方便下次使用（保留被删除元素之前的事件）
// jQuery元素.empty(); 清空

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

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

// remove
btn.eq(0).click(function () {
    var v = ul.remove();
    // console.log(v);

    setTimeout(function () {
        v.appendTo('body');
    }, 3000);
});

// detach
btn.eq(1).click(function () {
    var v = ul.detach();
    // console.log(v);

    setTimeout(function () {
        v.appendTo('body');
    }, 3000);
});

btn.eq(2).click(function () {
    ul.empty(); // 清空元素内容，推荐用

    // ul.html('');
});

8、克隆节点

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

// jQuery对象.clone(true/false);
// 参数为true，可以克隆元素之前的事件

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

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

btn.click(function () {
    // var v = ul.clone(); // 没有参数默认为false，即不能克隆之前的事件
    var v = ul.clone(true); // 可以克隆元素之前绑定的事件

    // console.log(v);
    v.appendTo('body');
});