$再学习--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!"); 
});

---

结语

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