jQuery操作DOM

一、jQuery对象与DOM对象

获取jQuery对象：

语法：$('选择器');

如：<p>文本</p>

$('p');根据标签选择器得到p标签对象

获取DOM对象：

语法：document.get();

如：document.getElementById('id');根据id获取

jQuery和js结合使用：

$(function(){

//js操作

var obj=document.getElementById('id');

obj.style.color="red";

//jQuery操作

$('#id').css('color','red');

})

二、jQuery设置样式

在 jQuery 中，可以通过 css() 方法为某个指定的元素设置样式值。

设置单个样式：

$('#id').css('color','red');

设置多个样式：

$('#id').css({'属性名1':'属性值1','属性名1':'属性值1',...});

栗子：

$('#id').css({'width':'50px','height':'50px','background':'green'});多个属性值用逗号，隔开；

添加类样式：

通过给指定元素添加预先设定好的样式类名，从而达到显示样式的效果

语法：$obj.addClass(classname);

栗子：$('#id').addClass('divbg');

删除类样式：

删除指定元素的类名；

语法：$obj.removeClass('类名');

栗子：$('#id').removeClass('divbg');

元素内容和值操作：

html() 、text() 、val()

创建/获取节点：

语法：$(html)/html();

功能：可以创建单级标签或多级标签，同时可以设置属性，文本；

栗子：$('<div id="test">这是创建的节点</div>');

设置文本/获取文本：

语法：text(content)/text();

功能：获取指定元素下面的所有文本，不考虑层次；将文本内容content设置到指定元素下，如果指定位置有内容则替换。

获取值和设置值：

语法：$('obj').val();/$('obj').val(text);

功能：获取指定元素的value值；给指定元素设置text值。

元素属性操作：

attr(name) ；attr(name,value)

获取元素属性：

语法：$('obj').attr(name);

功能：根据name属性名称获取属性值

栗子：$('obj').attr('id');//根据id获取id值

设置元素属性：

多属性：attr({name1:value1,name2:value2,...});

功能：给指定元素设置属性，属性名称为name，属性值为value；

在 jQuery 中操作DOM节点：

创建节点：$(html)

插入节点：

将元素插入到指定元素中，即标签对中间：

append(A)：元素中插入A

appendTo(A)：元素插入到A中

prepend(A)：元素中插入A

prependTo(A)：元素插入到A中

将元素插入到指定元素的后面，为同辈插入：

after(A) ：A插入到元素的后面

insertAfter(A) ：A后面插入元素

将元素插入到指定元素的前面，为同辈插入：

before(A) ：A插入到元素的前面

insertBefore(A)：A前面插入元素

替换节点：

replaceWith() 、replaceAll()

语法1：A.replaceWith(B)

功能：用B替换A

语法2：A.replaceAll(B)

功能：用A替换B

复制节点：

clone()

语法1：A.clone();

功能：克隆A元素，但不包括A元素的属性和特效

语法2：A.clone(true);

功能：克隆A元素，包括A元素的属性和特效

删除节点：

remove()

语法：A.remove(a);

功能：删除A集合元素的a元素。