转自个人博客
基本 DOM 和 和 CSS
一. 设置元素及内容
我们经由过程前面所进修的种种选择器、过滤器来获得我们想要操纵的元素。这个时刻,我们便能够对这些元素举行 DOM 的操纵。
那末,最经常运用的操纵就是对元素内容的猎取和修正。html()
和 text()
要领:
要领名 | 形貌 | 辨别 |
---|---|---|
html() | 猎取元素中 HTML 内容 | 连同标签一同提取 |
html(value) | 设置元素中 HTML 内容 | 清空原数据,设置html内容 |
text() | 猎取元素中文本内容 | 自动清算html标签 |
text(value) | 设置元素中文本内容 | 自动转义html标签以文本情势显现 |
val() | 猎取表单中的文本内容 | value属性的值 |
val(value) | 设置表单中的文本内容 | 设置value的值(有特别用法) |
注重:当我们运用 html()
或 text()
设置元素里的内容时,会清空本来的数据。而我们希冀能够追加数据的话,需要先猎取底本的数据。
$('#box').html($('#box').html() + '<em>guowenfh.github.io</em>'); //追加数据
//固然它还支撑运用函数来举行更庞杂的追加
val()
的特别用法:
假如想设置多个选项的选定状况,比方下拉列表、单选复选框等等,能够经由过程数组通报操纵。
$("input").val(["check1","check2", "radio1"]); //value 值是这些的将被选定
二. 元素属性操纵
除了对元素内容举行设置和猎取,经由过程jQuery也能够对元素自身的属性举行操纵,包括猎取属性的属性值、设置属性的属性值,而且能够删撤除属性。attr()
和removeAttr()
:
要领名 | 形貌 |
---|---|
attr(key) | 猎取某个元素 key 属性的属性值 |
attr(key, value) | 设置某个元素 key 属性的属性值 |
attr({key1:value2, key2:value2...}) | 设置某个元素多个 key 属性的属性值 |
attr(key, function (index, value){}) | 经由过程 fn 来设置设置某个元素 key属性 |
注重:
jQuery中许多要领都能够运用
function() {}
来返回出字符串,比方html()
、text()
、val()
和上一章刚学过的is()
、filter()
要领。
这些要领里的function() {}
,能够不传参数。能够只传一个参数index
,示意当前元素的索引(从0最先)。也能够通报两个参数index
、value
,第二个参数示意属性底本的值。
(固然并非一切要领都合适,有兴致能够本身逐一尝试)。
删除指定的属性,这个要领就不能够运用匿名函数,通报
index
和value
均无效。$('div').removeAttr('title'); //删除指定的属性
固然由于
id
和class
也是元素的属性,天然也能够运用attr举行设置,然则发起不如许运用,由于会致使悉数页面构造的杂沓,有特地的属性对它们举行设置。
三. 元素款式操纵
元素款式操纵包括了直接设置 CSS 款式、增添 CSS 种别、种别切换、删除种别这几种操纵要领。运用频次极高!
要领名 | 形貌 |
---|---|
css(name) | 猎取某个元素行内的 CSS 款式 |
css([name1, name2, name3]) | 猎取某个元素行内多个 CSS 款式 |
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) | 在匿名函数设置时通报三个参数 |
明白:
在猎取多个 CSS 款式时,猎取到的是一个对象数组,假如用原生JS举行剖析需要运用for in
遍历。
var box = $('div').css(['color', 'height', 'width']); //获得多个 CSS 款式的数组对象
for (var i in box) { //逐一遍历出来
alert(i + ':' + box[i]);
}
在jQuery明显不需要那末贫苦,由于它供应了一个遍历东西特地来处置惩罚这类对象数组,$.each()
要领,这个要领能够轻松的遍历对象数组。
/**
* 遍历对象数组
* @param {String} index 索引,键,属性名
* @param {String} value 属性值,值(相当于arr[i])
*/
//遍历原生JS对象数组时,value为元素DOM。
$.each(box, function(index, value) {
alert(index+":"+value);//结果和上面的一样
});
假如想设置某个元素的 CSS 款式的值,但这个值需要盘算我们能够通报一个匿名函数。
$('div').css('width', function (index, value) {
return (parseInt(value) - 50) + 'px';//部分操纵,不影响全局,防止争执。
});
在运用.toggleClass()
运用时,能够运用传入匿名函数的要领,完成由默许到几个class之间的切换。比方:
//注重这里必需要先删除原有的款式,不然只是被覆蓋了,而不是替代。
$('div').click(function() {
$(this).toggleClass(function() {
if ($(this).hasClass('red')) {
$(this).removeClass('red');
return 'blue';
} else {
$(this).removeClass('blue');
return 'red';
}
});
});
关于.toggleClass()
传入匿名函数的要领,还能够能够通报 index
索引、class
类两个参数以及频次布尔值,能够获得当前的索引、class类名和频次布尔值。
四. CSS要领
(一)width()要领
要领名 | 形貌 |
---|---|
width() | 猎取某个元素的宽度(number) |
width(value) | 设置某个元素的宽度(无单元时,默许px) |
width(function (index, width) {}) | 经由过程匿名函数设置某个元素的宽度 |
虽然能够不加单元,然则发起加上,使代码越发清楚。
index 是索引,value 是底本值。
(二)height()要领
要领名 | 形貌 |
---|---|
height() | 猎取某个元素的高度 |
height(value) | 设置某个元素的高度 |
height(function (index, height) {}) | 经由过程匿名函数设置某个元素的高度 |
上述两个要领不包括内外边距和边框
(三)内外边距和边框尺寸要领
要领名 | 形貌 |
---|---|
innerWidth() | 猎取元素宽度,包括内边距 padding |
innerHeight() | 猎取元素高度,包括内边距 padding |
outerWidth() | 猎取元素宽度,包括边框 border 和内边距 padding |
outerHeight() | 猎取元素高度,包括边框 border 和内边距 padding |
outerWidth(ture) | 同上,且包括外边距(注重内里的true) |
outerHeight(true) | 同上,且包括外边距 |
(四)元素偏移要领
要领名 | 形貌 |
---|---|
offset() | 猎取某个元素相关于视口的偏移位置(不管定位与否) |
position() | 猎取某个元素相关于父元素的偏移位置 |
scrollTop() | 猎取垂直滚动条的位置 |
scrollTop(value) | 设置垂直滚动条的位置 |
scrollLeft() | 猎取程度滚动条的值 |
scrollLeft(value) | 设置程度滚动条的值 |
注重:
前两个要领,猎取获得的是一个对象,如:{left:12,top:32}
,所以需要猎取个中的一个值的时刻,还需要举行拔取,比方:$(div).offset.left
。猎取相对与视口的偏移。
在猎取滚动条的值时需要注重的是,对象为window且需要用$包装转化成jQ对象
$(window).scrollTop(); //猎取当前滚动条的位置
$(window).scrollTop(300); //设置当前滚动条的位置
DOM 节点操纵
DOM中有一个非常重要的功用,就是节点模子,也就是DOM中的“M”。页面中的元素构造就是经由过程这类节点模子来相互对应着的,我们只需要经由过程这些节点关联,能够建立、插进去、替代、克隆、删除等等一些列的元素操纵。
一. 建立节点
为了使页面越发智能化,偶然我们想动态的在 html 构造页面增加一个元素标签,那末在插进去之前首先要做的行动就是:建立节点。
在jQuery中建立节点非常简朴。
var box = $('<div id="box">节点</div>'); //建立一个节点
$('body').append(box); //将节点插进去到<body>元素内部
二. 插进去节点
在建立节点的过程当中,实在我们已演示怎样经由过程.append()要领来插进去一个节点。但仅仅这个功用远远不能满足我们的需求,除了这个要领,jQuery供应了其他几个要领来插进去节点。
内部插进去节点要领
要领名 | 形貌 |
---|---|
append(content) | 向指定元素内部背面插进去节点content |
append(function (index, html) {}) | 运用匿名函数向指定元素内部背面插进去节点 |
appendTo(content) | 将指定元素移入到指定元素content 内部背面 |
prepend(content) | 向指定元素content 内部的前面插进去节点 |
prepend(function (index, html) {}) | 运用匿名函数向指定元素内部的前面插进去节点 |
prependTo(content) | 将指定元素移入到指定元素 content 内部前面 |
需要注重的是appendTo(content)
与prependTo(content)
在运用要领上与其他两个稍微有些差别,$("<em>new</em>").appendTo("div");
,它代表的是建立的节点传入div内部。
匿名函数体式格局:
$('div').append(function (index, html) {
//运用匿名函数插进去节点index是猎取到的div的索引,html 是原节点
if(index==1){
return '<strong>节点</strong>';//在猎取到的第二个div内部增加节点
}
});
外部插进去节点要领
要领名 | 形貌 |
---|---|
after(content) | 向指定元素的外部背面插进去节点 content |
after(function (index, html) {}) | 运用匿名函数向指定元素的外部背面插进去节点 |
before(content) | 向指定元素的外部前面插进去节点 content |
before(function (index, html) {}) | 运用匿名函数向指定元素的外部前面插进去节点 |
insertAfter(content) | 将指定节点移到指定元素 content 外部的背面 |
insertBefore(content) | 将指定节点移到指定元素 content 外部的前面 |
与上面雷同insertAfter(content)
与insertBefore(content)
也与别的两个是相反的。
三.包裹节点
jQuery 供应了一系列要领用于包裹节点,那包裹节点是什么意义呢?实在就是运用字符串代码将指定元素的代码包括着的意义。
要领名 | 形貌 |
---|---|
wrap(html) | 向指定元素包裹一层 html 代码 |
wrap(element) | 向指定元素包裹一层 DOM 对象节点 |
wrap(function (index) {}) | 运用匿名函数向指定元素包裹一层自定义内容 |
unwrap() | 移除一层指定元素包裹的内容(多层需移除屡次) |
wrapAll(html) | 用 html 将一切元素包裹到一同 |
wrapAll(element) | 用 DOM 对象将一切元素包裹在一同 |
wrapInner(html) | 向指定元素的子内容包裹一层 html |
wrapInner(element) | 向指定元素的子内容包裹一层 DOM 对象节点 |
wrapInner(function (index) {}) | 用匿名函数向指定元素的子内容包裹一层 |
wrap的多种用法:
$('div').wrap('<strong class="ing"></strong>'); //在 div 外层包裹一层 strong
$('div').wrap('<strong>123</strong>'); //包裹的元素能够带内容
$('div').wrap('<strong><em></em></strong>'); //包裹多个元素
$('div').wrap($('strong').get(0)); //也能够包裹一个原生 DOM
$('div').wrap(document.createElement('strong')); //暂时的原生 DOM
$('div').wrap(function (index) { //匿名函数
return '<strong></strong>';
});
注重: .wrap()
和.wrapAll()
的区分在前者把每一个元素当做一个独平面,离别包括一层外层;后者将一切元素作为一个团体作为一个独平面,只包括一层外层。这两种都是在外层包括,而.wrapInner()
在内层包括。
四. 节点操纵
要领名 | 形貌 | 参数剖析 |
---|---|---|
$('div').clone(true); | 复制一个节点 | true时示意同时复制事宜行动,空或false都示意只复制元素及内容 |
$('div').remove("#box"); | 删除一个id=box的div元素 | 无参数时,示意直接删除元素 |
$('div').detach(); | 保存事宜行动的删除 | 同上 |
$('div').empty(); | 状况节点里的内容 | 无参数 |
$('div').replaceWith('<span>节点</span>') | 将 div 替代成 span 元素 | HTML字符串,DOM元素,或许jQuery对象 |
$('<span>节点</span>').replaceAll('div'); | 同上 | 同上 |
注重:
.remove()
和.detach()
都是删除节点,而删除后自身要领能够返回当前被删除的节点对象,但区分在于前者在恢复时不保存事宜行动,后者则保存。节点被替代后,所包括的事宜行动就悉数消逝了。