jQuery

prototype(old)、YUI、Dojo、Bootstrap(含jQuery, LESS)、node.js、AngularJS、jQuery等.
http://www.oschina.net/news/64218/2015-frameworkds-need-to-learn   --2015年需要了解的前端框架和语言
http://www.csdn.net/article/2015-12-08/2826418-TIOBE --2015年編程工具排行榜.英文:http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html
jQuery是由美國人John Resig創建,輕量級的js庫,宗旨："write less, do more"--寫更少的代碼,做更多的事情.
CDN，目前有兩家提供，一個是google、另一個是Microsoft.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

1.$()是jQuery()的簡寫或叫別名，用$代替了jQuery。
2.$ vs $()
  a.$是原型方法函數(jQuery prototype),通用方法是jQuery底層的函數,不需要選擇器(selections).如$.each() 訪問遍歷數組或object.
  http://learn.jquery.com/using-jquery-core/utility-methods/ //--很多jQuery底層自己的代碼都是用這些通用函數寫的。
  b.$()此為使用jQuery的選擇器進行處理,大部分我們是用這種命名格式。如:$().each()；$().each()與$.each()的區別如上.
3.$(document).ready() --準備就緒,頁面加載OK再執行.防止未加載完就執行.
--加載OK就執行.
$(document).ready(function(){
   // jQuery methods go here...
});
--此為以上的縮寫.
$(function(){
   // jQuery methods go here...
});
3.基本語法:$(selector).action()
  $(this).hide() --隱藏當前元素(標簽).
  $("p").hide() --隱藏所有的<p>元素(標簽).
  $(".test").hide() --隱藏所有class="test"的元素(標簽).
  $("#test").hide() --隱藏id="test"的元素(標簽).
 
  $("*") --選擇所有元素.
  $(this) --選擇當前元素.
  $("p.intro") --選擇<p>,且其class="intro"的所有<p>元素.
  $("p:first") --選擇body元素下的第一個p元素.可以取值：$("p:first").html();
  $("ul li:first") --選擇第一個ul元素下的第一個li元素。
  $("ul li:first-child") --選擇所有ul元素下的第一個li元素。
  $("[href]") --選擇包含href屬性的所有元素.
  $("a[target='_blank']") --選擇<a>元素target屬性值等于"_blank"的所有<a>元素。 jQuery不建議用此種方法,為使用老版本browser變慢.
  $("a[target!='_blank']") --選擇<a>元素target屬性值不等于"_blank"的所有<a>元素。
  $(":button") --選擇所有<button>元素與<input>元素type="button"的按鈕標簽.
  $("tr:even") --選所有偶數行。
  $("tr:odd") --選所有奇數行。

4.$().attr()方法
  a.設置屬性值:
$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );

$( "a" ).attr({
title: "all titles are the same too!",
href: "somethingNew.html"
});
  b.取出屬性值:
  $( "a" ).attr( "href" ); // Returns the href for the first a element in the document
5.selector
  $(this) //--選擇當前元素.
  $("#myId" ); --id選擇器
  --css是改變所選擇的元素添加樣式，$是給所選擇的元素添加行為、動作。
  a.元素(標簽)選擇器:css與jQuery比對如下：
h1 {
text-align: left;
}
$("h1").hide();
  b.類選擇器：
.my_class{
position: absolute;
}
$(".my_class").slideUp();
  c.id選擇器
#my_id {
color: #3300FF;
};
$("#my_id").fadeOut();
  d.父子(后裔)選擇器
    $("div p") //--父親、兒子
$("div div p") //--爺爺、父親、兒子
$("div p#my_blurb") //--父為div,子為p,并且是子元素的id等于my_blurb的p元素.
$(".fish").parent().parent(); //--上層的上一層sibling
$(".meat").before("<li>Tofu</li>"); //--在類meat之前新增豆腐.
$(".meat").after("<li>Tofu</li>"); //--在類meat之后新增豆腐.
$("h2").replaceWith("<h1>My Menu</h1>"); //--用h1替換掉h2.
$(".fish").parent();
$(".menu_list").children();
$(".fish").prev();
$(".fish").next();
$(".menu_list").parent().next().remove();
  e.組合選擇器
    $("p,span,h2")
  f.過濾(篩選)選擇器
$(".menu_list").children().first(); //--.menu_list類下子元素的第一個子元素。
$(".menu_list").children().last(); //--最后一個.
$(".menu_list").children().eq(0); //--下標從0開始,0就是第一個.

//--parents()是取.menu_list的所有祖輩節點(父/祖/...直到html節點);再用filter過濾取出某個節點.
var aparent = $(".menu_list").parents().filter('.organic');//--取出.organic節點.
$.each(aparent, function() {
  //alert($(this).attr("class"));
  alert($(this).html());
});
//--取ul.menu_list下的所有子元素,不包含.local.
var achild = $("ul.menu_list").children().not('.local');
$.each(achild, function() {
  document.write($(this).attr('class') + "<br />");
});

var eval = $(".menu_list li").eq(3); //--取.menu_list下子元素li的第4個元素.

6.CSS語法
  a.設置單個樣式:$("").css("attribute","value");
  $("#change_me").css("color","purple");
  $("#myTop").css({"background-color":"blue"});
  b.設置多個樣式:$("").css({"attribute":"value","attribute":"value"});
  $("#change_me").css({
"color":"purple",
"background-color":"gray"
  });
 
  $("#my_div").animate({opacity: 0, width: 200, height:300}, 5000);

7.代替innerHTML屬性
$( "h1" ).html( "hello world" ); //--寫入值.
$( "h1" ).html(); //--取值.類似innerHTML
8.綁定事件方法
  a.$().eventName(function);
    //--給id等于myElement的元素，綁定click事件及函數。
$("#myElement").click( function() {
alert($(this).text());
});
  b.bind方法:$().bind("eventName",function);
    //--給id等于myElement的元素，綁定click事件及函數。
$("#myElement").bind ('click', function() {
alert($(this).text());
});
  c.取消綁定:unbind
    //--取消myElement的click事件
$("#myElement").unbind('click');
//--取消id==myElement的所有事件.
$("#myElement").unbind();

//--上課例子(jQuery Learn training Example)：
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
<script type="text/javascript">
//--css選擇器變成jQuery選擇語法:$("原css選擇器"),多了$/()/引號.
$(function (){
//alert("jquery test.");
$("#p1").hide();
$(".sp").hide();
$(".sp").fadeIn(2000);
//$("div").fadeOut(2000);
$("div span").hide();
$("#p1").show();
//$("p").slideUp("slow");
});

//--js方法
document.getElementById("p1").innerHTML ="js innnerHTML.";
//--jQuery方法.
$("#p1").html("jquery html.");

//--js取屬性與設置屬性.
//document.getElementById("a1").getAttribute("href");
//document.getElementById("a1").setAttribute("href", "www.baidu.com");
//--jQuery取與設置屬性.
$("a").attr("href", "http://www.csdn.net");
//alert("jquery == " + $("#a1").attr("href"));
//--設置css樣式.
$("#p1").css({color:"yellow"});

//--綁定事件.
/*$("#clickme" ).click(function(){
alert("dym bind.");
});*/
$("#clickme").bind("click", function(){
  alert( $(this).text() );
});
//--頁面當中的第一個li元素.
alert($("li").first().html());
alert($("li").last().html());
//--第一步選擇所有p元素,第二步是在第一步結果基礎上過濾選擇出class等于selected與第一個p元素,第三步是再從第二步中選擇出的元素中選擇第一個元素。
alert($("p").filter(".selected, :first").filter(":first").html());
//--find()方法只適用于后代子元素.
</script>

9.$.each遍歷數組、Object等集合.
<ul class="menu_list">
<li class="local11">11</li>
<li class="local22">22</li>
<li class="list1">33</li>
<li class="list2">44</li>
<li class="list3">55</li>
</ul>
<script>
//--從下標從1取到2,3本身不取;就取1到3-1.
var arrSlice = $(".menu_list").children().slice(1,3);
document.write(arrSlice);
//--i表示集合的下標，n為集合中i下標具體的值.
$.each(arrSlice, function(i, n) {
  alert($(n).attr("class")); //jQuery方式取值.
  //alert($(this).attr("class")); //不傳參數用$,則用此方法.
  //alert(this.getAttribute("class")); //不傳參數用原DOM方式取值.
});

$.each([ "foo", "bar", "baz" ], function( idx, val ) {
    console.log( "element " + idx + " is " + val );
});

$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
    console.log( k + " : " + v );
});
</script>
10.$().each遍歷數組、Object等集合.
    <ul>
<li>foo</li>
<li>bar</li>
</ul>
--遍歷li標簽.
$("#each").click(function(){
$("li").each(function(index){
--用jQuery取值.
console.log(index + '--' + $(this).text());
--用原生態的js取值.
console.log( index + ": " + this.innerHTML);
});
});

11. 執行多個函數:
$( "#content" )
.find( "h3" )
.eq( 2 )
.html( "new text for the third h3!" );
//--使用.end方法.
$( "#content" )
.find( "h3" )
.eq( 2 )
.html( "new text for the third h3!" )
.end() // Restores the selection to all h3s in #content
.eq( 0 )
.html( "new text for the first h3!" );


Ajax
1.Ajax
JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()
2$.load方法
  a.$(selector).load(URL,data,callback) 或 .load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ])。
  URL：是要發送請求的地址,這是必選條件;加載HTML指定的節點:url selector,記得之間有空格.
  data[可選]：是要傳送過去的數據,要用{id:123}括起來;帶此參數的用post方法,否則用get方法.
  callback[可選]：回調函數(請求成功或失敗都會調用),server返回三個參數.
responseText --請求server返回的data.
    textStatus --包含請求狀態描述如：success、error、notmodify、timeout四種.
    XMLHttpRequest --返回XMLHttpRequest對象
  Example：
  $("#div1").load("demo_test.txt #p1",{userId:25}, function(responseTxt, statusTxt, xhr){
            if(statusTxt == "success")
                alert("External content loaded successfully!");
            if(statusTxt == "error")
                alert("Error: " + xhr.status + ": " + xhr.statusText);
        });

//--用load取回html資料,并寫到指定的標簽里面.Using .load() to populate an element
$( "#newContent" ).load( "/foo.html" );
//--取回html并選擇里面指定的元素內容寫到當前面面的指定元素.Using .load() to populate an element based on a selector
$( "#newContent" ).load( "/foo.html #myDiv h1:first", function( html ) {
alert( "Content updated!" );
});
3$.get與$.post方法
  a.get(url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
URL：是要發送請求的地址,這是必選條件;
data[可選]：是要傳送過去的數據,要用{id:'123'}括起來;參數將加在URL后面傳給server;
callback[可選]：回調函數(返回狀態為成功success時才執行);
data --代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等;
textstatus --代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
XMLHttpRequest --返回XMLHttpRequest對象
type[可選]：server返回內容的格式,包括:xml/html/script/json/text.
  b.$.get方法.一般用這個語法:$.get(URL,callback);
<button>Send an HTTP GET request to a page and get the result back</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>

// Get plain text or HTML
$.get( "/users.php", {
userId: 1234
}, function( resp ) {
console.log( resp ); // server response
});
  c.$.post方法.一般用這個語法：$.post(URL,data,callback);
<button>Send an HTTP POST request to a page and get the result back</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("demo_test_post.asp",
{
  name: "Donald Duck",
  city: "Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
4.$.ajax方法
// Using the core $.ajax() method
$.ajax({

// The URL for the request
url: "post.php",

// The data to send (will be converted to a query string)
data: {
id: 123
},

// Whether this is a POST or GET request
type: "GET",

// The type of data we expect back
dataType : "json",

// Code to run if the request succeeds;
// the response is passed to the function
success: function( json ) {
$( "<h1>" ).text( json.title ).appendTo( "body" );
$( "<div class=\"content\">").html( json.html ).appendTo( "body" );
},

// Code to run if the request fails; the raw request and
// status codes are passed to the function
error: function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
},

// Code to run regardless of success or failure
complete: function( xhr, status ) {
alert( "The request is complete!" );
}
});
5.解析xml
  a.JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历.
  b.xml文件如下：
<?xml version="1.0" encoding="UTF-8"?>
<finishers>
<runner>
<fname>John</fname>
<lname>Smith</lname>
<gender>m</gender>
<time>25:31</time>
</runner>
<runner>
<fname>Viking</fname>
<lname>Wei</lname>
<gender>m</gender>
<time>30:30</time>
</runner>
<runner>
<fname>韋作</fname>
<lname>謀</lname>
<gender>m</gender>
<time>52:52</time>
</runner>
</finishers>
  c.解析以上xml,與解析DOM是一樣的.
$("#getxml").click(function(){
$.post("finishers.xml",null,function(data,status,xhr){
//console.log(data);
//console.log(status);
//console.log(xhr);
$(data).children("finishers").children("runner").each(function(index){
//console.log(index + '--' + $(this).text());
//console.log( index + ": " + this.innerHTML);
var str="";
$(this.innerHTML).each(function(index){
//--只取元素標簽的文本.nodeType:1.為元素對象,2.為屬性,3.為文本;
if(this.nodeType == 1){
str += this.innerHTML + '--';
//console.log( index + ": " + this.innerHTML + '--'+ $(this).text());
}
});
console.log(str);
});
});
}); 
6.JSON
  a.JSON特征
    a1.JSON代表的是JavaScript Object Notation.JSON stands for JavaScript Object Notation
    a2.JSON是一個輕量級數據交換格式.JSON is a lightweight data-interchange format
    a3.JSON是不依賴于任何語言,所有的server都可用,如jsp、php、asp等都可用.JSON is language independent *
    a4.JSON是可自我描述并很容易理解.JSON is "self-describing" and easy to understand
a5.是跨語言的,任何開發語言都可以用.
a6.JSON語法是JavaScript Object的創建語法是一樣的。
  b.json 語法規則
b1.數據以名稱/值來處理,如java中的鍵值對,是成對的. Data is in name/value pairs
b2.數據之間用,號隔開.Data is separated by commas
b3.{}表示是一個對象.Curly braces hold objects
b4.[]是表示一個數組.Square brackets hold arrays
  c.JSON.parse或eval('(' + json + ')')解析json.
<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

<p id="demo2"></p>
<p id="eval"></p>
<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';
//--JSON.parse是browser自帶的一個對象,ie8及以上有,ie6/7沒有些對象.因為eval解析不安全,也為了統一標準解析json.
var obj = JSON.parse(text);
document.getElementById("demo2").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
//--加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。
var oeval = eval('(' + text + ')');
document.getElementById("eval").innerHTML = oeval.name;
</script>

<script type="text/javascript">
var str = '{"columnName": "vou_nm","columnValue": "裕盛鞋業有限公司（236）領料申領單","type": [{},{},{}],"description": "表單名稱"}';
document.write(str + "<br />");
//var str1 = "var aa = " + str;
var jsn = eval("(" + str + ")");
document.write(typeof(jsn));
document.write('jsn<br />');
document.write(typeof(jsn) + '--' + jsn.columnName + '--' + jsn['columnValue']);

document.write('<br /><br />---------------');
obj = JSON.parse(str);
document.write(typeof(obj));
document.write('obj<br />');
document.write(obj.description);
</script>
  d.Function解析json.
<p id="eval"></p>
<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';
var jfun = (new Function("return " + text))();
document.getElementById("eval").innerHTML = jfun.name;
</script>
  e.JSON.parse解析解決ie6/7問題
    --把json2.js的代碼copy到當前新建的js文件當中即可.
下載json2.js文件url:https://github.com/douglascrockford/JSON-js
--引入json2.js文件即可使用.
    <script src="json2.js"></script>
  f.eval與new Function有安全方面的問題，盡量不用。使用json2.js可以解決兼容問題。


// Get JSON-formatted data from the server
$.getJSON( "/details.php", function( resp ) {

// Log each key in the response data
$.each( resp, function( key, value ) {
console.log( key + " : " + value );
});
});
// Add a script to the page, then run a function defined in it
$.getScript( "/static/js/myScript.js", function() {
functionFromMyScript();
});

http://my.oschina.net/chape/blog/157332


eclipse刪除插件:
Help-About Eclipse-Installation Detail-选择你的插件-Uninstall

1.安裝Aptana:
Help-->Install New Software-->click Add button-->
(Add Repository windwo) Name:aptana
Location:http://d1iwq2e2xrohf.cloudfront.net/tools/studio/plugin/install/studio3/3.4.0.201304151542/
2.下載jquery提示包:javascript-jquery.ruble-stable.zip
https://github.com/aptana/javascript-jquery.ruble
3.解壓zip:將zip解壓的文件放到如下路徑,重啟即可.
C:\Documents and Settings\[用户名]\Aptana Rubles\javascript-jquery.ruble
如我的路徑如下:
C:\Documents and Settings\ASC123198.C03710130201\Aptana Rubles\javascript-jquery.ruble
4.設置project.
選擇project-->右鍵properties-->Project Natures-->把web選上即可.
5.改變顏色
windows- >preferences- >aptana- >themes
6.js文件設計：這樣就可以輸入$號了.
選擇js文件-->右鍵單擊-->open with-->javascript source editor

安装OK后：Commands > Bundle Development > Install Bundle
选择jQuery 给它自动绑定jQuery,在我们办公室不能访问，只能下载了。(以下连接是原版的回答)
https://github.com/aptana/github.ruble/issues/1#issuecomment-4020498



參考資料:
http://my.oschina.net/ohcoding/blog/267822
http://www.educity.cn/wenda/468562.html