jquery簡單學習

標籤：res   time   url   mouse   常用   style   顯示   注意   end   

一、使用需求

　　要使用jquery要有jquery的檔案，沒有得去下，自行百度。

二.匯入檔案

　　<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>這裡是匯入jquery，裡面的src為檔案路徑，檔案在哪就填哪。

 三、程式入口寫法

　　<script typr="text/javascript">

　　　　$ ( function (){     ← ps:這句就是入口

　　　　　　所有代碼都寫在這裡

　　　　});

　　</script>

四、工廠函數

　　$() 這就是一個工廠函數，返回的是一個jquery對像，括弧裡面叫運算式

五、選取器

　　如果你要精確某個標籤或某個id某個class就要用到選取器

　　 標籤名選取器：用HTML標籤名作選取器 ，

　　　　　　　　   寫法： $("標籤名") ，如div標籤：$("div")　　

　　　　　　　　   注意：這裡會擷取所有相同的標籤，改變會全部改變

　　id選取器：用id作選取器

　　　　　　   寫法： $("#id名") ， 如id名為a：$("#a")　　

　　　　　　   注意：這裡如果有相同名字的id，會擷取第一個id，之後的後不會擷取

　　class選取器：用class作選取器

　　　　　　　　 寫法： $(".class名")，  如class名為b：$(".b") 　　

　　　　　　　　 注意：這裡會擷取所有相同的class名，改變會全部改變

　　多個選取器：只要寫上選取器名字然後用逗號隔開 ,

　　　　　　　　寫法：如上面的所有選取器： $("div,#a,.c")

　　　　　　　　注意：這裡唯寫三個，還可以更多

　　  後代選取器：用一個元素的所有後代元素作選取器

　　　　　　　　寫法：$("a b")， a是一個元素，b是其後代元素，中間用空格隔開 ，如form下的input：$("form input") 

　　　　　　　　注意：只要在a元素的標籤裡面，不管b元素的層次是多少都會擷取

　　　　　　　　　　   說白了不管是兒子還是孫子還是孫孫孫子，只要相同名字都會擷取到

 

　　子選取器：一個元素的子項目作選取器

　　　　　　　寫法：$("a>b")， a是父元素，b是其子項目，中間用>隔開 ，如form下的input：$("form>input") 

　　　　　　　注意：這隻會擷取父元素下的相同名字的子項目，其他名字的子項目擷取不到

　　　　　　　　　　說白了就是只能擷取相同名字兒子，擷取不到名字不同的其他兒子或孫子

　　緊鄰同輩選取器：這個我自己好難說明，說白了就是同一個爸爸，有兒子，老大下面肯定是老二，用老二作選取器　　　　　　　　

　　　　　　　　　　

　　相鄰同輩選取器：這個也有點難說，說白了就是同一個爸爸，有兒子，只要和老大同輩分且在它後面就會擷取

 　　　　　　　　　　　　　

六、常見事件

　　寫法：$(function(){

　　　　　　　$("#a").事件名(function(){

　　　　　　　　　發生事件要做什麼(寫代碼)

　　　　　　　});

　　　　　});

　　如點擊彈出訊息框

　　

　　常見事件

　　click：滑鼠點擊事件

　　ready：網頁載入完成事件

　　dblclick：滑鼠雙擊事件

　　focus：獲得焦時間點事件

　　blur：失去焦時間點事件

　　mouseover：滑鼠移至上方在上面事件

　　mouseout：滑鼠離開事件

　　keydown：鍵盤按事件

　　keypress：鍵盤按下並鬆開事件

　　keyup：鍵盤鬆開事件

　　change：常值內容改變事件

　　還有一些事件，自行百度

七、常見jquery方法

　　寫法：$(function(){

　　　　　　　$("#a").事件名(function(){

　　　　　　　　　$("#a").方法名();

　　　　　　　});

　　　　　});

　　如擷取常值內容並彈出顯示

　　

　　常見方法

　　text()：擷取常值內容

　　　　　如id為a的常值內容：$("#a").text();

　　　　　還可以設定常值內容，設定為aa：$("#a").text("aa");

　　val()：擷取值value

　　　　　如id為a的值：$("#a").val();

　　　　　還可以設定值，設定為aa：$("#a").val("aa");

　　thml()：擷取整個標籤

　　　　　如id為a的裡面的標籤：$("#a").html();

　　　　　還可以設定id為a的a標籤內容，原本為 <div id="a"><a href="#">test</a></div>

　　　　　設定為：$("#a").html("<a href=‘http://www.163.com‘>網易</a>");

　　css()：擷取css屬性

　　　　　如id為a的css背景顏色：$("#a").css("backgroundColor");

　　　　　還可以設定為紅色：$("#a").css("backgroundColor","#f00");

　　　　　css的設定都為 css("屬性名稱","值")；

八、封裝集

　　什麼是封裝集？  就是一個變數裡面存放了多個對象的變數就是封裝集；

　　用法：對象名.方法名()

　　length：用來返回一個變數的長度值  注意這是沒有括弧的

　　　　　  如一個字串"aaaa"，"aaaa".length 就會返回4的整數

　　　　　  如變數aa存放3個對象，aa.length 就會返回一個3的整數

　　index()：返回對象的封裝集下標，擷取的對象集也都是DOM對對象，它們沒有jquery的方法,注意轉換

　　　　　　寫法：封裝集.index(封裝集的一個對象)，注意index(int)並不會返回對應的對象

　　　　　　如封裝集為aa，裡面的對象a，aa.index(a)，會返回這個a對象所在的下標

　　　　　　DOM對象轉化為jquery對象，只需要加上$()這個

　　　　　　如 $(aa[1]) 這樣會把第二個元素轉化為jquery對象，就能用jquery方法了

　　get()：擷取封裝集裡面的對象，用get()或[ ]擷取的都是DOM對象

　　　　　寫法：封裝集.get(下標)，如：aa.get(2)，會擷取第二個DOM對象

　　　　　[ ]寫法：封裝集[下標]，如：aa[2]，會擷取第二個DOM對象

　　add()：添加，添加一個標籤

　　　　　寫法：對象或封裝集.add("標籤").appendTo(添加到哪裡)

　　　　　如b對象添加標籤a到body裡面： b.add("<a href=‘#‘>123</>").appendTo(document.body);

　　clone()：複製，複製一個標籤

　　　　　寫法：對象或標籤名.clone().appdendTo(複製到哪裡)

　　　　　如標籤a複製到body裡面： $("a").clone().appendTo(document.body);

　　not()：剔除，把not("選取器")裡面的選取器剔除掉

　　　　　寫法：封裝集.not("一個,倆個,三個,……").其他方法()

　　　　　 如4個div，id分別為a，b，c，d,改變其背寬度不要b，c

　　　　　$("div").not("#b,#c").css("widtg","200px");

　　filert()：僅保留 ，把filert("選取器")保留，其它剔除掉

　　　　　寫法：封裝集.filert("一個,倆個,三個,……").其他方法()

　　　　　如4個div，id分別為a，b，c，d,改變其背寬度不要a，d

　　　　　$("div").filert("#b,#c").css("widtg","200px");

　　slice()：把slice(開始下標，結束下標)在範圍裡的選取器保留，其它剔除

　　　　　 寫法：封裝集.slice(開始下標，結束下標).其他方法()， 等於開始下標，不等於結束下標

　　　　　如長度為4的aa封裝集保留中間兩個並改變其高度，

　　　　　如：aa.silce(1,3).css("height","50px");

　　each()：遍曆，把封裝集瀏覽一個一個的遍曆出來，

　　　　　寫法：封裝集.each(funtction(){

　　　　　　　一個一個遍曆出來要做什麼

　　　　　})；

　　　　　 如長度為4的aa封裝集遍曆了都彈出訊息

　　　　　aa.each(function(){

　　　　　　　alert("11");

　　　　　});

九、ajax

　　什是是ajax？   是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術；

　　寫法

　　$(function(){

　　　　$("選取器").事件(function(){

　　　　　　$.ajax({

　　　　　　　　一些操作...;

　　　　　　})

　　　　});

　　});

　　ajax常用的七個參數

　　　　url：訪問地址,

　　　　type：訪問的方法，訪問的方法主要有兩種‘GET‘或‘POST‘；

　　　　data：傳遞過去的資料, 傳遞過去的資料主要有三種，分別是url拼接式，json數組，表單的序列化，

　　　　　　　url拼接：在url哪裡加?加資料，如 url:‘A?name=張三‘，這是常量； 變數的 url:‘A?‘+變數,   不推薦

　　　　　　　json：在data:打上花括弧，如 data:{name:"張三"} ，這是常量； 變數的 data:{name:變數名}，推薦

　　　　　　　序列化：  序列化就是提交的時候把name和值自動轉化為  name=值（值是中文就會像亂碼）的形式發送過去

　　　　　　　　　　　var 變數名 = $("表單選取器或者表單的id").serialize()

　　　　　　　　　　　data:變數名,   就行了

　　　　dataType：返回的資料類型, 

　　　　success：訪問成功執行的函數,

　　　　error：訪問失敗執行的函數,

　　　　timeout：訪問的時間

　　ajax的例子

　　

 

jquery簡單學習