js和jQuery的DOM操作

h5移动端前端开发 前端与移动开发总结 前端开发模拟移动端

1，创建元素节点
传统的JavaScript的方法，创建元素节点

 程序代码
var a = document.createElement（“p”）;

jquery的中创建节点的方法是：

 程序代码
$（ ‘<P> </ p>’）;

和createElement（）一样，创建出来的新元素节点不会被自动添加到文档里。
如果想把它添加到文档里，可以使用jquery中的append（）或者insertAfter（）方法或者before（）等方法。
比如：

 程序代码
var a = $（'<p> </ p>’）; 
$（ ‘主体’）附加的（a）; //添加到体元素的最后

2，创建文本节点
传统的Java脚本方法，创建文本节点

 程序代码
var b = document.createTextNode（“我的演示”）;

通常创建文本节点和创建元素节点配合使用。
比如：

 程序代码
var mes = document.createTextNode（“hello world”）; 
var container = document.createElement（“p”）; 
container.appendChild（MES）; 
document.body.appendChild（容器）;

而在jQuery的中创建节点就不必那么麻烦了：

 程序代码
$（'<p> hello world </ p>’）;

和createElement（）一样，创建出来的新元素节点不会被自动添加到文档里。
如果想把它添加到文档里，可以使用jQuery中的append（）或者insertAfter（）方法或者before（）等方法。
比如：

 程序代码
var a = $（'<p> hello world </ p>’）; 
$（ ‘主体’）附加的（a）; //添加到体元素的最后

3，复制节点
传统的JavaScript的方法，复制节点：
比如：

 程序代码
var mes = document.createTextNode（“hello world”）; 
var container = document.createElement（“p”）; 
container.appendChild（MES）; 
document.body.appendChild（容器）; 
var newpara = container.cloneNode（true）; // true和false的区别
document.body.appendChild（newpara）;

注意：
是：是<p> aaaa </ p>克隆
.false：只克隆<p> </ p>，里面的文本不克隆。
可以用firebug看看。

在jQuery的中复制节点：

 程序代码
var a = $（'<p> hello world </ p>’）; 
$（ ‘身体’）追加（一）; 
var clone_a = a.clone（）; 
$（ ‘身体’）追加（clone_a）;

和createElement（）一样，复制出来的新元素节点不会被自动添加到文档里。
如果想把它添加到文档里，可以使用jQuery中的append（）或者insertAfter（）方法或者before（）等方法。
另外还有一个注意：如果克隆后，ID一样，不要忘记用.attr（ “ID”， “NEW_ID”）来改变新的节点的ID。

4，插入节点
传统的javascript方法，插入节点：
比如：
appendChild（）：
给元素追加一个子节点，新的节点插入到最后。

 程序代码
var container = document.createElement（“p”）; 
document.body.appendChild（容器）;

的insertBefore（）：
顾名思义，就是把一个新的节点插入到目标节点的前面。

 程序代码
Element.insertBefore（newNode，targerNode）;

在jQuery的中插入节点比的javascript自带的多了很多，
比如：

 引用内容

.append（）
.appendTo（）
.pRepend（）
.prependTo（） 
。经过（）
.insertAfter（） 
。之前（）
.insertBefore（）

所以对dom操作的简化也是jquery的亮点之一。

5、删除节点
传统的javascript方法，删除节点：
比如：

 程序代码
var b = document.getElementById(“b”);
var c = b.parentNode;
c.removeChild(b);

在jQuery中的删除节点：
比如：

 程序代码
$(‘#test2’).remove();

6、替换节点
传统的javascript方法，替换节点：
比如：

 程序代码
Element.repalceChild( newNode , oldNode );

oldNode必须是Element的一个子节点。

在jQuery中的替换节点：
比如：

 程序代码
$(“<p>替换 test1！</p>”).replaceAll(“#test1”);

7、设置属性,获取属性
传统的javascript方法，设置属性,获取属性：
比如：

 程序代码
setAttribute();//设置
var a  = document.createElement(“p”);
a.setAttribute(“title”,”my demo”);

不管以前有没有title属性，以后的值是 my demo。

 程序代码
getAttribute();//获取
var a =document.getElementById(“CSSrain”);
var b = a.getAttribute(“title”);

获取的时候，如果属性不存在，则返回空，

在jQuery中的设置属性,获取属性：
比如：

 程序代码
$(“#test1”).attr({ “class” : “test” , “title” : “TestDemo!” });
$(“#test1”).attr(“class”);

8、查找节点
查找节点对jQuery来说 简直是小菜一碟.
jQuery最引入关注的就是查找节点，也就是通常所说的选择器.
比如：

 程序代码

$(‘#id’)
$(‘.class’)
$(‘tag’)
$(‘tag.class’)
$(‘#id tag’)
$(‘tag#id’)
$(‘#id:visible’)
$(‘#id .class’)
$(‘.class .class’)

移动前端开发书籍 web前端开发包括移动端吗 移动前端开发ppt