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())
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}
jQuery对象.scrollTop()
jQuery对象.scrollLeft()
设置滚动条
jQuery对象.scrollTop(值)
// 在window绑定滚动事件
$(window).scroll(function () {
// 滚动的时候,打出滚动条的位置
console.log($(window).scrollTop()); // 获取
});
// 在页面点击一下,让滚动条的位置到500
$(document).click(function () {
$(window).scrollTop(500);
});
$(‘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(元素);
被替换的元素.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(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');
});