三、DOM和CSS操作(jQuery)

一、DOM简介

1.D 表示的是页面文档 Document、O 表示对象,即一组含有独立特性的数据集合、M表示模型,即页面上的元素节点和文本节点。

2.DOM 有三种形式,标准 DOM、HTML DOM、CSS DOM,大部分都进行了一系列的封装,在 jQuery 中并不需要深刻理解它。

二、设置元素及内容

三、DOM和CSS操作(jQuery)

三、元素属性操作

三、DOM和CSS操作(jQuery)

attr()方法里的 function() {},可以不传参数。可以只传一个参数 index,表示当前元素的索引(从 0 开始)。也可以传递两个参数 index、value,第二个参数表示属性原本的值。

//删除指定的属性,这个方法就不可以使用匿名函数,传递 index 和 value 均无效。

$('div').removeAttr('title');    //删除指定的属性

四、元素样式操作

三、DOM和CSS操作(jQuery)

三、DOM和CSS操作(jQuery)

五、css方法

三、DOM和CSS操作(jQuery)

$('div').width();                       //获取元素的长度,返回的类型为 number
$('div').width(500);                       //设置元素长度,直接传数值,默认加 px
$('div').width('500pt');                       //同上,设置了 pt 单位
$('div').width(function (index, value) {        //index 是索引,value 是原本值
        return value - 500;                               //无须调整类型,直接计算

});

三、DOM和CSS操作(jQuery)

三、DOM和CSS操作(jQuery)

 

alert($('div').width());                      //不包含

alert($('div').innerWidth());              //包含内边距 padding

alert($('div').outerWidth());             //包含内边距 padding+边框 border

alert($('div').outerWidth(true));      //包含内边距 padding+边框 border+外边距 margin

三、DOM和CSS操作(jQuery)

 

$('strong').offset().left;                  //相对于视口的偏移

$('strong').position().left;              //相对于父元素的偏移

$(window).scrollTop();                 //获取当前滚动条的位置

$(window).scrollTop(300);           //设置当前滚动条的位置