JQuery学习记录(二):基础DOM与CSS操作

上一节我们介绍了jquery的常规选择器,本节我们再来近探讨一下jquery基础DOM操作和CSS操作。如果掌握并熟练运用jquery基础DOM与CSS操作,我们可以让我们网站的页面更加丰富多彩。

本文来自小莫扎特博客www.plusminustsuchi.com 提供

一、jquery设置元素及内容 本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取 html 内容 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('#box').html();

本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取文本内容,会自动清理html标签

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('#box').text();

本文来自小莫扎特博客www.plusminustsuchi.com 提供

设置 html 内容

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('#box').html('<em>www.li.cc</em>');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

设置文本内容,会自动转义html标签 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('#box').text('<em>www.li.cc</em>'); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取表单内容 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('input').val(); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

设置表单内容

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('input').val('www.li.cc');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

二、jquery对元素属性操作 本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取属性的属性值 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').attr('title'); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

设置属性及属性值

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').attr('title', '我是域名');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

删除指定的属性 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').removeAttr('title'); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

通过匿名函数返回属性值

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').attr('title', function () { return '我是域名';});

本文来自小莫扎特博客www.plusminustsuchi.com 提供

可以接受两个参数

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').attr('title', function (index, value) {
return value + (index+1) + ',我是域名';
});

本文来自小莫扎特博客www.plusminustsuchi.com 提供

三、jquery对元素CSS样式操作 本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取元素行内 CSS 样式的颜色

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').css('color');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

设置元素行内 CSS 样式颜色为红色 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').css('color', 'red'); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

得到多个 CSS 样式的数组对象,逐个遍历出来 本文来自小莫扎特博客www.plusminustsuchi.com 提供

方法1: 本文来自小莫扎特博客www.plusminustsuchi.com 提供

var box = $('div').css(['color', 'height', 'width']);
for (var i in box) {
alert(i + ':' + box[i]);
}

本文来自小莫扎特博客www.plusminustsuchi.com 提供

方法2: 本文来自小莫扎特博客www.plusminustsuchi.com 提供

var box = $('div').css(['color', 'height', 'width']);
$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组
alert(attr + ':' + value);
}); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

设置多个样式,可以传递多个 CSS 样式的键值对 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').css({
'background-color' : '#ccc',
'color' : 'red',
'font-size' : '20px'
})

本文来自小莫扎特博客www.plusminustsuchi.com 提供

设置某个元素的 CSS 样式的值, 但这个值需要计算我们可以传递一个匿名函数。

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').css('width', function (index, value) {
return (parseInt(value) - 500) + 'px';
});

本文来自小莫扎特博客www.plusminustsuchi.com 提供

添加多个 CSS 类 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').addClass('red bg'); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

删除多个 CSS 类

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').removeClass('red bg'); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

判断样式 red存在 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').hasClass('red')

本文来自小莫扎特博客www.plusminustsuchi.com 提供

检查类,不存在则添加,存在则删除(切换)

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').toggleClass('red'); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

实现样式 1 和样式 2之间的切换

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').click(function () {
$(this).toggleClass(function () {
if ($(this).hasClass('red')) {
$(this).removeClass('red');
return 'green';
} else {
$(this).removeClass('green');
return 'red';
}
});
}); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

四、jquery框架的css方法

本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取元素的长度

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').width(); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取某个元素的长度

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').height(); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

设置元素长度(默认加 px)

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').width(500);

本文来自小莫扎特博客www.plusminustsuchi.com 提供

通过匿名函数设置某个元素的长度

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').width(function (index, value) {
return value - 500;
});

本文来自小莫扎特博客www.plusminustsuchi.com 提供

元素宽度,包含内边距padding

本文来自小莫扎特博客www.plusminustsuchi.com 提供

innerWidth() 本文来自小莫扎特博客www.plusminustsuchi.com 提供

元素高度,包含内边距padding 本文来自小莫扎特博客www.plusminustsuchi.com 提供

innerHeight()

本文来自小莫扎特博客www.plusminustsuchi.com 提供

元素宽度,包含边框和内边距

本文来自小莫扎特博客www.plusminustsuchi.com 提供

outerWidth()

本文来自小莫扎特博客www.plusminustsuchi.com 提供

元素高度,包含边框和内边距

本文来自小莫扎特博客www.plusminustsuchi.com 提供

outerHeight()

本文来自小莫扎特博客www.plusminustsuchi.com 提供

元素宽度,含边框和内边距、外边距 本文来自小莫扎特博客www.plusminustsuchi.com 提供

outerWidth(ture) 本文来自小莫扎特博客www.plusminustsuchi.com 提供

元素高度,含边框和内边距、外边距

本文来自小莫扎特博客www.plusminustsuchi.com 提供

outerHeight(true) 本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取元素相对于视口的偏移位置

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('strong').offset().left;

本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取元素相对于父元素的偏移位置

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('strong').position().left;

本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取垂直滚动条的值 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$(window).scrollTop(); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

设置垂直滚动条的值

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$(window).scrollTop(300);

本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取水平滚动条的值 本文来自小莫扎特博客www.plusminustsuchi.com 提供

scrollLeft()

本文来自小莫扎特博客www.plusminustsuchi.com 提供

设置水平滚动条的值

本文来自小莫扎特博客www.plusminustsuchi.com 提供

scrollLeft(value) 本文来自小莫扎特博客www.plusminustsuchi.com 提供

内容版权声明:以上内容均为转载,如有侵犯原作者请联系删除!