16-Javaweb学习-DOM和CSS操作

16-Javaweb学习-DOM和CSS操作

1.基础DOM和CSS操作

​ DOM在 JavaScript 课程中我们详细的探讨过，它是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。在 JavaScript 中，DOM不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。在 jQuery中，已经将最常用的DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。

​ 我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我们就可以对这些元素进行 DOM 的操作。 那么， 最常用的操作就是对元素内容的获取和修改。

2.html()和 text()方法

方法名	描述
html()	获取元素中 HTML 内容
html(value)	设置元素中 HTML 内容
text()	获取元素中文本内容
text(value)	设置原生中文本内容
val()	获取表单中的文本内容
val(value)	设置表单中的文本内容

在常规的 DOM 元素中，我们可以使用 html()和 text()方法获取内部的数据。html()方法可以获取或设置 html 内容，text()可以获取或设置文本内容。
$('#box').html(); //获取 html 内容
$('#box').text(); //获取文本内容，会自动清理 html 标签
$('#box').html('<em>www.li.cc</em>'); //设置 html 内容
$('#box').text('<em>www.li.cc</em>'); //设置文本内容，会自动转义 html 标签
注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。
$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加数据如果元素是表单的话，jQuery 提供了 val()方法进行获取或设置内部的文本数据。
$('input').val(); //获取表单内容
$('input').val('www.li.cc'); //设置表单内容如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。
$("input").val(["check1","check2", "radio1" ]); //value 

元素属性操作:

除了对元素内容进行设置和获取，通过jQuery也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。

3.attr()和 removeAttr()

方法名	描述
attr(key)	获取某个元素 key 属性的属性值
attr(key, value)	设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2…})	设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {})	设置某个元素 key 通过 fn 来设置

removerAttr(属性名称) 根据属性名称移除某个属性

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

$('div').attr('title', function () { //通过匿名函数返回属性值
	return '我是域名';
});

$('div').attr('title', function (index, value){ //可以接受两个参数
	return value + (index+1) + '，我是域名';
});

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

注意：我们也可以使用 attr()来创建 id 属性，但我们强烈不建议这么做。这样会导致整个页面结构的混乱。 当然也可以创建 class 属性， 但后面会有一个语义更好的方法来代替 attr()方法，所以也不建议使用。

元素样式操作:

元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。而在整个 jQuery 使用频率上来看，CSS 样式的操作也是极高的，所以需要重点掌握。

4.CSS操作方法

方法名	描述
css(name)	获取某个元素行内的 CSS 样式
css([name1, name2, name3])	获取某个元素行内多个 CSS 样式 注意返回的是JSON对象 键是属性名值是属性值
css(name, value)	设置某个元素行内的 CSS 样式
css(name, function (index, value) )	设置某个元素行内的 CSS 样式
css({name1 : value1, name2 : value2})	设置某个元素行内多个 CSS 样式
addClass(class)	给某个元素添加一个 CSS 类
addClass(‘class1 class2 class3…’)	给某个元素添加多个 CSS 类
removeClass(class)	删除某个元素的一个 CSS 类
removeClass(‘class1 class2 class3…’)	删除某个元素的多个 CSS 类
toggleClass(class)	来回切换默认样式和指定样式
toggleClass(class1 class2 class3…)	同上
toggleClass(class, switch)	来回切换样式的时候设置切换频率
toggleClass(function () {})	通过匿名函数设置切换的规则
toggleClass(function () {}, switch)	在匿名函数设置时也可以设置频率
toggleClass(function (i, c, s) {}, switch)	在匿名函数设置时传递三个参数

示例1：

$('div').css('color'); //获取元素行内 CSS 样式的颜色
$('div').css('color', 'red'); //设置元素行内 CSS 样式颜色为红色在 CSS 获取上，我们也可以获取多个 CSS 样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用 for in 遍历
var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
for (var i in box) { //逐个遍历出来
	alert(i + ':' + box[i]);
}
var v=$('#myh').css(['color','font-size']);
alert(v.[“font-size”]);// 通过键找值，取出css属性所对应的值jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。

$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组
	alert(attr + ':' + value);
});

使用$.each()可以遍历原生的 JavaScript 对象数组，如果是 jQuery 对象的数组怎么使用.each()方法呢？

$('div').each(function (index, element) { //index 为索引，element 为元素 DOM
	alert(index + ':' + element);
});

在需要设置多个样式的时候，我们可以传递多个 CSS 样式的键值对即可。
$('div').css({
	'background-color' : '#ccc',
	'color' : 'red',
	'font-size' : '20px'
});

如果想设置某个元素的 CSS 样式的值，但这个值需要计算我们可以传递一个匿名函数。
$('div').css('width', function (index, value) {
	return (parseInt(value) - 500) + 'px';
});

示例2:

除了行内 CSS 设置，我们也可以直接给元素添加 CSS 类，可以添加单个或多个，并且
也可以删除它。
$('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'); //单个样式多个样式均可
});

.toggleClass()方法的第二个参数可以传入一个布尔值， true 表示执行切换到class 类false表示执行回默认 class 类(默认的是空 class)，运用这个特性，我们可以设置切换的频率。

var count = 0;
$('div').click(function () { //每点击两次切换一次 red
$(this).toggleClass('red', count++ % 3 == 0);
});

示例3:

默认的 CSS 类切换只能是无样式和指定样式之间的切换，如果想实现样式 1 和样式 2之间的切换还必须自己写一些逻辑。

$('div').click(function () {
$(this).toggleClass('red size'); //一开始切换到样式 2

if ($(this).hasClass('red')) { //判断样式 2 存在后
	$(this).removeClass('blue'); //删除样式 1
	} else {
	$(this).toggleClass('blue'); //添加样式 1，这里也可以 addClass
	}
});

5.CSS方法

Query 不但提供了 CSS 的核心操作方法，比如.css()、.addClass()等。还封装了一些特殊功能的 CSS 操作方法，我们分别来了解一下。

方法名	描述
width()	获取某个元素的长度
width(value)	设置某个元素的长度
width(function (index, width) {})	通过匿名函数设置某个元素的长度
height()	获取某个元素的长度
height(value)	设置某个元素的长度
height(function (index, width) {})	通过匿名函数设置某个元素的长度

示例:

$('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; //无须调整类型，直接计算
});