dom和jquery基础（刷题版）

1.获取元素

    dom中：

       document.querySelector（‘...’），如果有同类型的只获取第一个，没有相应的则是null。

       document.querySelectorAll（‘..’），获取到一个数组。

       getElementById（‘#’），getElementByTagName（‘tag’），getElementByName（’tag‘），getElementClassName  （‘.’）    。

      jquery中：

        $（‘...’）获取元素，如果有多个相同的会返回一个数组，数组里每个都是一个dom元素，可以用$（$（‘...’）[i]）给里面每个元素转成jquery对象。

        通过标签和属性获取：$("p[ id]")，匹配p标签中属性是id的元素，还可以给id加特殊符号$ ， ！ ， * ， @ ， ^ 。  用法：$：$("p[ id$=value]")匹配id值以value结尾的元素。！：匹配所有不含有value的属性。*，@：匹配属性包含value的元素。^：匹配以value开头的元素。不用符号就是匹配属性是value的元素。

     2.设置样式

          dom中：

             1.dom.style.样式名=‘...’。

             2.dom.setAttribute（‘属性名’，‘属性值’）。        ·style

            jquery中：

              1.$().prop（‘属性名’，‘属性值’），$().removeProp（‘属性名’），

              2.$().css（‘样式名’，‘值’），多个样式$().css（‘样式名1’：‘值’  ，‘样式名2’：‘值’）

        3.设置类名

                     dom中：        

                        dom.className=‘...’，会替换之前的类名

                        dom.setAttribute（‘class’，‘类名’），dom.removeAttribute（‘class’，‘类名’）

                        dom.classList.add（‘1’，‘2’，‘3’），dom.classList.remove（‘1’，‘2’，‘3’），dom.classList.toggle（‘类名’）切换类名（有则删除，无则添加）。

                        jquery中：

                          $().addClass（‘类名1 类名2’），$().removeClass（‘类名1 类名2’），$().toggleClass("类名")  切换类;

           4.绑定事件

                       dom中：

                          dom.onclick/事件=fun（）{.......}

                          dom.addEventListener（‘click/事件’，fun（）{........}）

                        jquery中：

                            $().click（fun（）{...........}）

                            $().on（‘事件’，fun（）{........}）

                                多个事件   $().on（ {   事件1：fun（）{........}，事件2：fun（）{.....}    } ）

               5.设置内容

                          dom中：

                                        dom.innerHtml=‘...’

                           jquery中：

                                        $().html（.....）

                 6.获取父元素，子元素，兄弟节点

                            dom中：

                        document.createElement（‘...’）  创建一个标签

                        父节点.appedChild（..），添加一个节点

                        dom.children 返回一个数组，获取所有子标签

                        dom.childNodes 返回一个数组，获取所有节点，标签间的回车换行也算

                        dom.firstChild 获取第一个子节点 dom.lastChild最后一个子节点

                        dom.firstElementChild 第一个标签

                        dom.parentElement / dom.parentNode 父标签 / 父节点

                        dom.previousSibling / dom.previousElementSibling 上一个兄弟节点 / 标签

                        dom.nextSibling / dom.nextElementSibling 下一个兄弟节点 / 标签

                                jquery中

                        $(html); 会根据传入的html 标记字符串创建一个DOM 对象, 并把这个DOM 对象包装成一个 jQuery 对象返回

                        $().append（...） 将...节点添加到$后

                        $().children()：获取所有子节点，返回一个数组

                        $().Children（‘ ：first ’）：获取第一个子节点

                        $().Children（‘ ：last ’）：获取最后一个子节点
                        $().contents()：获取包含的所有内容，包括空文本

                        $(...).remove()：删除...节点

                        $().parent()：获取父节点

                        $().prev() ：获取上一个兄弟节点

                        $().prevAll()：获取之前所用的兄弟节点

                        $().next() ：获取下一个兄弟节点

                        $().nextAll()：获取之后所有的兄弟节点

                        $().siblings()：获取所有的兄弟节点