jQuery 基础 DOM 和 CSS 操作学习

2019年4月3日16:20:15 评论 115

jQuery 中,已经将最常用的 DOM 操作方法和 CSS 相关的操作进行了有效封装,并且不需要考虑浏览器的兼容性。

html() 、 text() 和 val() 方法

在常规的 DOM 元素中,html() 方法可以获取或设置 html 内容,text() 方法可以获取或设置文本内容,如果是表单,val() 方法进行获取或设置内部的文本数据。

$(’#box’).html(); //获取 html 内容
$(’#box’).html(’<em>xwsir.cn</em>’); //替换HTML内容,会HTML会自动解析
$(’#box’).html($(’#box’).html() + ’<em>xwsir.cn</em>’); //获取原有内容,追加数据

$(’#box’).text(); //获取文本内容,会自动清理 html 标签
$(’#box’).text(’<em>xwsir.cn</em>’); //替换文本内容,有HTML会自动转义

$(’input’).val(); //获取表单内容
$(’input’).val(’xwsir.cn’); //设置表单内容
$("input").val(["check1","check2", "radio1" ]); //value 值是这些的将被选定,数组中的被设置为选定状态

元素属性 attr() 和 removeAttr() 方法

获取属性的属性值、设置属性的属性值,并且可以删除掉属性。

$(’div’).attr(’title’); //获取属性的属性值
$(’div’).attr(’title’, ’我是域名’); //设置属性及属性值
$(’div’).attr({
	’title’ : ’我是域名’,
	’data’ : ’123’
});//设置多个属性的属性值
$(’div’).attr(’title’, function (index, value) {
	return ’原来的title是:’ + value + ’,现在的title是:我是’ + (index+1) + ’号域名’;
});//可以接受两个参数, index 表示当前元素的索引(从 0 开始),value 表示属性原本的值。

元素样式 css()、addClass()、removeClass() 和 toggleClass() 方法

元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。

//css() 方法
$(’div’).css(’color’); //获取元素行内 CSS 样式的颜色
$(’div’).css(’color’, ’red’); //设置元素行内 CSS 样式颜色为红色
$(’div’).css({
	’color’ : ’blue’,
	’background-color’ : ’#eee’,
	’width’ : ’200px’,
	’height’ : ’30px’
});//设置多个属性 CSS 样式
$.each(box, function (attr, value) { 
alert(attr + ’:’ + value);
});//遍历 JavaScript 原生态的对象数组
$(’div’).each(function (index, element) { 
alert(index + ’:’ + element);
});//index 为索引,element 为元素 DOM

//addClass() 和 removeClass() 方法
$(’div’).addClass(’red’); //添加一个 CSS 类
$(’div’).addClass(’red bg’); //添加多个 CSS 类
$(’div’).removeClass(’bg’); //删除一个 CSS 类
$(’div’).removeClass(’red bg’); //删除多个 CSS 类

//toggleClass() 方法
$(’div’).click(function () {//当点击后触发
	$(this).toggleClass(’red size’);	
});//两个样式之间的切换,默认样式和指定样式的切换

$(’div’).click(function () {
	$(this).toggleClass(function () {
		//局部
		if ($(this).hasClass(’red’)) {
			$(this).removeClass(’red’);
			return ’green’;
		} else {
			$(this).removeClass(’green’);
			return ’red’;
		}
	});				
});//实现样式 1 和样式 2 之间的切换

CSS 方法 width() 和 height() 方法

包含宽、高,内边距、外边距等等。

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

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

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

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: