常用javascript和jQuery方法的比较

1、创建对象并加入文档

  javascript:var para=document.createElement('p');document.body.appendElement('p');//这里是将p元素追加为body的lastchild子节点,如果想将新创建的p元素插入到已存在的某个元素之前,可以使用insertBefore()方法

     jQuery:jQuery提供了4种将新元素插入到已有元素之前或者之后的方法:append()、appendTo()、prepend()、prependTo()。代码例子:

    <p>World!</p  

  $('p').append('<b>Hello!</b>');
  //输出:<p>World!<b>Hello!</b></p>
 
  $('<b>Hello!</b>').appendTo('p');
    //输出:同上
 
  $('p').prepend('<b>Hello!</b>');
  //输出:<p><b>Hello!</b>World! </p>
 
  $('<b>Hello!</b>').prependTo('p');
  //输出:同上
2、插入新元素
  javascript:insertBefore();格式是parentElement.insertBefore(newElement,targetElement);其中newElement是新建的元素,targetElement是目标元素
  jQuery:同样提供了4种将新元素插入到已有元素之前或者之后的方法:after()、insertAfter()、before()、insertBefore();
3、复制节点
  javascript:var newReference=node.cloneNode(boolean);这个方法只有一个布尔值的参数,它的可取值只能是true或者false。该参数决定是否把被复制节点的子节点也一同复制到    新建节点中去。
  jQuery:clone()//复制节点后,被复制的新元素并不具有任何行为,clone(true)//复制节点内容及绑定的事件
4、删除节点:
  javascript:var newReference=element.removeChild(node)//将一个给定元素里删除一个子节点
  jQuery:remove()方法作用是从DOM中删除所有匹配的元素,remove()方法还可以与其他的过滤选择器结合使用。$('ul li').remove(li[title!='Hello']);
  empty()方法作用是清空节点
5、包裹节点:
  javascript中目前还没实现:
     jQuery:wrap() //将匹配元素用其他元素的结构化标记单独包裹起来      wrapAll() //将所有匹配的元素用一个元素包裹起来       wrapInner() //将匹配元素的子内容用其他结构化的   标记包裹起来
6、属性操作:设置属性节点、查找属性节点
  jQuery:设置和查找属性节点都是:attr() 。代码例子:$('p').attr('title'); //获取p元素的title属性;            $('p').attr('title','My title'); //设置p元素的title属性  
  $('p').attr('title':'My title','class':'myClass');  //当需要添加多个属性时,可以用"名:值"对的形式,中间用逗号隔开。
7、替换节点:
  javascript:var newReference=element.replaceChild(newChild,oldChild);
     jQuery:replaceWith()、replaceAll()
8、CSS-DOM操作:
    javascript:格式:element.style.property ,CSS-DOM能够读取和设置style对象的属性,其不足之处是无法通过它来提取外部CSS设置的样式信息
    jQuery:格式:$(selector).css() ;.css()方法获取元素的样式属性,此外,JQuery还提供了height()和width()分别用来获取元素的高度和宽度(均不带单位),而css(height)、      css(width)返回高宽,且带单位。
    注意:CSS中的如 "font-size"这样有"-"的,要使用首字母小写的驼峰式表示,如fontSize。
    
原文地址:https://www.cnblogs.com/sandianbaozi/p/2421676.html