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

    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():表示获取元素的文本内容

<div id="box">
	<p>欢迎光临！</p>
</div>

若要获取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

<div class="red size">欢迎光临</div>

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():设置水平滚动条的位置