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(),将元素追加到指定对象的前面
|
|||
|
|
```
|