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

2.5 KiB Raw Blame History Unescape Escape

dom

jq操作dom

2.5 KiB

Raw Blame History