jQuery中的DOM基础与CSS方法

jQuery中的DOM基础与CSS方法

一、jQuery中的一些DOM方法

1、html()方法

可以获得元素中的html内容 包括html标签

html()方法中的value属性 可以将里面的html内容

进行更改 会将里面的html中的标签自动进行解析

2、text()方法

可以获得元素中的文本内容

text()方法中的value值会将html代码进行转化显示在页面上 所以在text()

方法内部最好不要写html元素的标签名或者html的代码

3、val()方法 获得表单中的文本内容

val()方法中的value值可以改变表单中的文本的内容

val()方法中以数组的形式传入表单元素中的value值可以使它实现默认选

中的效果

代码如下：

html代码：

<input type="radio" value="男" />男

<input type="radio" value="女" />女

<input type="checkbox" value="编程" />编程

jQuery代码：

$(function(){

$('input').val(['男','编程']);

});

实现的效果为 男 编程为默认选中的状态

4、attr()方法

可以获得元素的属性里面的值

如：alert($('div').attr('class'));

可以获得div元素的class的名称

可以在里面传入两个参数 给元素添加属性

如：$('div').attr('title','我是标题');

可以给div元素添加title属性

可以通过键值对的方法向里面传入多个属性值

不要使用此方法向元素内部传入class属性与id属性

如：$('div').attr({

data:'123',

title:'我是标题',

});

可以在attr()方法中传入function(index,value)函数

index参数表示的是元素的索引值(索引值从0开始)

value参数表示的是获得元素内部有的值

5、removeAttr()方法

可以删除元素的属性值

二、css()方法

里面可以传入两个参数 第一个参数为属性名 第二个参数为属性值 改变元

素的CSS样式

1、里面可以以数组的形式传入多个属性值

1)可以通过for...in的方法获得里面的属性值

代码如下：

var box = $('div').css(['color''height']);

for(i in box){

alert(i + ':' + box[i]);

}

jQuery中提供了可以遍历数组的方法$.each()方法

2)each()方法

既可以遍历JavaScript中的数组 也可以遍历jQuery中的数组

里面可以传入function()函数 第一个参数为元素的值

function(attr,value);

attr参数为元素的属性名 value参数为元素的属性值

代码如下：

var box = $('div').css(['color''height']);

//each()方法遍历JavaScript中的数组

$.each(box,function(attr,value){

alert(attr + ':' + value);

});

each()方法遍历jQuery中的数组

function(index,element);

index参数为此元素的索引值(索引值从0开始)

element参数为获得的DOM对象

代码如下：

$('div').each(function(index,element){

alert(index + ':' + element);

});

2、css()方法中可以通过键值对的方法向一个css里面传入多个属性值

height、width只传入数字

代码如下：

$('div').css({

'color':'red',

'background-color':'pink',

'width':200,

'height':100,

});

3、css()方法中还可以传入function(index,value)

通过function()方法可以在里面进行一些计算 把全局的方法转换为局部的

方法

4、addClass()方法

可以通过class名添加class

多个class名之间用空格隔开

5、removeClass()方法

可以通过class名移除class

多个class名之间用空格隔开

6、toggleClass()方法

toggleClass()方法与click()联用

实现指定样式与默认样式之间的点击切换 多个class名之间用空格隔开

第二个参数可以传入布尔值 默认为真 false时则不可以点击切换

也可以自己定义点击的频率

代码如下：

var count = 0;

$('div').click(function(){

$(this).toggleClass('red size',count++%2==0);

});

7、width()方法、height()方法

可以获得元素的宽、高

可以在()内部直接传入数值 默认单位为px 可以对元素的属性值进行改变

也可以在()内部传入function(index,value) 对属性值进行设置

8、innerWidth()、innerHeight()方法

获得元素的宽度值 可以包括元素的padding值

9、outerWidth()、outerHeight()方法

获得元素的宽度值 包括元素的border、padding值

10、outerWidth(true)、outerHeight(true)方法

可以获得元素的border+padding+margin值

11、offset()方法

可以获得相对于窗口左上角的距离有.top.left两个值

12、position()方法

可以获得相对于父级元素的距离有.top.left两个值

13、scrollTop(value)方法

获得滚动条距离上面的距离 可以通过value值对其里面的默认值进行修改

直接传入数值就可以

14、scrollLeft(value)方法

获得滚动条距离左边的距离 可以通过value值对其里面的默认值进行修改

直接传入数值就可以