jQuery特殊属性操作(val方法,html方法与text方法,width方法与height方法, scrollTop与scrollLeft, offset方法与position方法)

jQuery特殊属性操作

val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

// 设置值
$("#name").val("张三");
// 获取值
$("#name").val();

【案例：京东搜索.html】

html方法与text方法

html方法相当于innerHTML text方法相当于innerText

// 设置内容
$("div").html("<span>这是一段内容</span>");
// 获取内容
$("div").html()

// 设置内容
$("div").text("<span>这是一段内容</span>");
// 获取内容
$("div").text()

区别：html方法会识别html标签，text方法会把内容直接当成字符串，并不会识别html标签。

width方法与height方法

设置或者获取高度

// 带参数表示设置高度
$("img").height(200);
// 不带参数获取高度
$("img").height();

获取网页的可视区宽高

// 获取可视区宽度
$(window).width();
// 获取可视区高度
$(window).height();

scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

// 获取页面被卷曲的高度
$(window).scrollTop();
// 获取页面被卷曲的宽度
$(window).scrollLeft();

【案例：仿腾讯固定菜单栏案例】
【案例：小火箭返航案例】

offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

// 获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
// 获取相对于其最近的有定位的父元素的位置。
$(selector).position();