jQuery第二篇 （帥哥）

 

1.1 jQuery操做DOM

jQuery課程的目標：學會使用jQuery設計常見效果

選擇器

基本選擇器：#id 、.class 、element、* 、

層級選擇器： 空格、>、+、~

 基本過濾選擇器：:first、:last、:eq(index)、:lt(index)、:gt(index)、:odd、:even

 篩選選擇器：.eq(index)、.children()、.parent()、.siblings()、.find()

 動畫：show、hide、fadeIn、fadeOut、fadeTo、slideDown、slideUp、slideToggle

animate

 DOM操做：.css()、addClass(「className」)、removeClass()、toggleClass

 .attr()、removeAttr()、.val()、.html(「<p></p>」)、text()

 node.append(「<p>我是追加的內容</p>」)、prePend()

1.2 元素操做

1.2.1 高度和寬度

$(「div」).height(); // 高度

$(「div」).width(); // 寬度

.height()方法和.css(「height」)的區別：

1. 返回值不一樣，.height()方法返回的是 數字類型(20)，.css(「height」)返回的是字符串類型(20px)，所以.height()方法經常使用在參與數學計算的時候

1.2.2 座標值

$(「div」).offset(); // 獲取或設置座標值 設置值後變成相對定位

$(「div」).position(); // 獲取座標值 子絕父相 只能讀取不能設置

1.2.3 滾動條（滾動事件）

 

$(「div」).scrollTop(); // 相對於滾動條頂部的偏移

$(「div」).scrolllLeft(); // 相對於滾動條左部的偏移

案例：兩次跟隨的廣告

案例：防騰訊固定導航欄

 

1.3 jQuery事件

1.3.1 綁定

click/mouseenter/blur/keyup

// 綁定事件

bind：$node.bind(「click」,function(){});

// 觸發一次

one : $node.one(「click」,function(){});

delegate : $node.delegate(「p」,」click」,function(){});

on： $node.on(「click」,」p」,function(){});

1.3.2 解綁

unbind、undelegate

off

1.3.3 觸發

click : $(「div」).click();

trigger：觸發事件，而且觸發瀏覽器默認行爲

triggerHandler：不觸發瀏覽器默認行爲

 

1.4 jQuery事件對象介紹

event.stopPropagation() //阻止事件冒泡

event.preventDefault();  //阻止默認行爲

1.5 jQuery補充

須要注意的地方：

animate動畫：不支持背景的動畫效果

animate動畫支持的屬性列表

參考手冊（不全）、

在線文檔：

w3school：http://www.w3school.com.cn/jquery/index.asp

jQuery官網：http://jquery.com/

$()的幾種經常使用用法：

1.$(「#id」) 選擇某個元素，返回值爲jQuery對象

2.$(this) 將DOM對象轉換成jQuery對象

3.$(「<div></div>」) 建立元素，返回值爲jQuery對象

4.$(function(){}); 入口函數的簡寫方式

$("div").html() 獲取內容的時候，只返回匹配到的第一個元素的數據

鏈式編程問題：

$("div").html() 後面就不能繼續鏈式了？

爲何？函數返回值問題！

$node.each(function(index,element){});

$.each([1,2,3,5,6,7], function (i,v) {

   console.log(i + " : " + v);

});

map返回數組(瞭解)

$(「li」).map(function(){

return $(this).text();

});

1.5.1 數據緩存

$(「div」).data(「index」); // 獲取數據index的值

注意：

html裏面的data 屬性，例如：data-ROLE，jQuery獲取的時候用：$(「div」).data(「role」);

當使用jQuery設置data屬性的時候，例如：$(「div」).data(「UPCASE」,123); ，那麼獲取的時候，要使用：$(「div」).data(「UPCASE」);

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>注意HTML屬性不區分大小寫</div>

$( "div" ).data( "lastValue" ) === 43;

lastValue -> data-last-value

1.5.2 .data()跟.attr() 方法的區別：

1.獲取數據的時候，attr方法須要傳入參數，data方法能夠不傳入參數，這時候獲取到的是一個js對象，即便沒有任何data屬性。

2. 獲取到的數據類型不一樣，attr方法獲取到的數據類型是字符串(String)，data方法獲取到的是相應的類型。

3. data方法獲取到數據以後，咱們使用一個對象來接收它，那麼就能夠直接操做(設置值或獲取值)這個對象，而attr方法不能夠。

而且經過這種方式，要比.data(key,value)的方式更高效！

4. data-attribute屬性會在頁面初始化的時候放到jQuery對象，被緩存起來，而attr方法不會。

1.5.3 多庫共存

同一個頁面，引入包含$變量的其餘js庫，保證它們不發生命名衝突。

// other_lib.js 包含$

<script src="other_lib.js"></script>

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

<script>

$.noConflict();

// 可使用其餘庫的$符號了

// 使用jQuery

jQuery(document).ready(function(){});

</script>

 

1.5.4 jQuery優點：

1. 書寫簡潔、代碼優雅
2. Write Less，Do More
3. 強大的選擇器，支持CSS1-3全部的選擇器
4. 瀏覽器兼容性好，兼容IE6、7、8
5. 統一的入口，下降了學習、記憶成本
6. 強大的動畫效果、事件支持
7. 開源、免費
8. 插件豐富，可擴展性強

 

1.6 jQuery插件機制

jQuery.color.js

jQuery官網插接教程：http://learn.jquery.com/plugins/basic-plugin-creation/

聯繫咱們的手機

兩種方式：

$.log = function(){};

$.fn.log = function(){};

自定義選擇器：

jQuery.extend(jQuery.expr[':'], {
     "class-itcast": function(ele) {
        return jQuery(ele).hasClass("itcast");
     }

});
$(":class-itcast").css("background","pink");

 

1.6.1 經常使用插件介紹

jQuery.lazyload.js

1.6.2 插件使用：

查看API文檔，瞭解插件的功能，提供的方法和參數。

插件依賴版本

1. 引用jQuery
2. 引用插件
3. 使用插件

1.6.3 怎麼寫插件

演示jQuery.lxCfbg.js （本身的插件）

(function ($) {

    $.fn.lxCfbg = function (options) {

        // 合併參數

        var opts = $.extend({

            "color": "#000",

            "font-size": "16px",

            "background-color": "#fff"

        }, options);

        $this.css({

            "color": opts.color,

            "font-size": opts["font-size"],

            "background-color": opts["background-color"]

        });

        return $this;

    };

})(jQuery);

1.7 jQueryUI

jQueryUI教程