97 lines
2.5 KiB
Markdown
97 lines
2.5 KiB
Markdown
# dom
|
||
|
||
|
||
## jq操作dom
|
||
|
||
* 查询元素并获取元素的值
|
||
查询元素：
|
||
* 根据标签选取：$('目标标签')
|
||
* 根据class选取：$('.类名')
|
||
* 根据id选取：$('#id值')
|
||
* 根据属性选取 $('[目标属性]')
|
||
|
||
获取值：
|
||
* element.html() 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
|
||
* element.text() 也就是从对象的起始位置到终止位置的全部内容,去除Html标签。
|
||
* element.val() 返回表单字段的值
|
||
|
||
demo:
|
||
html:
|
||
|
||
<html>
|
||
<head>
|
||
<title>标题</title>
|
||
</head>
|
||
<body>
|
||
<div>提瓦特大陆最好吃的食物是派蒙嗷！</div>
|
||
</body>
|
||
</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("\<p>修改后的文本内容\</p>")
|
||
* 修改元素的属性
|
||
element.setAttribute('属性名','属性值')
|
||
eg:
|
||
|
||
|
||
var myele=document.createElement('div')
|
||
myele.setAttribute('class','box')
|
||
|
||
|
||
* <p style="color:red;font-weight:bold">创建元素:</p>
|
||
|
||
* 创建新的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(),将元素追加到指定对象的前面
|
||
```
|