$再学习--JS进阶（一）

1. $ or jQuery

       有了js框架之后，我们用的$就比较多了，但是对他的认识一直存在于模糊的阶段，最近项目中接触到了，勾起了自己的兴趣，深入学习一下吧。

1.1 jave script & jQuery

    如果我们要说$的话，一定要先说一下jQuery。 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

• 特点
  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代码： <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');  //输出：同上 6、插入新元素 JavaScript： insertBefore() 语法格式： parentElement.insertBefore(newElement,targetElement)  eg, 将一个img元素插入一个段落之前。 html代码： <img src="image.jpg" id="imgs" />  <p>这是一段文字</p>  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代码： <p>World!</p>  JQuery代码 $('p').after('<b>Hello!</b>');  //输出：<p>World! </p><b>Hello!</b>  $('<b>Hello!</b>'). insertAfter ('p');  //输出：同上 $('p').before('<b>Hello!</b>');  //输出：<b>Hello!</b><p>World! </p>  $('<b>Hello!</b>').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:  <p>hello</p> 想替换为： <h2>Hi</h2>  JQuery代码： $('p') .replaceWith('<h2>Hi</h2>'); 或者可以写成： $('<h2>Hi</h2>').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 揭开$的面纱

 jQuery是现在最流行的Javascript框架， 是其中最常见的符号，已经在jQuery留下了深深的烙印。那么$到底是什么东西，它可以接受一个字符，也可以接受一个文档对象，亦或者一个函数，也可以调用一个函数。接下来我会彻底分析这个符号背后隐藏的秘密。我们来看看jQuery构造函数的代码：

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）{}这个函数，这里，就可以下个结论。
    $就是jQuery的别名，实际调用jQuery.fn.init。
    $符号，其实是对jQuery类构造函数的引用，可以直接点出来他的静态方法。即是jQuery类的构造函数，支持各种条件的查找和生成并返回DOM对象构成jQuery对象，同时也是一个类，是所有jQuery静态方法的入口。

---

2. $ 使用

       总结了$三种具体的用法：如下

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

<p>one</p> <div> <p>two</p> </div> <p>three</p> <a href="#" id="test" onClick="jq()" >jQuery</a> 

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

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

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

       2.$()可以是$(element)，即一个特定的DOM元素。如常用的DOM对象有document、location、form等。如这样一行代码：
$(document).find(“div>p”).html());
$()中的document是一个DOM元素，即在全文寻找带<p>的<div>元素，并显示vp>中的内容。

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

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

---

结语

       我们常常使用一个东西，很多时候也不知道用的是什么，这也算是颗粒归仓吧。~