jQuery?----www.jQuery.com
jQuery的理念：write less, do more
jQuery的成就：世界排名前100的公司，46%都在使用jQuery,遠遠超過其他庫，微軟公司甚至把jQuery庫 作為了他們的官方庫。
what is jQuery?(這是我復制官網上的介紹，覺得說的很專業)
jQuery is a fast, small, and feature-rich(功能豐富) JavaScript library. It makes things like HTML document traversal and manipulation（循環和遍歷）, event handling（事件 處理）, animation（運動）, and Ajax（異步的js與xml） much simpler with an easy-to-use API that works across a multitude of browsers(跨瀏覽器). With a combination（組合） of versatility and extensibility（通用性和可擴展性的）, jQuery has changed the way that millions of people write JavaScript.
jQuery的特點？
輕量級腳本語言（Lightweight footprint）
css兼容性（css compliant）
跨瀏覽器（cross browser）
jQuery的核心思想
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="description" content=""> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>jQuery--jQuery的設計思想1</title> 8 <link rel="author" href="humans.txt"> 9 <script src="jquery-1.4.1.min.js"></script> 10 <script type="text/javascript"> 11 12 /* 13 1.選擇網頁元素 14 1.1 css選擇器 15 -$(document)//選擇整個文檔 16 -$("#myId")//選擇ID為myId的網頁元素 17 -$('div.myClass')//選擇class為myClass的div元素 18 1.2 jQuery特有的表達式 19 -$('a:first')//選擇網頁中第一個a元素 20 -$('tr:odd')//選擇表格的奇數行 21 -$('div:visible')//選擇可見的div元 22 2.方法函數化 23 1.1 原生的 24 -window.onload 25 -innerHTML 26 -onclick 27 1.2 jquery的 28 -$() 29 -html() 30 -click() 31 3.原生與jquery的關系 32 3.1 原生、jq可以共存 33 -$("#div1").html() 34 -oDiv.innerHTML 35 3.2 原生、jq不能混用 36 -$("#div1").innerHTML 37 -ODIV.html() 38 4.改變結果集 39 4.1 強大的過濾器 40 -$('div').has('p');//選擇包含p標簽的div標簽 41 -$('div').not('.myClass');//選擇class不等於myClass的div元素 42 -$('div').filter('.myClass');//選擇class等於myClass的div元素 43 4.2 相鄰元素查找 44 -$('div').next('p');//選擇div元素后面的第一個p元素 45 -$('div').parent();//選擇div元素的父元素 46 -$('div').children();//選擇div的所有子元素 47 5.鏈式操作 48 $('div').find('h3').eq(2).html('hello'); 49 --找到div元素，選擇其中的h3元素，選擇第3個h3元素，將它的內容改為Hello 50 51 jQuery還提供了.end()方法，使得結果集可以后退一步 52 ------>這個就使得我們可以用一個鏈式操作，寫完一整個效果都沒有問題。 53 6.取值與賦值合體 54 $('h1').html();//html()沒有參數，表示取出h1的值 55 $('h1').html('hello');//html()沒有參數Hello,表示對h1進行賦值 56 57 .val() 58 .attr() 59 .width() 60 61 取值是一組中的 第一個元素，賦值是所有的元素 62 7.元素移形換位 63 7.1 直接移動該元素 64 -$('div').insertAfter($('p'));//把div元素移動到 p元素后面 65 -$('div').appendTo($('p'));//把div元素剪切到p元素的后面 66 7.2 移動其他元素 67 -$('p').after($('div'));//把p元素加到div元素前邊 68 -$('div').append($('p'));//把p元素插入到div的里邊 69 區別：操作的元素不同 70 8.強大的創建 71 $('#ul').append('<li>aaaa</li>'); 72 === 73 var oLi = $('<li>'); 74 oLi.html('aaaa'); 75 $("#ul").append(oLi); 76 77 clone() 78 9.工具方法（重點） 79 9.1 構造函數上的方法 80 -$.each([],function(){}) 81 -$.trim($('div').attr('class'))--去掉class屬性的前后空格 82 83 解釋：$.方法：添加到構造函數，靜態方法 84 9.2 原型上的方法 85 -$('div').each(function(index,elements){}) 86 index--索引 87 elements--當前所有元素中正在操作的 88 89 demo: 90 function $(){ 91 $.each = function(){ 92 //構造函數下面的方法:$.each() 93 } 94 $.prototype.each = function(){ 95 //原型下面的方法：$('div').each() 96 } 97 } 98 10.事件操作 99 10.1 獨立事件 100 - click() 101 - mouseover() 102 10.2 通用事件 103 - bind();//同一個對象上，可綁定多個事件 104 - one();//綁定的事件只可以執行一次 105 -unbind();//取消 106 - e:event對象 107 - pageX等;//鼠標相對於屏幕的坐標，原生中是clientX 108 - 阻止默認與冒泡;//return false--既可以阻止冒泡又可以阻止默認事件 109 110 demo:toggle--循環執行，后面可以接多個函數 111 $('input').toggle(function(){},function(){},function(){}) 112 hover--$('div').hover(function(){},function(){}) 113 11.運動效果 114 11.1 常見效果 115 -.fadeIn();//淡入 116 -.fadeOut();//淡出 117 -.slideDown();//向下展開 118 -.slideUp();//向上卷起 119 11.2 復雜效果 120 -.animate();//運動 121 -.stop();//阻止前面的運動效果，執行當前的運動事件 122 12.插件機制(plugins)--demo 123 在JQ的源碼上進行拓展，一個個做好的應用 124 13.UI組件（jQuery UI） 125 JQ官方提供的功能效果和UI樣式 126 14.手機、社區、論壇 127 128 */ 129 </script> 130 </head> 131 <body> 132 </body> 133 </html>