JQuery 学习笔记（随笔）03

第三章 jQuery 中的DOM操作

Dom是一种文档对象模型，DOM是一种与浏览器、平台无关的接口，使用该接口可以轻松的访问页面中的标签组件。

Dom操作的分类：Dom Core(核心)、HTML Dom 、CSS Dom

Dom 并不是专门用来处理网页，也可以用它来处理一些使用标记语言的文档。例如XML.

Dom Core组成部分：getElementById()、getElementsByTagName()、getAttribute()、setAttribute()等方法

举个例子：（1）使用DOM Core 来获取表单对象的方法：

document.getElementsByTagName("form");

（2）使用Dom Core 来获取某元素的属性的方法：

elements.getAttribute("src");

HTML Dom 出现的比javascript要早，有点：代码书写短。缺点：只能用来处理web文档

举个例子：使用HTML-Dom来获取表单对象的方法

document.forms//html Dom 提供了一个forms 对象

使用HTML-dom来获取某元素的src属性

element.src;

Css-Dom 是针对Css的操作。主要是用来获取和设置style对象的各种属性。来打到改变页面效果

element.style.color="red";

jQuery中的Dom操作：

查找节点：

（1）查找元素节点： 例如 var $li=$(" ul li:eq(1)");

（2）查找属性节点：利用jQuery选择器查找到需要的节点，就可以使用atrr()方法来获取各种属性和值。attr()方法可以一个或者两个参数。当为一个的时候为获取属性。当为两个的时候为设置属性。

创建节点：

（1）创建元素节点：例如创建一个li元素 var $li_1=$("<li></li>"),将li元素插入到ul中 $("ul").append($li_1):

（2）创建文本节点：就是在元素节点中添加属性，这里不在多说

插入节点：

（1）主要介绍方法：（a）.append()向匹配元素（内部）（追加）元素例如$("p").append("<b>你好</b>");----------> 

（b ）.appendTo() 效果一样。写法上有差别

（c ）prepend() 向每个匹配元素 （内部）（前置）内容

（d）prependTo().......

        （e）after()向每个匹配元素之后插入内容

（f ）insertAfter().........

（g）before() 向每个匹配元素之前插入内容

（h）insertBefore()............

删除节点：

（1）remove()方法：从DOM中删除匹配的元素。传入的参数用户根据jQUERY 表达式筛选元素

使用个该方法后，该节点所包含的所有后代节点将同时删除，返回值是一个指向已被删除的节点的引用。

例如：var $li=$("ul li:eq(0)").remove();//获取ul下面第一个li元素后，将它从网页上删除

$li.appendTo("ul");//把刚才删除的节点由添加到<ul>中

通过传入的参数来选择性的删除

例如：$("ul li").remove("li[title!=菠萝]");//将<li>元素中属性title不等于“菠萝”的 li 元素删除，也可以写成 $("ul li[title!=菠萝]").remove();

 

（2）empty()方法 ：并不是删除节点。而是清空节点。它能清空元素中的所有的后代节点

注意：清空节点只是清空标签里面的文本，并没有清空里面的属性。

复制节点：

（1）clone()

例如：$("ul li").click(function(){

$(this).clone().appendTo("ul");//复制当前的li节点，并追加到<ul>标签里面

})

如果让新元素也有复制行为：

$(this).clone(true).appendTo("body")//复制的节点仍有复制的功能，传递的参数true,含义是复制元素的同时，复制了元素所绑定的事件。

替换节点：

（1）replaceWith()将所匹配的元素都替换成指定的HTML或者DOM元素

例如：$("p").replaceWith("<stront>哈哈</strong>");也可以使用jquery两一个方法replaceAll()作用只是颠倒了操作位置。例如：$("<stront>哈哈</strong>").replaceAll("p");

包裹节点：

（1）如果要将某个节点用其他标记包裹起来，jquery提供相应方法即wrap()

例如：$("strong").wrap("<b></b>");//用<b>标签把<strong>元素包裹起来 ------------>单独包裹

（2）wrapAll() 整体包裹

（3）wraplnner()该方法将每一个匹配的元素的子内容）（包括文本节点）用其他结构化标签包裹起来

属性操作:

（1）在jquery 中用attr()方法来获取和设置元素属性，用removeAttrr()方法来删除元素属性。

就是传递一个参数，就是获取属性，传递两个参数就是设置属性，也可以通过名值对形式设置多个属性，类似方法还有 html().text(),height(),width().val().css().

（2）删除属性

例如：$("p").removeAttr("title");//删除p元素的title属性

样式操作：

（1）获得样式和设置样式都是通过调用attr()方法，通过传入的参数个数就可以轻易实现

（2）追加样式：addClass()  例如$("p").addClass("antohr");    .antohr{color:red;},此时CSS将包含新增加进来的样式。CSS中有规定，当给一个元素添加多个样式，就相当于合并了他们的样式 。如果设置有冲突就相当于覆盖。

（3）追加样式addClass()和设置样式attr()的区别,追加样式，是添加一种样式，设置样式是从新指定样式。

（4）移除样式  和addClass()相反 移除样式有removeClass()方法 ，传入什么属性，就移除什么class属性，多个属性要用空格隔开 要是什么都不写，就移除所有class属性

切换样式： 

（1）toggle() 例如：$btn.toggle(function(){           //交替动作

................................//显示元素

},function(){

..........................//隐藏元素

})

（2）toggleClass   切换CSS样式(增加删除样式)

（3）hasClass()判断元素是否含有某个class ,如果有，则返回true ,没有返回false.

（4）text()  例如如果要为某元素设置文本内容那么需要传递一个参数。$("p").text("我是新增加的文本");

遍历节点：

（1）children()用于取得匹配元素的子元素集合。$("body").children().

children()方法只考虑只元素，而不考虑任何后代元素（将标签和文本都输出出来）

（2）next()用于取得匹配元素后面紧邻的同辈元素

（3）prev()取得匹配元素前面紧邻的同辈元素

（4）siblings()取得匹配元素前后所有的同辈元素

（5）closest()用来取得最近的匹配元素

例如：给点击目标元素的最近的li元素添加颜色 $(document).bind("click",function(e){

$("e.target").closest("li").css("color","red");

})

（6）Jquery 遍历节点的方法：find(),filter(),nextAll(),prevAll(),parent(),parents()等

CSS-DOM操作：

          （1）CSS-DOM简单来说就是读取和设置style属性，style 属性很有用但是不能通过style 来提取设置外部引用的CSS，但是jquery 可以

一些对CSS操作的方法，参见api

（2）offset()  获取元素在当前窗口的偏移量，返回的对象包含两个属性 top ,left,只对可见元素有效

例如：var offert=$("p").offset();    var left =offset.left  var top=offset.top   

之后。。。。正在完善