# dom ## jq操作dom * 查询元素并获取元素的值 查询元素： * 根据标签选取：$('目标标签') * 根据class选取：$('.类名') * 根据id选取：$('#id值') * 根据属性选取 $('[目标属性]') 获取值： * element.html() 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 * element.text() 也就是从对象的起始位置到终止位置的全部内容,去除Html标签。 * element.val() 返回表单字段的值 demo: html: 标题
提瓦特大陆最好吃的食物是派蒙嗷！
js: ``` var str=$('div').text() //提瓦特大陆最好吃的食物是派蒙嗷！ ``` 获取属性值： eg: str=$('p') var attr=str.attr('name') document.write($('#image').attr('href')) * 删除元素 自身 element.remove() * 修改元素 * 修改元素的文本内容 * element.text('修改后的文本内容') * elenment.html("\

修改后的文本内容\

") * 修改元素的属性 element.setAttribute('属性名','属性值') eg: var myele=document.createElement('div') myele.setAttribute('class','box') *

创建元素:

* 创建新的html节点 $('要创建的标签名') * 为新创建的节点添加文本内容 element.html('想要添加的文本内容') element.text('想要添加的文本内容') * 为新创建的添加属性及属性值 方法一： element.attr('属性名','属性值') * 查找一个现有的元素（新元素的父级元素） * 向已有的元素追加新元素 * fuelement.append(创建的新元素) demo: ``` var box =$('div') box.text('happy new year') box.attr('style', 'width:100px;height:100px;background:red;color:white') var main = document.body main.append(box) ``` 追加元素的方式： * append(),在父级最后追加一个子元素 * appendTo(),将子元素追加到父级的最后 * prepend(),在父级最前面追加一个子元素 * prependTo(),将子元素追加到父级的最前面 * after(),在当前元素之后追加（是同级关系） * before(),在当前元素之前追加（是同级关系） * insertAfter(),将元素追加到指定对象的后面 * insertBefore(),将元素追加到指定对象的前面 ```