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