jQuery中的DOM知识点

一、 jQuryz对象和DOM对象的区别：

DOM是文档对象模型，每个DOM对象都可以看成一棵树，构建了基本的网页。而jquery对象是通过包装之后产生的。jquery对象是jquery自己所独有的。DOM对象和jquery对象的任何方法都是私有的，不可以相互使用。比如：获取值的方法$("li').html

和ＤＯＭ中回去值的方法是document.getElementById("li").innerHTML.

二、两者是可以相互转化

ＤＯＭ对象转化为ｊｑｕｅｒｙ对象很简单。在对象前面加上$ 符号就可以。var lis=document.getElementById("li");

var $li=$("lis");  这样就可以把DOM对象转变为jquery对象。在JS中的DOM树中，每个节点都是一个对象。翻过来，我又后悔了。又希望把jquery对象转化为ＤＯＭ对象怎么办？var  lis=$li[0];   lis.οnclick=function(){  }  这里我们想，为什么要转什么时候转呢？因为不同的对象拥有不同的方法，看自己需求，如果ｊｑｕｅｒｙ解决不了的事情，这时候可以转化为ＤＯＭ对象，运用ＤＯＭ中的方法。

三、比较ＤＯＭ操作和ｊｑｕｅｒｙ中的操作ＤＯＭ操作的差异

1.1 DOM (重点)

 我们js 有三部分组成的？

   ECMAscript       DOM      BOM   

核心（ECMAScript）欧洲计算机制造商协会

      描述了JS的语法和基本对象。   var aa   var AA   不一样

文档对象模型（DOM）  学习的重点

     处理网页内容的方法和接口

     与浏览器交互的方法和接口  

     window.alert()  很大的兼容问题

1.1.1 DOM 定义

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。

目的其实就是为了能让js操作html元素而制定的一个规范。

DOM 树   

文档是document 一层 一层访问html的每一个元素。让js访问html的每一个元素。

 

1.1.2 节点

   标签   标记    元素    节点    

由结构图中我们可以看到，整个文档就是一个文档节点。

而每一个HMTL标签都是一个元素节点。

标签中的文字则是文字节点。

标签的属性是属性节点。

一切都是节点……

1.1.3 访问节点  

ＪＳ中获取元素的方法

  getElementById()   id 访问节点

  getElementsByTagName()    标签访问节点

  getElementsByClassName()  类名有兼容性问题主流浏览器支持ie 678不认认识需要我们封装怎么封装微博中有这里不多说。

而在ｊｑｕｅｒｙ中获取元素的方法是通过选择器的方法

具体的选择器支持部分ＣＳＳ１到ＣＳＳ３的选择器，还有独有的选择器。使得我们获取元素更加方便，有基本选择器

层次选择器（空格　>　＋（$("pre+next")就是和pre的下一个邻居，同辈的。　过滤选择器（:first :last :even :odd :eq(index) :gt(index)  内容过滤选择器：:contains(text) :empty :has  　属性过滤选择器　子元素过滤选择器:fisrt-child :only-child :last-child等等太多了，不说了。自己查吧。 

  

1.2 判断真假

我们用条件语句来判断5大数据类型中的真假；
数据	结论
数字类型	所有数字都是真，0是假
字符串	所有字符串都是真，’ ’串是假
对象	所有对象都是真，null是假
未定义	undefined是假，没有真

1.3 访问关系 

各个节点的相互关系

 

     

1.3.1  父节点 

 父 ：  parentNode         亲的  一层关系

<script>
    window.onload = function(){
        var x = document.getElementById("x");
        x.onclick = function(){
            this.parentNode.style.display = "none";
            // 关掉的是他的 父亲
        }
    }
</script>

１.３.２兄弟节点

nextSibling  下一个兄弟    亲的       ie 678 认识

nextElementSibling   其他浏览器认识的     

previousSibling   同理  上一个兄弟   

previousElementSibling

我们想要兼容    我们可以合写      ||      或者

 

var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";

 

 必须先写 正常浏览器  后写  ie678  

1.3.3  子节点 

firstChild    第一个孩子  ie678

firstElementChild  第一个孩子   正常浏览器  

var one.firstElementChild || one.firstChild;   

lastChild

lastElementChild

 

1.3.4 孩子节点

childNodes    选出全部的孩子

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点     （嫡出）

火狐 谷歌等高本版会把换行也看做是子节点

 

利用  nodeType == 1   时才是元素节点     来获取元素节点

标签  元素  

children   重要  选取所有的孩子 （只有元素节点）

这个更好 跟喜欢它  。 （庶出）

ie 678  包含 注释节点     这个要避免开。 

 jquery中的关于遍历节点的操作：

１.chilren()方法　获取所有取得匹配元素的子元素的集合。记住只考虑子元素不考虑后代的其他元素

２.next()方法　取得匹配元素的后面紧邻的同辈元素，var $p1=$("p").next();

3.pre()方法取得匹配元素的前面紧邻的同辈元素

４.siblings()方法，取得前后所有的同辈元素$(this).addClass("active"").next().show()

                                                                                                                     .parent().siblings().chilren("a").removeClass("current")

.next().hide();

return false;

}

5.closest()　　parent() parents()

6.find()

1.4 dom 的节点操作 

 新建节点   插入节点   删除节点   克隆节点 等等

1.4.1  创建节点 

  var div = document.creatElement(“li”);

var  text=do

 ｊｑｕｅｒｙ中创建节点的方式:

创建文本节点：var $li=$("<li>一个大鸭梨</li>");

创建元素节点:var $li=$("<li></li>");

创建属性节点:var $li=$("<li title="fruit">一个大鸭梨</li>");这个节点属性节点和文本节点，、元素节点都有了。

   上面的意思就是 生成一个新的  li 标签  

1.4.2 插入节点 

 

  1.  appendChild();    添加孩子     append 添加的意思

   意思：  添加孩子   放到盒子的 最后面。

  2. insertBefore(插入的节点，参照节点)   子节点  添加孩子

    写满两个参数  

demo.insertBefore(test,childrens[0]);

   放到了第一个孩子的前面  

  如果第二个参数  为 null  则 默认这新生成的盒子放到最后面。

  demo.insertBefore(test,null);

 

Jquery中的插入节点方式：

$(a).append(B);

$B).appendTo(a);

prepend()是在元素的内部的前面添加元素，

prependTo() 把前面的元素前置到后面元素的内部的前面

after()

insertAfer()

before()

1.4.3   移除节点

removeChild()    孩子节点       

var da = document.getElementById("xiongda");
demo.removeChild(da);

 jquery中删除节点操作：

remove（）是删除所有满足条件的匹配的元素。但是如果想以后再使用是可以的。$li=$("ul li:eq(3)").remove();

$li.appendTo("ul");

empty()  是彻底清空 清空之后的样子 

$("ul li:eq(1)").empty();

 <ul>

<li title="橘子“>橘子</li>

<li title="子“>橘子</li> 清空之后的样子<li title="子”/>

<li title="橘I“>橘子</li>

</ul>

1.4.4 克隆节点

 cloneNode();

 复制节点

 括号里面可以跟参数  ， 如果 里面是 true  深层复制， 除了复制本盒子，还复制子节点  

 如果为 false  浅层复制   只复制   本节点  不复制 子节点。

jquery中的克隆节点的方式。 $(this).clone(true).appendTo("body") 当克隆的节点为trued的时候，复制元素的同时还把元素所绑定的事件复制到节点中。$(this).click(function(){
$(this);clone().appendTo("ul");