本文共 5909 字，大约阅读时间需要 19 分钟。

1. $ or jQuery

1.1 jave script & jQuery

• 特点

  1. 轻量级、链式语法、CSS1-3选择器、跨浏览器、简单、易扩展；
  2. jQuery是一种独立于服务器端代码的框架，独立于ASP.NET或者JAVA；
  3. jQuery是当前很流行的一个JavaScript框架，使用类似于CSS的选择器，可以方便的操作HTML元素，拥有很好的可扩展性，拥有不少插件。

• 描述

  1. 对于程序员来说，简化javascript和ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。javaScript框架实际上是一系列工具和函数。增加了代码的复用。
  2. 对于用户来说，改善了页面的视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。

• 区别

  他们在使用上还是有一些不同，我们可以想一下，jQuery是对java script的封装，那么如果直接更改属性的话，一般是java script，如果是通过传递参数的话，一般是jQuery了。下面试自己整理收集的一些情况， 分享一下~

1、加载DOM区别 JavaScript： window.onload  function first(){  alert('first');  }  function second(){  alert('second');  }  window.onload = first;  window.onload = second;  //只会执行第二个window.onload；不过可以通过以下方法来进行改进： window.onload = function(){  first();  second();  }  Jquery： $(document).ready()  $(document).ready(){  function first(){  alert('first');  }  function second(){  alert('second');  }  $(document).ready(function(){  first();  }  $(document).ready(function(){  second();  }  //两条均会执行 } 2、获取ID  JavaScript： document.getElementById('idName')  JQuery： $('#idName') 3、获取Class  JavaScript： JavaScript没有默认的获取class的方法 JQuery： $('.className') 4、获取TagName  JavaScript： document.getElementsByTagName('tagName')  JQuery： $('tagName') 5、创建对象并加入文档中 JavaScript： var para = document.createElement('p');  //创建一个p元素 document.body.appendElement(para);  //将p元素追加为body的lastchild子节点，如果想将新创建的p元素插入到已存在的某个元素之前，可以使用insertBefore()方法 JQuery：JQuery提供了4种将新元素插入到已有元素（内部）之前或者之后的方法：append()、appendTo()、prepend()、prependTo()。  格式：$( html );  eg，html代码： 
World!
  $('p').append('Hello!');  //输出：
World!Hello!
  $('Hello!').appendTo('p'); //输出：同上 $('p').prepend('Hello!');  //输出：
Hello!World! 
  $('Hello!').prependTo('p');  //输出：同上 6、插入新元素 JavaScript： insertBefore() 语法格式： parentElement.insertBefore(newElement,targetElement)  eg, 将一个img元素插入一个段落之前。 html代码：   
这是一段文字
  JavaScript代码： var imgs = document.getElementById('imgs');  var para = document.getElementsByTag('p');  para.parenetNode.insertBefore(imgs,para);  JQuery： JQuery提供了4种将新元素插入到已有元素（外部）之前或者之后的方法：after()、insertAfter()、before()、insertBefore()。  格式：$( html );  eg，html代码： 
World!
  JQuery代码 $('p').after('Hello!');  //输出：
World! 
Hello!  $('Hello!'). insertAfter ('p');  //输出：同上 $('p').before('Hello!');  //输出：Hello!
World! 
  $('Hello!').insertBefore('p');  //输出：同上 7、复制节点 JavaScript： reference = node.cloneNode(deep) 这个方法只有一个布尔型的参数，它的可取值只能是true或者false。该参数决定是否把被复制节点的子节点也一同复制到新建节点里去。 JQuery： clone() //复制节点后，被复制的新元素并不具有任何行为 clone(true) //复制节点内容及其绑定的事件  备注：该方法通常与appendTo()、prependTo()等方法结合使用。 8、删除节点 JavaScript： reference = element.removeChild(node)  removeChild()方法将一个给定元素里删除一个子节点 JQuery： remove();  remove()方法作用就是从DOM中删除所有匹配的元素，remove()方法还可以与其他的过滤选择器结合使用，非常方便。 eg，将ul li下的title不是"Hello"的li移除： $('ul li').remove(li[title!='Hello']);  empty();  empty()方法作用是清空节点。 9、包裹节点 JavaScript： JavaScript暂无 JQuery： wrap() //将匹配元素用其他元素的结构化标记单独包裹起来 wrapAll() //将所有匹配的元素用一个元素包裹起来 wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来 10、属性操作：设置属性节点、查找属性节点 JavaScript： document.getElementsByTagName('tagName')  JQuery： JQuery中设置和查找属性节点都是：attr() 。 $('p').attr('title'); //获取p元素的title属性； $('p').attr('title','My title'); //设置p元素的title属性 $('p').attr('title':'My title','class':'myClass'); //当需要添加多个属性时，可以用"名：值"对的形式，中间用逗号隔开。 11、替换节点 JavaScript： reference = element.replaceChild(newChild,oldChild) 该方法是将一个给定父元素里的一个子节点替换为另外一个节点。 JQuery： replaceWith()、replaceAll()  eg:  
hello
 想替换为： 
Hi
  JQuery代码： $('p') .replaceWith('
Hi
'); 或者可以写成： $('
Hi
').replaceAll('p'); 12、CSS-DOM操作 JavaScript：  格式：element.style.property  CSS-DOM能够读取和设置style对象的属性，其不足之处是无法通过它来提取外部CSS设置的样式信息，而JQuery的.css()方法是可以的。  注意点：CSS中的如"font-size"这样有"-"的，要使用首字母小写的驼峰式表示，如fontSize。 JQuery：  格式：$(selector).css()  css()方法获取元素的样式属性  此外，JQuery还提供了height()和width()分别用来获取元素的高度和宽度（均不带单位），而css(height)、css(width)返回高宽，且带单位。

1.2 揭开$的面纱

var jQuery = (function() {
         //创建jQuery对象,给所有的jQuery方法提供统一的入口,避免繁琐难记      var jQuery = function( selector, context ) {
             //jQuery的构造对象,调用了jQuery.fn.init方法          //最后返回jQuery.fn.init的对象          return new jQuery.fn.init( selector, context, rootjQuery );      },      .....      //定义jQuery的原型,jQuery.fn指向jQuery.prototype对象      jQuery.fn = jQuery.prototype = {      //重新指定构造函数属性,因为默认指向jQuery.fn.init      constructor: jQuery,      init: function( selector, context, rootjQuery ) {
   .....},      ......      }      ......      //返回jQuery变量,同时定义将全局变量window.jQuery和window.$指向jQuery      return (window.jQuery = window.$ = jQuery);  })();

    我们可以看出，当首次执行完毕后，全局变量 $ 和jQuery，都是指向了var jQuery=function（selector，context）{}这个函数，这里，就可以下个结论。

2. $ 使用

       1. $()可以是$(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。 比如：$(“a”)构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签。如： $(“a”).click(function(){…}) 就是在点击页面上的任何一个链接时的触发事件。确切地说，就是jQuery用<a/>这个标签构建了一个对象$(“a”)，函数 click()是这个jQuery对象的一个（事件）方法。 比如有这样一段HTML代码：

one
 
   
 
    
two
 
   
 
three
 jQuery

       而操作这段HTML的是如下一条语句：

alert($("div>p").html());

       $()中的是一个查询表达式，也就是用“div>p”这样一个查询表达式构建了一个jQuery对象，然后的“html()”意思是显示其html内容，也就是上面HTML代码段的[two]。再如：

       2.$()可以是$(element)，即一个特定的DOM元素。如常用的DOM对象有document、location、form等。如这样一行代码：

       3、$()可以是$(function)，即一个函数，它是$(document).ready()的一个速记方式。如常见的形式是这样的

$(document).ready(function(){
    alert("Hello world!"); }); //可变形作： $(function(){
    alert("Hello world!"); });

结语

转载地址：http://soexi.baihongyu.com/