jQuery入门笔记之（二）文档对象模子

2019年8月30日 171次阅读来源: 三省吾身丶丶

转自个人博客

基本 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');`	同上	同上