jQuery DOM

请尊重知识，请尊重原创更多资料参考请见

http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1

jQuery DOM基础

1.对元素内容的获取和修改: 表单用value()，普通元素用html()和text().

html() html(value)设置和获取html内容，有html标签会自动解析。
text() text(value) 设置和获取文本内容，有html标签会自动转义。
val() val(value) 设置和获取表单文本内容
设置单选、复选框和下拉列表的被选定状态：可以通过数组传递操作

$('input').val(['男','女']);//value值是这些的将被选定。

2.获取、设置属性值

$('#box').attr('id');//获取#box的ID属性的值：box

$('div').attr('title', '我是域名');//设置div的title属性值：我是域名

$('div').attr({

'title' : '我是域名',

'class' : 'red', //通过对象传递键值对的方式，设置多个属性值。class不建议用attr来设置，后面有功能更强大和更丰富的方法代替

'data' : '123'

});

$('div').attr('title', function (index, value) {

return '原来的title是：' + value + '，现在的title是：我是' + (index+1) + '号域名';

}); //通过函数返回值来设置属性值。函数可传递两个参数，value为原来的属性值，index为div的索引，如果有多个div的话，index就有用。

$('div').html(function (index, value) {

return value + '<em>www.li.cc</em>';

}); //同理，html也可以通过函数返回值来设置html内容。

$('div').removeAttr('title'); //删除属性。

3.css操作方法

$('div').css('color'); //获取元素行内 CSS 样式的颜色
$('div').css('color', 'red'); //设置元素行内 CSS 样式颜色为红色
var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象

$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组

alert(attr + ':' + value);

});

$('div').each(function (index, element) { //jQuery对象的数组遍历方法。index 为索引，element 为元素 DOM

alert(index + ':' + element);

});

多个css样式，可以通过传递对象键值对的方式

$('div').css({

'background-color' : '#ccc',

'color' : 'red',

'font-size' : '20px'

});

一般需要计算得到的值，通过函数返回值设置。

$('div').css('width', function (index, value) { //index为第几个div，value为原始值

return (parseInt(value) - 500) + 'px';

})

添加、删除class

- $('div').addClass('red'); //添加一个 CSS 类

- $('div').addClass('red bg'); //添加多个 CSS 类

- $('div').removeClass('bg'); //删除一个 CSS 类

- $('div').removeClass('red bg'); //删除多个 CSS 类

我们还可以结合事件来实现 CSS 类的样式切换功能。

- $('div').click(function () { //当点击后触发

- $(this).toggleClass('red size'); //单个样式多个样式均可。默认样式和指定样式之间的切换（默认样式即浏览器本身的样式）。

- });

width()和height()方法：

$('div').css('width')=$('div').width()+'px' //区别：第一个有单位，第二个没有单位

$('div').width(function(index,value){

return value-500+'px' //通过匿名函数的返回值赋值。px可以不加。

});

内外边距和边框尺寸方法：

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); //设置当前滚动条的位置

巴特西

jQuery DOM

最新文章

热门文章