Jquery——Day2（基础DOM和css操作）

客官°小女子只卖身不卖艺 2022-07-12 12:06 191阅读 0赞

## `` ##

## `    DOM(Document Object Model)，意思就是文档对象模型。` ##

`    一般而言，DOM操作分为3个方面，即DOM-CORE(核心)、HTML-DOM、CSS-DOM，在javascript中的DOM-CORE表示getElementById()、getElementByTagName()、getAttribute()、setAttribute()`

`    在jquery中的DOM操作包括：`

`（1）查找节点：attr()，若为一个参数，即表示查找的属性名；若为两个参数，表示设置元素的属性值。`

`（2）创建节点：attr()，获取各个属性的值，同时使用$(html)可以创建相应的html代码；此外，还可以创建相应的文本节点、属性节点（title），同时必须采用append()方法对其进行添加到相应的标签下。`

`（3）插入节点：append()，是在元素内部追加新创建的内容；在jquery中还提供了其他的方法，譬如appendTo()、prepend()[前置内容]、after()、insertAfter()[将匹配的元素插入到指定元素后面]等。`

`（4）删除节点：remove()、detach()、empty()。需要注意的是，在empty()方法中，它并不是删除节点，而是清空节点，能清空所有的后代节点。remove()与detach()的区别在于，detach()删除节点后，节点本身绑定的事件、附加的数据都会保留下来，并不会全部消失。`

`（5）复制节点：clone()表示克隆，若为clone(true)，表示复制元素的同时，也会复制元素中所绑定的事件，即其副本也具有复制功能。`

`（6）替换节点：replaceWith()将所有匹配的元素都替换成指定的HTML或者DOM元素。此外，还有一个方法replaceAll()，与replceWith()相比，它只是颠倒了前后元素操作。`

`$('p').replaceWith('<strong>水果</strong>');`

`$('<strong>水果</strong>').replaceAll('p');`

`（7）包裹节点：wrap()，表示用标记将某个节点包裹起来，`

` 由此延伸的包裹节点方法还有wrapAll()、wrapInner().`

`（8）属性操作：由于attr()是用来设置和获取元素属性，removeAttr()来删除元素属性。`

`（9）样式操作：addClass()、removeClass()、切换样式toggleClass()、判断样式hasClass()。`

`（10）设置html、文本、值：html()、text()、val()`

`（11）遍历节点：children()、next()、prev()匹配前面相邻同辈元素、siblings()匹配前后所有的同辈元素、closest()取得最近的元素、parent()获取每个匹配元素的父级元素。`

`（12）CSS-DOM操作：offset()、position()、scrollTop()、scrollLeft()`

## `A:设置元素及内容` ##

`最常用的DOM方法为：`

`a、html():表示获取元素的html内容`

`b、text():表示获取元素的文本内容`

若要获取class="box"下，相应的html内容和text内容

$(function(){ alert($('#box').html()); //获取元素的html内容； alert($('#box').text()); //获取元素的文本内容； });

若要对表单元素进行操作，可以使用val()方法获取和设置表单的文本内容

例如，

在“<input type="text" />热烈”

$(function(){ $('input').val(); //表示获取表单元素input的内容 $('input').val('欢迎'); //表示用“欢迎”替换“热烈” });

## B、CSS属性的操作 ##

最常用的DOM方法，包括attr()、removeAttr()

**（1）attr()方法：获取和设置元素值。**

**在这个方法中，其可以传递匿名函数，即function中含有index、value。**

a、attr(key):获取某个元素key属性的属性值

b、attr(key,value):设置某个元素key属性的属性值

c、attr(key:value1,key:value2):设置某个元素多个属性值，但不建议用attr()方法进行使用

d、attr(key,function(index,value)\{\}):设置某个元素**key**属性对应的**index**位置的索引下**值value**

**（2）removaAttr()方法：删除元素值**

**在这个方法中，不可以使用匿名函数，传递的index和value是无效的。**

**例如：**

$('div').removeAttr('title');   //删除指定的属性；

## C、CSS样式操作 ##

（1）获取元素css样式  $('div').css('color');

设置元素css样式  $('div').css('color','red');

注意：一个值时，为获取；两个值时，为设置。

（2）获取多个元素的css样式

var box=$('div').css(\['color','width','height'\]);

对于一个样式css数组对象而言，可以使用for-in方法遍历

for(var i in box){ alert(i+':'+box[i]); }

在Jquery中，一般使用each()方法对元素进行遍历设置。

a、遍历原生态对象数组each()方法

var box=$('div').css(['color','width','height']); $.each(box,function(attr,value){ alert(attr+':'+value); });

b、遍历jQuery对象数组的each()方法

$.each(function(index,element){ alert(index+':'+element); });

c、设置css多样式简写方式

（1）数组方式

$('div').css({ 'color':'red'; 'width':'200px'; 'height':'30px'; });

（2）匿名函数

$('div').css('width',function(index,value){ return (parseInt(value)-500)+'px'; });

（3）对class的操作addClass/removeClass/toggleClass

前两个较为简单，主要说明toggleClass，它表示的是指定样式、默认样式两种样式之间的切换。

a、指定的html，有两个class，red和size

b、添加指定的样式css

.red{ color:red; } .size{ font-size:30px; }

c、点击“div”，会使得元素变红，变大，对应jquery

$('div').click(function(){ $(this).toggleClass('red size'); });

若要对上述案例进行扩展，即在绿色和红色之间切换(若为red，删除，用green替换；否则删除green，用red替换)

$('div').click(function(){ $(this).toggleClass(function(){ //局部 if($(this).hasClass('red')){ $(this).removeClass('red'); return 'green'; } else{ $(this).removeClass('green'); rerturn 'red'; } }); });

d、无内外边距方法：width()、height()

有内外边距方法：

（1）包含内边距padding                       innerWidth()

（2）包含边框border、padding                 outerWidth()

（3）包含边框border、padding、外边距margin   outerWidth(true)（表示有外边距margin）

e、元素偏移方法

（1）offset():获取某个元素相对于视口的偏移位置

（2）position():获取某个元素相对于父元素的偏移位置

$('div').offset().left; $('div').position().left;

（3）scrollTop():获取垂直滚动条的位置

（4）scrollLeft():设置水平滚动条的位置

Jquery——Day2（基础DOM和css操作）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery -- 选择器、DOM、CSS操作

相关 JavaScript基础（Dom操作）

相关 DOM基础操作

相关 js基础知识——DOM操作之CSS

相关 jQuery系列2---DOM操作和事件

相关 Jquery——Day2（基础DOM和css操作）

相关 Jquery基础DOM和css操作

相关 dom基础2

相关 DOM操作基础

相关【HTML5基础】DOM操作