Python全棧 Web（jQuery 一條龍服務）

jQuery

1.jQuery介紹

jQuery是一個輕量級的JS庫 - 是一個被封裝好的JS檔案,提供了更為簡便的元素操作方式

核心理念:Write Less Do More

jQuery版本:

jQuery 2.x  不再支援IE6.7.8

jQuery 1.11.x

2.使用jQuery

1.引入jQuery檔案

<script src="jquery-1.11.3.js"></script>

注意:jQuery檔案的引入操作必須要放在其他jQuery操作之前

3.jQuery對象

1.什麼是jQuery對象

jQuery對象是由jQuery對頁面元素進行封裝後的一種展現

jQuery中所提供的所有的操作都隻針對jQuery對象,DOM對象不能用

2.工廠函數 -

$()

作用:

1.能夠擷取 jquery對象

2.能夠将DOM對象轉換為 jquery 對象

文法:

$(選擇器/DOM對象);

$()能夠将選擇器 和 DOM對象封裝成jQuery對象進行傳回

3.DOM對象 和 jQuery對象之間的轉換

DOM對象:隻能使用DOM提供的操作,不能使用jQuery操作

jQuery對象:隻能使用jQuery操作,不能使用DOM操作

1.将DOM對象轉換為jQuery對象

文法:

var 變量 = $(DOM對象);

注意:所有的jQuery對象在起名的時候,最好在變量名稱前+$,用于區分與DOM對象的差別

2.将jQuery對象轉換為DOM對象

1. var dom對象 = jQuery對象.get(0)

2. var dom對象 = jQuery對象[0] 4.jQuery選擇器

1.作用

擷取頁面上的元素們,傳回值都是由JQ對象所組成的數組.

文法: $("選擇器");

2.選擇器詳解

1. 基礎選擇器

1. ID選擇器

$('#id');

傳回id屬性值為指定id的元素對象

2. 類選擇器

$(".className");

傳回指定類名對象的元素

3. 标簽選擇器

$('element');

傳回指定标簽名對應的元素

4. 群組選擇器

$('selector1,selector2,...');

2.層級選擇器 1.$("selector1+selector2")

名稱:相鄰兄弟選擇器

作用:比對緊緊跟在selector1後面且滿足selector2選擇器的元素

2.$("selector1~selector2")

名稱:通用兄弟選擇器

作用:比對selector1後面所有滿足selector2選擇器的元素

3.基本過濾選擇器 1. :first

隻比對到第一個元素

2. :last

隻比對到最後一個元素

3. :not(selector)

将滿足selector選擇器的元素排除出去

4. :odd

比對 偶數行 元素 (奇數下标)

5. :even

比對 奇數行 元素 (偶數下标)

6. :eq(index)

比對下标等于index的元素

7. :gt(index)

比對下标大于index的元素

8. :lt(index)

比對下标小于index的元素

4.屬性選擇器 1.[attribute]

作用:比對包含指定屬性的元素

ex: $("div[id]");

2.[attribute=value]

作用:比對屬性值為value的元素

ex: 

$("div[id=main]") -> $("#main");

$("[type=text]");

3.[attribute!=value]

作用:比對屬性值不是value的所有元素

4.[attribute^=value]

作用:比對屬性值以value字元作為開始的元素

5.[attribute$=value]

作用:比對屬性值以value字元作為結尾的元素

6.[attribute*=value]

作用:比對屬性值中包含value字元的元素

5.子元素過濾選擇器 1.:first-child

比對屬于其父元素中的首個子元素

2.:last-child

比對屬于其父元素中的最後一個子元素

3.:nth-child(n)

比對屬于其父元素中的第n個子元素

:nth-child(1) --> :first-child

jQuery操作DOM

1.基本操作

1.html()

作用：擷取 或 設定 jQuery對象的HTML内容

等同于 innerHTML

ex:

var $div = $("#main");

console.log($div.html());

$div.html("動态設定的文本");

2.text()

作用：純文字内容

等同于 ：innerText

3.val()

作用:擷取 或 設定 表單控件的 value 值

等同于 : value 

2.屬性操作

1.attr()

作用:讀取 或 設定 jQuery對象的 屬性值

1.$obj.attr("id");

擷取 $obj 對象的id屬性值

2.$obj.attr("id","container")

設定 $obj 對象的id屬性值為 container

2.removeAttr("attrName")

作用:删除 jquery對象的 attrName 屬性

$obj.removeAttr("class");

3.樣式操作

1.attr("class","className")

使用 attr() 綁定className 值到jq對象的class屬性上

2.addClass("className")

作用:追加className選擇器到jq對象的class屬性後

傳回值:jq對象

<div id="obj"></div>

var $obj = $("#obj");

$obj = $obj.addClass("c1");

結果:<div id="obj" class="c1"></div>

$obj = $obj.addClass("c2");

結果:<div id="obj" class="c1 c2"></div>

以上兩個操作,可以簡化為:

(連綴調用)

$obj.addClass("c1").addClass("c2").html();

3.removeClass("className")

作用:将className屬性值從 class 屬性中移除

4.removeClass()

作用:清空class屬性值

5.toggleClass("className")

切換樣式:

元素如果具備className屬性值,則删除

元素如果沒有className屬性值,則添加

6.css("css屬性名")

作用:擷取對應css屬性的值

$obj.css("id")

作用:擷取$obj對象的id屬性值

7.css("css屬性名","css屬性值")

作用:為元素設定css屬性值

8.css(JSON對象)

JSON對象 類似于 PYTHON中字典的寫法

$obj.css({

"color":"red",

"background-color":"orange"

}

);

4.周遊節點

1.children() / children(selector)

作用:擷取jq對象的所有子元素或帶有指定選擇器的子元素

注意:隻考慮子代元素,不考慮後代元素

2.next() / next(selector)

作用:擷取jq對象的下一個兄弟元素/滿足selector的下一個兄弟元素

3.prev() / prev(selector)

作用:擷取jq對象的上一個兄弟元素/滿足selector的上一個兄弟元素

4.siblings() / siblings(selector)

作用:擷取jq對象的所有兄弟節點 / 滿足selector的所有兄弟

5.find(selector)

作用:擷取滿足selector選擇器的所有後代元素

6.parent()

作用:查找jq對象的父元素

    5.建立元素 & 插入元素

    1.建立元素

文法:var $obj = $("建立的内容");

    注意:建立的内容必須是标記

    ex:

    1.建立一對div

    var $div = $("<div id='xxx'>xxxxx</div>");

    2.建立一對button

    var $btn = $("<button></button>");

    $btn.attr("id","btnDelete");

    $btn.html("删除");

2.插入元素

    1.内部插入

1.$obj.append($new);

    将$new元素插入到$obj中最後一個子元素位置處

2.$obj.prepend($new);

    将$new元素插入到$obj中第一個子元素的位置處

    2.外部插入

    作為兄弟元素插入到網頁中

1.$obj.after($new);

    将$new作為$obj的下一個兄弟節點插入到網頁中

2.$obj.before($new);

    将$new作為$obj的上一個兄弟節點插入到網頁中

 document.createElement("div");

 $("div")

 $("<div></div>");

2.jQuery中的事件處理

1.DOM加載完成後的操作

1. $(document).ready(function(){

//DOM樹加載完畢後要執行的操作

//相當于是頁面初始化

   });

2. $().ready(function(){

  //效果同上

3. $( function(){

//效果同上

   } );

    2.jQuery事件綁定

    1.方式1

$obj.bind("事件名稱",事件處理函數);

    $obj.bind("click",function(){

    });

    2.

$obj.事件名稱(function(){

    });

    $obj.click(function(){

    xxxxx

常用事件     $obj.click(fn);     $obj.mouseover(fn);     $obj.mousemove(fn);     $obj.mouseout(fn);     $obj.keydown(fn);     $obj.keypress(fn);     $obj.keyup(fn);     $obj.focus(fn);     $obj.blur(fn);     $obj.change(fn);     $obj.submit(fn);     3.事件中的this

    在jquery事件中,this表示的就是觸發目前事件的DOM對象

4.事件對象 - event

    在綁定事件的時候,允許傳遞 event 參數來表示事件對象

1.$obj.bind("事件名稱",function(event){

    event 表示的就是事件對象

      });

2.$obj.事件名稱(function(event){ event的使用方式 與 原生JS事件中的事件對象一緻 1.事件源

      event.target

  2.滑鼠事件

      event.offsetX : 在元素上的橫坐标

      event.offsetY : 在元素上的縱坐标

3.鍵盤事件

      event.which : 鍵位碼或ASCII碼

  5.激發事件操作

    $obj.事件名稱();

    ex:

    $obj.click(); //觸發$obj的click事件

    $obj.click(function(){}); //為$obj綁定click事件

3.jQuery删除節點

1.remove()

文法:$obj.remove();

作用:删除$obj元素 

2.remove("selector")

文法:$obj.remove("selector");

作用:将滿足selector選擇器的元素删除

3.empty()

文法:$obj.empty();

作用:清空 $obj 内容

4.jQuery 周遊操作 方法:each()

1.循環周遊 jQuery 數組

$obj.each(function(i,obj){

i : 循環出來的元素的下标

obj : 循環出來的元素(DOM元素)

});

2.循環周遊 JS數組(原生)

1.将原生數組通過$()轉換成jQuery數組

2.

$.each(原生數組,function(i,obj){

i : 周遊出來的下标

obj : 周遊出來的元素

});