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