JQuery 基本知識

寫在前面
若是十八般武藝都融會貫通，若是什麼兵器你都耍得有模有樣，那麼這篇博文你大能夠跳過了。只是在忘記的時候，能夠拿出來溫習溫習。

回到頂部
v基本概念
JQuery是繼prototype以後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各類瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將再也不支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery可以使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只須要定義id便可。

簡單點一句話歸納： Jquery不是一門獨立的語言，是javascript的一個類庫或框架

回到頂部
v各類選擇器
1.基本選擇器：

$("div")標記選擇器
$(".div")類別選擇器
$("#div")id選擇器
$("*")通用選擇器
$("div,.nav,#box")組合選擇器
2.層次選擇器：

$("div p")後代選擇器 div裏面全部的p
$("div>p")子選擇器 div裏面的下一級p
$("div+p")兄弟選擇器 下一個兄弟元素，div後面的p
$("div~p")div後面全部的兄弟元素，div後面全部的p
3.簡單選擇器：

$("div:first")找到第一個div
$("div:last")找到最後一個div
$("div:eq(index)")找到索引位置的div
4.內容選擇器：

$("div:contains(文本內容)")找到包含文本內容的div
5.可見性選擇器：

$("div:visible")找到全部顯示的div元素
$("div:hidden")找到全部隱藏的div元素
6.屬性選擇器：

$("div[align]")具備align這個屬性的div
$("div[align=right]")具備align這個屬性且屬性值是right的div
7.表單選擇器：

$("div:input")找到div內全部的表單元素
$("div:checkbox")找到div內全部的複選框
$("div:radio")找到div內全部的表單選框
$("div:password")找到div內全部的密碼框
$("div:text")找到div內全部的文本框
$("div:selected")找到div內全部被選中的下拉列表框
回到頂部
v過濾選擇
first()找到第一個元素
last()找到最後一個元素
eq()找到索引值的元素
filter("條件")篩選
find()查找後代元素 =$("div p")
next()下一個兄弟元素 =$("div+p")
nextAll()後面全部的兄弟元素 =$("div~p")
prev()前一個元素
parent()父元素
not()除了...以外的
回到頂部
vJquery操做
1.操做屬性：

對象.attr("屬性名") 獲取屬性的值
對象.attr("屬性名","屬性值") 設置屬性的值 ps:值得一提的是對於部分(radion等)表單元素設置屬性值使用prop
對象.removeAttr("屬性名") 移除屬性
2.操做樣式：

addClass()添加樣式
removeClass()刪除樣式
toggleClass()切換樣式
對象.css({"屬性名":"屬性值","屬性名":"屬性值"})
3.操做內容：

html()獲取/改變非表單元素的其餘標籤的內容
text()獲取/改變非表單元素的其餘標籤的文本內容
val（）獲取/改變表單元素的value值
4.操做寬高：

width()獲取/改變元素的寬
height()獲取/改變元素的高
5.Jquery事件：

js的事件去掉on就是jquery的事件
回到頂部
vJquery DOM
1.DOM操做：

$("父對象").append("子對象")在父對象裏向後追加子對象
$("父對象").prepend("子對象")在父對象裏向前追加子對象
$("父對象").before("子對象")在父對象前面添加子對象
$("父對象").after("子對象")在父對象後面添加子對象
回到頂部
vJquery 其它
1.位置：

length() 獲取元素的個數/長度
size()獲取元素的個數/長度
index()獲取同輩元素的索引位置，返回值是數值，從0開始
get()獲取索引位置的元素，將jq的對象轉成js對象
回到頂部
v博客總結
關於jquery 入門教程就寫到這裏，只是爲了但願幫助到一些入門的朋友，或者一些像我這樣健忘的人朋友恢復記憶。

v閱讀目錄
v寫在前面
v基本概念
v函數介紹
v瀏覽器對象BOM
vDOM
v正則表達式
v博客總結
v博客前言
子曰：「溫故而知新，能夠爲師矣。」孔子說：「溫習舊知識從而得知新的理解與體會，憑藉這一點就能夠成爲老師了。「 尤爲是我們搞程序的人，無論是否是全棧工程師，都是集十八般武藝於一身。不過有時候有些知識若是有好久沒用了的話，就會忘記，甚至是忘的你一點都想不起來，尤爲是一些基礎的東西。因此我纔打算寫個"溫故而知新"的系列博文出來，一來是這些基礎的東西我比較健忘，之後方便本身翻閱；二來是但願能夠幫助到一些剛入門的朋友。這個系列記錄的全部知識點都是最最最(重要的事情說三遍)基礎的知識。大部分都是我學習的時候所積累的筆記。

溫故而知新系列都是一些基礎知識，大神能夠直接跳過。

jQuery是目前使用最普遍的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其餘庫。微軟公司甚至把jQuery做爲他們的官方庫。對於網頁開發者來講，學會jQuery是必要的。由於它讓你瞭解業界最通用的技術，爲未來學習更高級的庫打下基礎，而且確實能夠很輕鬆地作出許多複雜的效果。

1、選擇網頁元素jQuery的基本設計和主要用法，就是"選擇某個網頁元素，而後對其進行某種操做"。這是它區別於其餘函數庫的根本特色。

　　　　使用jQuery的第一步，每每就是將一個選擇表達式，放進構造函數jQuery()(簡寫爲$)，而後獲得被選中的元素。

選擇表達式能夠是CSS選擇器：

1 $(document)//選擇整個文檔對象
2 $('#myId')//選擇ID爲myId的網頁元素
3 $('div.myClass')//選擇class爲myClass的div元素
4 $('input[name=first]')//選擇name屬性等於first的input元素

也能夠是jQuery特有的表達式：

複製代碼
1 $('a:first')//選擇網頁中第一個a元素
2 $('tr:odd')//選擇表格的奇數行
3 $('#myForm :input')//選擇表單中的input元素
4 $('div:visible') //選擇可見的div元素
5 $('div:gt(2)')//選擇全部的div元素，除了前三個
6 $('div:animated')//選擇當前處於動畫狀態的div元素
複製代碼

2、改變結果集

若是選中多個元素，jQuery提供過濾器，能夠縮小結果集：

1 $('div').has('p'); //選擇包含p元素的div元素
2 $('div').not('.myClass'); //選擇class不等於myClass的div元素
3 $('div').filter('.myClass'); //選擇class等於myClass的div元素
4 $('div').first(); //選擇第1個div元素
5 $('div').eq(5); //選擇第6個div元素

有一些時候，咱們須要從結果集出發，移動到附近的相關元素，jQuery也提供了在DOM樹上的移動方法：

1 $('div').next('p'); //選擇div元素後面的第一個p元素
2 $('div').parent(); //選擇div元素的父元素
3 $('div').closest('form'); //選擇離div最近的那個form父元素
4 $('div').children(); //選擇div的全部子元素
5 $('div').siblings(); //選擇div的同級元素

3、鏈式操做

選中網頁元素之後，就能夠對它進行某種操做。

jQuery容許將全部操做鏈接在一塊兒，以鏈條的形式寫出來，好比：

1 $('div').find('h3').eq(2).html('Hello');

咱們能夠這樣拆封開來，就是下面這樣：

1 $('div')//找到div元素
2 .find('h3')//選擇其中的h3元素
3 .eq(2)//選擇第3個h3元素
4 .html('Hello'); //將它的內容改成Hello

這是jQuery最使人稱道、最方便的特色。它的原理在於每一步的jQuery操做，返回的都是一個jQuery對象，因此不一樣操做能夠連在一塊兒。

jQuery還提供了.end()方法，使得結果集能夠後退一步：

複製代碼
1 $('div')
2 .find('h3')
3 .eq(2)
4 .html('Hello')
5 .end()//退回到選中全部的h3元素的那一步
6 .eq(0)//選中第一個h3元素
7 .html('World'); //將它的內容改成World
複製代碼

4、元素的操做：取值和賦值

操做網頁元素，最多見的需求是取得它們的值，或者對它們進行賦值。

jQuery使用同一個函數，來完成取值(getter)和賦值(setter)。究竟是取值仍是賦值，由函數的參數決定。

複製代碼
$('h1').html(); //html()沒有參數，表示取出h1的值 $('h1').html('Hello'); //html()有參數Hello，表示對h1進行賦值
常見的取值和賦值函數以下：

.html()

.text() 取出或設置text內容

.attr() 取出或設置某個屬性的值

.width() 取出或設置某個元素的寬度

.height() 取出或設置某個元素的高度

.val()

取出或設置html內容 取出某個表單元素的值
複製代碼

取出或設置html內容 取出某個表單元素的值

　　　　須要注意的是，若是結果集包含多個元素，那麼賦值的時候，將對其中全部的元素賦值;取值的時候，則是隻取出第一個元素的值(.text()例外，它取出全部元素的text內容)。

5、元素的操做：移動

　　　　若是要移動選中的元素，有兩種方法：一種是直接移動該元素，另外一種是移動其餘元素，使得目標元素達到咱們想要的位置。

假定咱們選中了一個div元素，須要把它移動到p元素後面。

第一種方法是使用.insertAfter()，把div元素移動p元素後面：

$('div').insertAfter('p');

第二種方法是使用.after()，把p元素加到div元素前面：

$('p').after('div');

　　　　表面上看，這兩種方法的效果是同樣的，惟一的不一樣彷佛只是操做視角的不一樣。可是實際上，它們有一個重大差異，那就是返回的元素不同。第一種方法返回div元素，第二種方法返回p元素。你能夠根據須要，選擇到底使用哪種方法。

使用這種模式的操做方法，一共有四對

1 .insertAfter()和.after()：在現存元素的外部，從後面插入元素
2 .insertBefore()和.before()：在現存元素的外部，從前面插入元素
3 .appendTo()和.append()：在現存元素的內部，從後面插入元素
4 .prependTo()和.prepend()
5 ：在現存元素的內部，從前面插入元素

6、元素的操做：複製、刪除和建立

複製元素使用.clone()。

　　　　刪除元素使用.remove()和.detach()。二者的區別在於，前者不保留被刪除元素的事件，後者保留，有利於從新插入文檔時使用。

清空元素內容(可是不刪除該元素)使用.empty()。

建立新元素的方法很是簡單，只要把新元素直接傳入jQuery的構造函數就好了：

1 $('

Hello

');
2 $('

new list item

');
3 $('ul').append('

list item

');

7、工具方法

　　　　除了對選中的元素進行操做之外，jQuery還提供一些工具方法(utility)，沒必要選中元素，就能夠直接使用。

　　　　若是你懂得Javascript語言的繼承原理，那麼就能理解工具方法的實質。它是定義在jQuery構造函數上的方法，即jQuery.method()，因此能夠直接使用。而那些操做元素的方法，是定義在構造函數的prototype對象上的方法，即jQuery.prototype.method()，因此必須生成實例(即選中元素)後使用。若是不理解這種區別，問題也不大，只要把工具方法理解成，是像javascript原生函數那樣，能夠直接使用的方法就好了。

經常使用的工具方法有如下幾種：

複製代碼
1 $.trim() 去除字符串兩端的空格。
2 $.each() 遍歷一個數組或對象。
3 $.inArray() 返回一個值在數組中的索引位置。若是該值不在數組中，則返回-1。
4 $.grep() 返回數組中符合某種標準的元素。
5 $.extend() 將多個對象，合併到第一個對象。
6 $.makeArray() 將對象轉化爲數組。
7 $.type() 判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等）。
8 $.isArray() 判斷某個參數是否爲數組。
9 $.isEmptyObject() 判斷某個對象是否爲空（不含有任何屬性）。
10 $.isFunction() 判斷某個參數是否爲函數。
11 $.isPlainObject() 判斷某個參數是否爲用"{}"或"new Object"創建的對象。
12 $.support() 判斷瀏覽器是否支持某個特性。
複製代碼

8、事件操做

jQuery能夠對網頁元素綁定事件。根據不一樣的事件，運行相應的函數。

1 $('p').click(function(){
2 alert('Hello');
3 });

目前，jQuery主要支持如下事件：

複製代碼
1 .blur() 表單元素失去焦點。
2 .change() 表單元素的值發生變化
3 .click() 鼠標單擊
4 .dblclick() 鼠標雙擊
5 .focus() 表單元素得到焦點
6 .focusin() 子元素得到焦點
7 .focusout() 子元素失去焦點
8 .hover() 同時爲mouseenter和mouseleave事件指定處理函數
9 .keydown() 按下鍵盤（長時間按鍵，只返回一個事件）
10 .keypress() 按下鍵盤（長時間按鍵，將返回多個事件）
11 .keyup() 鬆開鍵盤
12 .load() 元素加載完畢
13 .mousedown() 按下鼠標
14 .mouseenter() 鼠標進入（進入子元素不觸發）
15 .mouseleave() 鼠標離開（離開子元素不觸發）
16 .mousemove() 鼠標在元素內部移動
17 .mouseout() 鼠標離開（離開子元素也觸發）
18 .mouseover() 鼠標進入（進入子元素也觸發）
19 .mouseup() 鬆開鼠標
20 .ready() DOM加載完成
21 .resize() 瀏覽器窗口的大小發生改變
22 .scroll() 滾動條的位置發生變化
23 .select() 用戶選中文本框中的內容
24 .submit() 用戶遞交表單
25 .toggle() 根據鼠標點擊的次數，依次運行多個函數
26 .unload() 用戶離開頁面
複製代碼

以上這些事件在jQuery內部，都是.bind()的便捷方式。使用.bind()能夠更靈活地控制事件，好比爲多個事件綁定同一個函數：

複製代碼
1 $('input').bind(
2 'click change'， //同時綁定click和change事件
3 function(){
4 alert('Hello');
5 }
6 );
複製代碼

若是你只想讓事件運行一次，這時可使用.one()方法。

1 $("p").one("click"， function(){
2 alert("Hello"); //只運行一次，之後的點擊不會運行
3 });

.unbind()用來解除事件綁定。

$('p').unbind('click');

全部的事件處理函數，均可以接受一個事件對象(event object)做爲參數，好比下面例子中的e：

1 $("p").click(function(e){
2 alert(e.type); //"click"
3 });

這個事件對象有一些頗有用的屬性和方法：

複製代碼
1 event.pageX 事件發生時，鼠標距離網頁左上角的水平距離
2
3 event.pageY 事件發生時，鼠標距離網頁左上角的垂直距離
4
5 event.type 事件的類型(好比click)
6
7 event.which 按下了哪個鍵
8
9 event.data 在事件對象上綁定數據，而後傳入事件處理函數
10
11 event.target 事件針對的網頁元素
12
13 event.preventDefault() 阻止事件的默認行爲(好比點擊連接，會自動打開新頁面)
14
15 event.stopPropagation() 中止事件向上層元素冒泡
複製代碼

在事件處理函數中，能夠用this關鍵字，返回事件針對的DOM元素：

複製代碼
1 $('a').click(function(){
2 if ($(this).attr('href').match('evil')){//若是確認爲有害連接
3 e.preventDefault(); //阻止打開
4 $(this).addClass('evil'); //加上表示有害的class
5 }
6 });
複製代碼

有兩種方法，能夠自動觸發一個事件。一種是直接使用事件函數，另外一種是使用.trigger()或.triggerHandler()。

1 $('a').click();
2 $('a').trigger('click');

9、特殊效果

jQuery容許對象呈現某些特殊效果。

$('h1').show(); //展示一個h1標題

經常使用的特殊效果以下：

複製代碼
1 $('h1').show(); //展示一個h1標題
2 經常使用的特殊效果以下：
3 .fadeIn() 淡入
4 .fadeOut() 淡出
5 .fadeTo() 調整透明度
6 .hide() 隱藏元素
7 .show() 顯示元素
8 .slideDown() 向下展開
9 .slideUp() 向上捲起
10 .slideToggle() 依次展開或捲起某個元素
11 .toggle() 依次展現或隱藏某個元素
複製代碼

除了.show()和.hide()，全部其餘特效的默認執行時間都是400ms(毫秒)，可是你能夠改變這個設置。

1 $('h1').fadeIn(300); // 300毫秒內淡入
2 $('h1').fadeOut('slow'); //緩慢地淡出

在特效結束後，能夠指定執行某個函數。

$('p').fadeOut(300, function(){$(this).remove(); });

更復雜的特效，能夠用.animate()自定義。

複製代碼
1 $('div').animate(
2 {
3 left : "+=50"，//不斷右移
4 opacity : 0.25 //指定透明度
5 },
6 300,// 持續時間
7 function(){ alert('done!'); }//回調函數
8 );
複製代碼

.stop()和.delay()用來中止或延緩特效的執行。

$.fx.off若是設置爲true，則關閉全部網頁特效。

回到頂部
v寫在前面
若是十八般武藝都融會貫通，若是什麼兵器你都耍得有模有樣，那麼這篇博文你大能夠跳過了。只是在忘記的時候，能夠拿出來溫習溫習。

回到頂部
v基本概念
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。

簡單點一句話歸納： javascript是基於對象、驅動事件、具備安全性、弱類型的腳本語言。

1.聲明變量關鍵字： var

2.變量的名稱：

由數字、字母、下劃線、$組成
數字不能開頭
嚴格區分大小寫
不能以關鍵字命名
3.數據類型：

基本數據類型
數值類型(整形和浮點型)
字符串類型
布爾類型
引用(複合)數據類型
函數：function()
對象：object()
特殊數據類型 undefined
4.檢測數據類型的方法： typeof()

5.運算符優先級： ()>!>算術>關係>&&>||>條件>賦值

6.類型轉換方式：

parseInt() 是將字符串類型轉換爲整型
parseFloat() 是將字符串類型轉換爲浮點型
NaN 不是一個數字
回到頂部
v函數介紹
1.函數的定義： 函數(又稱爲方法)用於對一段爲了達到某種目的的代碼進行歸類。

2.函數的生命：

function 函數名([參數1],[參數2],...)

{

//代碼模塊

}

3.定時器： setInterval("函數名",時間毫秒) ps:這個詳細部分在下面

4.系統函數：

日期函數
getYear():可返回表示年份的兩位或四位的數字

getMonth():可返回表示月份的數字

getDate():可返回月份的某一天

toLocaleString():可根據本地時間把 Date 對象轉換爲字符串，並返回結果

Math對象
abs():可返回數的絕對值

round():可把一個數字舍入爲最接近的整數

複製代碼

複製代碼
random():可返回介於 0 ~ 1 之間的一個隨機數

floor():可對一個數進行下舍入

複製代碼

複製代碼
ceil():可對一個數進行上舍入

複製代碼

複製代碼
max():可返回兩個指定的數中帶有較大的值的那個數

min():可返回指定的數字中帶有最低值的數字，效果與max類似 demo略

數組函數
concat():方法用於鏈接兩個或多個數組。該方法不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本

join():方法用於把數組中的全部元素放入一個字符串。元素是經過指定的分隔符進行分隔的。

複製代碼

複製代碼
pop():方法用於刪除並返回數組的最後一個元素

複製代碼

複製代碼
push():可向數組的末尾添加一個或多個元素，並返回新的長度。

複製代碼

複製代碼
回到頂部
v瀏覽器對象BOM
1.windows對象：

Location 地址對象
history 歷史對象
document 文檔對象
event 事件對象
screen 屏幕對象
navigator 瀏覽器對象
2.調用方式：

windows.屬性=" "
windows.方法();
3.windows對象的三種彈出對話框方法：

alert() 用於顯示帶有一條指定消息和一個 OK 按鈕的警告框 Demo
confirm()用於顯示一個帶有指定消息和 OK 及取消按鈕的對話框 Demo
prompt()用於顯示可提示用戶進行輸入的對話框 Demo
4.windows對象的兩種彈出框口的方法：

Open()用於打開一個新的瀏覽器窗口或查找一個已命名的窗口

參數 描述
URL 一個可選的字符串，聲明瞭要在新窗口中顯示的文檔的 URL。若是省略了這個參數，或者它的值是空字符串，那麼新窗口就不會顯示任何文檔。
name 一個可選的字符串，該字符串是一個由逗號分隔的特徵列表，其中包括數字、字母和下劃線，該字符聲明瞭新窗口的名稱。這個名稱能夠用做標記 和

的屬性 target 的值。若是該參數指定了一個已經存在的窗口，那麼 open() 方法就再也不建立一個新窗口，而只是返回對指定窗口的引用。在這種狀況下，features 將被忽略。
features 一個可選的字符串，聲明瞭新窗口要顯示的標準瀏覽器的特徵。若是省略該參數，新窗口將具備全部標準特徵。在窗口特徵這個表格中，咱們對該字符串的格式進行了詳細的說明。
replace

一個可選的布爾值。規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中建立一個新條目，仍是替換瀏覽歷史中的當前條目。支持下面的值：

true - URL 替換瀏覽歷史中的當前條目。
false - URL 在瀏覽歷史中建立新的條目。
showModalDialog() 彈出模式窗口，這個用法比較
5.windows對象兩種啓動定時器的方法：

setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。 setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。
setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。
6.document三個找對象的方法：

getElementById() 方法可返回對擁有指定 ID 的第一個對象的引用
getElementsByTagName() 方法可返回帶有指定標籤名的對象的集合。
getElementsByName() 方法可返回帶有指定名稱的對象的集合。
7.經常使用js事件：

onclick事件會在對象被點擊時發生
onmouseover 鼠標通過事件
onmouseout 事件會在鼠標指針移出指定的對象時發生。
onload 事件會在頁面或圖像加載完成後當即發生。
onfocus 事件在對象得到焦點時發生。
onblur 事件會在對象失去焦點時發生。
onfocus 事件在對象得到焦點時發生。
onfocus 事件在對象得到焦點時發生。
8.瀏覽器對象屬性：

appName 屬性可返回瀏覽器的名稱。
appCodeName 屬性是一個只讀字符串，聲明瞭瀏覽器的代碼名。
appVersion 屬性可返回瀏覽器的平臺和版本信息。該屬性是一個只讀的字符串。
回到頂部
vDOM
DOM主要是須要在實戰中運用，我這裏只列出一些DOM的經常使用屬性

1.DOM屬性：

childNodes 屬性返回節點的子節點集合，以 NodeList 對象 documentElement根節點 document.body主體 document.body.childNode得到 body 元素的子節點集合 nodeName節點名 attributes 屬性返回指定節點的屬性集合，即 NamedNodeMap nodeType節點類型 nodeValue節點值