jQuery 基礎知識

時間 2019-11-17

標籤 jquery 基礎知識欄目 JQuery 简体版

原文原文鏈接

1、序言

　　jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後的又一個優秀的JavaScript代碼庫(JavaScript框架)。jQuery設計的宗旨是"Write Less, Do More"，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和AJAX交互。
　　jQuery的核心特性能夠總結爲：具備獨特的鏈式語法和短小清晰的多功能接口；具備高效靈活的CSS選擇器，而且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。css

2、jQuery對象

　　Query對象就是經過jQuery包裝DOM對象後產生的對象。jQuery對象是jQuery獨有的。
若是一個對象是jQuery對象，那麼它就可使用jQuery裏的方法:$("#test").html()；html

$("#test").html()
//意思是指：獲取ID爲test的元素內的html代碼。其中html()是jQuery裏的方法

這段代碼等同於用DOM實現代碼：document.getElementById("test").innerHTML;jquery

雖然jQuery對象是包裝DOM對象後產生的，可是jQuery沒法使用DOM對象的任何方法
同理DOM對象也不一樣使用jQuery裏的方法
約定：若是獲取的是jQuery對象，那麼要在變量前面加上$

ajax

var $variable = jQuery對象
var variable = DOM對象

$variable[0]:jquery對象轉換爲dom對象
$("#msg").html(); -> $("#msg")[0].innerHTML;

//jquery的基礎語法：$(selector).acttion()

3、jQuery框架分類

核心
選擇器
屬性
CSS
文檔處理
篩選
效果
事件
事件對象
延遲對象
回調函數
AJAX
工具

4、選擇器

4.1 基本選擇器

    $("*")      $("#id")        $(".class")         $("element")        $(".class,p,div")

4.2 層級選擇器

$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")

4.3 基本篩選器

$("li:fister")  $("li:eq(2)")   $("li:even")    $("li:gt(1)")

4.4 屬性選擇器

$('[id="div1"]')    $('[name="abc"[id]]')

4.5 表單選擇器

 $("[type='text']") ----> $(":text")
    //注意只適用於input標籤： $("input:checked")

4.6 表單屬性選擇器

 :enabled
 :disabled
 :checked
 :selected

5、篩選器

5.1 過濾篩選器

$("li").eq(2)   $("li").first() $("ul li").hasclass("test")

5.2 查找篩選器

   // 查找子標籤：
$("div").childred(".test");
$("div").find(".test");

    //向下查找兄弟標籤：
$(".test".next());  
$(".test".nextAll();
$(".test").nextUntil();

    //向上查找兄弟標籤：
$("div").prev();   
$("div").prevAll();
$("div").prevUntil();

    //查找全部兄弟標籤：
$("div").siblings();

    //查找父標籤：     
$(".test").parent();     
$(".test").parents();
$(".test").parentUntil();

6、事件

//頁面載入
read(fn)    //到DOM載入就緒能夠查詢及操做時綁定一個要執行的函數
#(document).ready(function(){}  //也能夠寫成 $(function(){}    文檔就緒事件

//事件綁定
//語法：標籤對象.事件(函數)
eg：$("p").click(function(){})

//事件委派
$("").on(eve,[selector],[data],fn)  //在選擇元素上綁定一個或多個時間處理函數

//事件切換
hover ：一個模仿懸停事件(鼠標移動到一個對象上面及移除這個對象)的方法。這個一個自定義的方法，它爲頻繁使用的任務提供了一種"保持在其中「de 」的狀態
over：鼠標移到元素上要觸發的函數
out：鼠標移除元素要觸發的函數

7、屬性操做

    //CSS類
    $("").addClass(class|fn)
    $("").removeClass([class|fn])

    //屬性
    $("").attr();
    $("").removeAttr();
    $("").prop();
    $("").removeProp();

    //HTML代碼/文本/值
    $("").html([val|fn])
    $("").text([val|fn])
    $("").val([val|fn|arr])
    $("#c1").css({"color":"red", "fontSize":"35px"})

    //attr使用方法：
    <input id="chk1" type="checkbox" />
    <input id="chk2" type="checkbod" checked="checked" />

    <script>
    //對於HTML元素自己就帶有的固定屬性，在處理時，使用prop方法
    //對於HTML元素咱們本身定義的DOM屬性，在處理時，使用attr方法
    //像checkbox, radio和select這樣的元素，選中屬性對應"checked"和"selected"，這些屬於固有屬性，所以
    //須要使用prop方法去操做才能得到正確的結果

    $("#chk1").attr("checked")  // undefined
    $("#chk1").prop("checked")  //false

    //手動選中的時候attr()得到到沒有意義的undefined
    //$("#chk1").attr("checked")  // undefined
    //$("#chk1").prop("checked")  //true

    console.log($("#chk1").prop("checked")); //false
    console.log($("#chk2").prop("checked")); //true
    console.log($("#chk1").attr("checked")); //undefined
    console.log($("#chk2").attr("checked")); //checked

    </script>

8、工具-each循環

咱們知道
$("p").css("color","red")
是將css操做加到全部的標籤上，內部維持一個循環；但若是對於選中標籤就行不一樣處理，這時就須要
對全部標籤數組就行循環遍歷設計模式

    //jQuery支持兩個循環方式：
    //方式1：
    $.each(obj,fn)
    arr = [10, 20, 30, 40];
    dic = {name:"abc", sex:"male"};
    $.each(arr, function(i,x){
        console.log(i,x)
    })

    //方式2：//$(this)指當前循環標籤
    $("").each(fn)
    $("tr").each(function(){
        console.log($(this).html())
    })

9、文檔節點處理

    //建立一個標籤對象
    $("<p>")

    //內部插入
    $("").append(content|fn)   --->$("p").append("<b>Helo</b>");
    $("").appendTo(content)    --->$("p")>appendTo("div");
    $("").prepend(content|fn)  --->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)   --->$("p").prependTo("#foo");

    //外部插入
    $("").after(content|fn)    --->$("p").after("<b>Hello</b>");
    $("")>before(content|fn)   --->$("p").before("<b>Hello</b>");
    $("").insertAfter(content) --->$("p").insertAfter("#foo");
    $("").insertBefore(content)--->$("p").insertBefore("#foo");

    //替換
    $("").replaceWith(content|fn) --->$("p").repalceWith("<b>Paragraph.</b>");

    //刪除
    $("").empty()
    $("").remove([expr])

    //複製
    $("").clone([Even[,deepEven]])

10、動畫效果

//顯示隱藏
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquest.js"></script>
        <script>
            $(document).ready(function(){
                $("#hide").click(function(){
                    #("p").hide(1000);
                 });
                $("show").click(function(){
                    #("p").show(1000);
                 });
                //用於切換被選元素的hide()與show()方法
                $("#toggle").click(function(){
                    $("p").toggle();
                });
            })
        </script>

        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>hello<p>
        <button id="hid">隱藏</button>
        <button id="show>顯示</button>
        <button id="toggle">切換</button>
    </body>
    </html>

    滑動
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(function(){
                $("#slideDown").click(function(){
                    $("#content").slideDown(1000);
                });
                #("#slideUp").click(function(){
                    $("#content").slideUo(1000);
                });
                #("#slideToggle").click(function(){
                    $("#content").slideToggle(1000);
                })
            });
            <style>
                #content{
                    text-align: center;
                    background-color: lightblue;
                    border: solid 1px red;
                    display: none;
                    padding: 50px;
                }
            </style>
        </head>
        <body>
            <div id="slideDown>出現</div>
            <div id="slideUp">隱藏</div>
            <div id="slideToggle">toggle</div>
            <div id="content">helloworld</div>
        </body>
        </html>

        淡入淡出
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="jquery.js"></script>
            <script>
                $(document).ready(function(){
                    $("#in").click(function(){
                        $("#id1").fadeIn(1000);
                    });
                     $("#out").click(function(){
                        $("#id1").fadeOut(1000);
                    });
                     $("#toggle").click(function(){
                        $("#id1").fadeToggle(1000);
                    });
                     $("#fadeto").click(function(){
                        $("#id1").fadeTo(1000,0.4);
                    });
                });
            </script>
        </head>
        <body>
            <button id="in">fadein</button>
            <button id="out">fadeout</button>
            <button id="toggle">fadetoggle</button>
            <button id="fadeto">fadeto</button>

            <div id="id1" style="display:none; width: 80px; height: 80px; background-color: blue;</div>
        </body>
        </html>

11、回調函數

    callbacks.add(callbacks)    回調列表中添加一個回調或回調的集合
    callbacks.disable()         禁用回調列表中的回調
    callbacks.empty()           從列表中刪除全部回調
    callbacks.fire(arguments)   禁用回調列表中的回調
    callbacks.fired()           用給定的參數調用全部的回調
    callbacks.fireWith([c][,a]) 訪問給定的上下文和參數列表中的全部回調
    callbacks.has(callback)     肯定是否提供回調列表
    callbacks.lock()            鎖定在其當前狀態的回調列表
    callbacks.locked()          肯定是否已被鎖定的回調列表
    callbacks.remove(callbacks) 刪除回調或回調列表的集合
    jQuery。callbacks(flags)
        一個多用途的回調列表對象，提供了強大的方式來管理回調函數列表。
        $.callback()的內部提供了jQuery的$.ajax()和$.Deferred()基本功能組件。它能夠用來做爲相似基礎定義的新組件的功能。
        $.callbacks()支持的方法，包括callbacks.add(),callbacks.remove(),callbacks.fire(),callbacks.disable()

12、CSS操做

//css位置操做
$("").offset([coordinates])
$("").positon()
$("").scrollTop)([val])
$("").scrollLeft)([val])

//尺寸操做
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([options])
$("").outWidth([options])

十3、擴展方法(插件機制)

jQuery.extend(object)

//擴展jQuery對象自己
//用來在jQuery命名空間上增長新函數
//在jQuery命名空間上增長兩個函數:
<script>
    jQuery.extent({
        min:function(a, b) {return a<b ? a:b;},
        max:function(a, b) {return a>b ? a:b;}
     });

    jQuery.min(2,3); //2
    jQuery.max(4,5); //5
</script>

jQuery.fn.extend(object)
//擴展jQuery元素集來提供新的方法(一般用來製做插件)
//增長兩個兩個插件方法:
<body>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">

     <script src="jquery.js"></script>
     <script>
        jQuery.fn.extend({
            check: function(){
                $(this).attr("checked", true);
            },
            uncheck: function(){
                $(this).attr("shecked", false);
            },
        });

        $(":checkbox":gt(0).check()
     </script>
 </body>