三、DOM和CSS操作（jQuery）

一、DOM简介

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

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

二、设置元素及内容

三、元素属性操作

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

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

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

四、元素样式操作

五、css方法

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

});

 

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

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

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

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

 

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

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

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

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