JS获取节点的兄弟,父级,子级元素(原生和基于jquery) 、动态创建文档元素 、this和$(this)区别

一、JS获取节点的兄弟,父级,子级元素的方法

原生js

var s= document.getElementById("test");
del_ff(s);    //清理空格
var chils= s.childNodes;  //得到s的全部子节点
var par=s.parentNode;   //得到s的父节点
var ns=s.nextSbiling;   //获得s的下一个兄弟节点
var ps=s.previousSbiling;  //得到s的上一个兄弟节点
var fc=s.firstChild;   //获得s的第一个子节点
var lc=s.lastChild;   //获得s的最后一个子节点

jquery下的js

$.parent(expr)  找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")
$.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
$.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
$.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
$.prev()，返回上一个兄弟节点，不是所有的兄弟节点
$.prevAll()，返回所有之前的兄弟节点
$.next(),返回下一个兄弟节点，不是所有的兄弟节点
$.nextAll()，返回所有之后的兄弟节点
$.siblings(),返回兄弟姐妹节点，不分前后
$.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从<p>元素开始<span>,等同于$("p span")

二、动态创建内容是所用的DOM属性和方法

document.createElement(tagName)    
文档对象上的createElement方法可以创建由tagName制定的元素。如果以串div作为方法参数，就会生成一个div元素   
 
document.createTextNode(text)    
文档对象的createTextNode方法会创建一个包含静态文本的节点
 
<element>.appendChild(childNode)    
appendChild方法将指定的节点增加到当前元素的子节点列表。例如可以增加一个option元素，作为select元素的子节点
 
<element>.getAttribute(name)    
获取元素中的name属性的值
 
 <element>.setAttribute(name, value)    
 设置元素的name属性值
 
<element>.insertBefore(newNode,targetNode)    
将节点newNode作为当前元素的子节点传达到targetNode元素前面
 
<element>.removeAttribute(name)    
从元素中删除属性name
 
<element>.removeChild(childNode)
移除子元素
 
<element>.replaceChild(newNode,oldNOde)
替换子元素

<element>.hasChildNodes()
是否有子元素

三、jquery中this和$(this)的区别
this，表示当前的上下文对象是一个html DOM对象，可以调用html对象所拥有的属性，方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。

$()生成的是什么呢？实际上$()=jquery()，那么也就是说返回的是一个jquery的对象。
$(this)是jquery对象，能调用jquery的方法，例如click(), keyup()。

 $(function () {
   $('button').click(function () {
       alert(this);//this 表示原生的DOM
       //$(this)表示当前对象，这里指的是button
   })
});

http://www.jb51.net/article/45372.htm