博主信息
Victor的博客
博文
35
粉絲
0
評論
0
訪問量
8331
積分:0
P豆:76

Jquery-基礎語法備忘-2019年10月27日

2019年10月28日 19:59:56閱讀數:620博客 / Victor的博客 / 前端基礎
實例
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Jquery初級基礎備忘</title>
    <script src="../static/jquery-3.4.1.js">
    </script>
    <script>
        $(document).ready(function() {
            $('p').click(function() {
                $(this).hide();
            });
        });
        /*
        jQuery 是一個 JavaScript 庫。
        jQuery 極大地簡化了 JavaScript 編程。
        jQuery 庫包含以下特性:
        HTML 元素選取
        HTML 元素操作
        CSS 操作
        HTML 事件函數
        JavaScript 特效和動畫
        HTML DOM 遍歷和修改
        AJAX
        Utilities
        ====================================================================================
        基礎語法是:$(selector).action()
        jQuery 使用 CSS 選擇器來選取 HTML 元素。
        $("p") 選取 <p> 元素。
        $("p.intro") 選取所有 class="intro" 的 <p> 元素。
        $("p#demo") 選取所有 id="demo" 的 <p> 元素。
        
        jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
        $("[href]") 選取所有帶有 href 屬性的元素。
        $("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
        $("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
        $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
        $(selector).hide(speed,callback);
        $(selector).show(speed,callback);
        可以使用 toggle() 方法來切換 hide() 和 show() 方法。 $(selector).toggle(speed,callback);
        $(selector).slideDown(speed,callback);
        $(selector).slideUp(speed,callback);
        $(selector).slideToggle(speed,callback);
        $(selector).animate({params},speed,callback);
        如需對位置進行操作,要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute!
        jQuery stop() 方法用于停止動畫或效果,在它們完成之前。
        stop() 方法適用于所有 jQuery 效果函數,包括滑動、淡入淡出和自定義動畫。
        $(selector).stop(stopAll,goToEnd);
        可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向后執行。
        可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
        因此,默認地,stop() 會清除在被選元素上指定的當前動畫。
        當動畫 100% 完成后,即調用 Callback 函數。
        $("p").hide(1000,function(){alert("The paragraph is now hidden");});
        鏈接(chaining)的技術,允許我們在相同的元素上運行多條 jQuery 命令,一條接著另一條
        =============================================================================================

        獲得內容 - text()、html() 以及 val()
        三個簡單實用的用于 DOM 操作的 jQuery 方法:
        text() - 設置或返回所選元素的文本內容
        html() - 設置或返回所選元素的內容(包括 HTML 標記)
        val() - 設置或返回表單字段的值

        attr() 方法用于獲取屬性值。

        append() - 在被選元素的結尾插入內容
        prepend() - 在被選元素的開頭插入內容
        after() - 在被選元素之后插入內容
        before() - 在被選元素之前插入內容

        append() 和 prepend() 方法能夠通過參數接收無限數量的新元素。可以通過 jQuery 來生成文本/HTML,或者通過 JavaScript 代碼和 DOM 元素。
        
        remove() - 刪除被選元素(及其子元素)
        empty() - 從被選元素中刪除子元素
        remove() 方法也可接受一個參數,允許您對被刪元素進行過濾。
                    該參數可以是任何 jQuery 選擇器的語法。
        ================================================================================

        addClass() - 向被選元素添加一個或多個類
        removeClass() - 從被選元素刪除一個或多個類
        toggleClass() - 對被選元素進行添加/刪除類的切換操作
        css() - 設置或返回樣式屬性 css() 方法設置或返回被選元素的一個或多個樣式屬性。
        如需設置指定的 CSS 屬性,請使用如下語法:css("propertyname","value");
        如需設置多個 CSS 屬性,請使用如下語法:
        css({"propertyname":"value","propertyname":"value",...});
        ===================================================================================
        Query 提供多個處理尺寸的重要方法:
        width()
        height()
        innerWidth()
        innerHeight()
        outerWidth()
        outerHeight()
        width() 方法設置或返回元素的寬度(不包括內邊距、邊框或外邊距)。
        height() 方法設置或返回元素的高度(不包括內邊距、邊框或外邊距)。
        innerWidth() 方法返回元素的寬度(包括內邊距)。
        innerHeight() 方法返回元素的高度(包括內邊距)。
        outerWidth() 方法返回元素的寬度(包括內邊距和邊框)。
        outerHeight() 方法返回元素的高度(包括內邊距和邊框)。
        outerWidth(true) 方法返回元素的寬度(包括內邊距、邊框和外邊距)。
        outerHeight(true) 方法返回元素的高度(包括內邊距、邊框和外邊距)。
        $("#div1").width(500).height(500);給參數,設置元素的寬度和高度;
        ========================================================================================
        parent()
        parents()
        parentsUntil()
        parent() 方法返回被選元素的直接父元素。該方法只會向上一級對 DOM 樹進行遍歷。
        parents() 方法返回被選元素的所有祖先元素,它一路向上直到文檔的根元素 (<html>)。
        parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。
        $("span").parentsUntil("div");
        例子返回介于 <span> 與 <div> 元素之間的所有祖先元素:
        -------------------------------------------------------------------------------
        children()
        find()
        children() 方法返回被選元素的所有直接子元素。該方法只會向下一級對 DOM 樹進行遍歷。
        $("div").children("p.1");
        find() 方法返回被選元素的后代元素,一路向下直到最后一個后代。
        --------------------------------------------------------------------------------
        有許多有用的方法讓我們在 DOM 樹進行水平遍歷:
        siblings()
        next()
        nextAll()
        nextUntil()
        prev()
        prevAll()
        prevUntil()
        siblings() 方法返回被選元素的所有同胞元素。
        $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
        next() 方法返回被選元素的下一個同胞元素。該方法只返回一個元素
        $("h2").next().css({"color":"red","border":"2px solid red"});
        nextAll() 方法返回被選元素的所有跟隨的同胞元素
        $("h2").nextAll();
        nextUntil() 方法返回介于兩個給定參數之間的所有跟隨的同胞元素。
        $("h2").nextUntil("h6");
        prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似,
        只不過方向相反而已:它們返回的是前面的同胞元素(在 DOM 樹中沿著同胞元素向后遍歷,而不是向前)。
        ------------------------------------------------------------------------------------------
        三個最基本的過濾方法是:first(), last() 和 eq(),它們允許您基于其在一組元素中的位置來選擇一個特定的元素。
        過濾方法,比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標準的元素。
        first() 方法返回被選元素的首個元素。
        $("div p").first().css("background-color","yellow");
        last() 方法返回被選元素的最后一個元素。
        eq() 方法返回被選元素中帶有指定索引號的元素。
        索引號從 0 開始,因此首個元素的索引號是 0 而不是 1。下面的例子選取第二個 <p> 元素(索引號 1):
        $("p").eq(1);
        filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除,匹配的元素會被返回。
        下面的例子返回帶有類名 "intro" 的所有 <p> 元素:
         $("p").filter(".intro");
        not() 方法返回不匹配標準的所有元素。
        提示:not() 方法與 filter() 相反。
        下面的例子返回不帶有類名 "intro" 的所有 <p> 元素:
        $("p").not(".intro");
          ======================================================================================================
                語法                          描述              
                $("*")                      選取所有元素      
                $(this)                     選取當前 HTML 元素    
                $("p.intro")                選取 class 為 intro 的 <p> 元素   
                $("p:first")                選取第一個 <p> 元素    
                $("ul li:first")            選取第一個 <ul> 元素的第一個 <li> 元素   
                $("ul li:first-child")      選取每個 <ul> 元素的第一個 <li> 元素    
                $("[href]")                 選取帶有 href 屬性的元素 
                $("a[target='_blank']")     選取所有 target 屬性值等于 "_blank" 的 <a> 元素 
                $("a[target!='_blank']")    選取所有 target 屬性值不等于 "_blank" 的 <a> 元素    
                $(":button")          選取所有 type="button" 的 <input> 元素 和 <button> 元素   
                $("tr:even")                選取偶數位置的 <tr> 元素 
                $("tr:odd")                 選取奇數位置的 <tr> 元素 
                =========================================================================================================
                鼠標事件    鍵盤事件    表單事件    文檔/窗口事件
                click       keypress    submit      load
                dblclick    keydown     change      resize
                mouseenter  keyup       focus       scroll
                mouseleave              blur        unload
        */

        $(document).ready(function() {
            $('#btn1').click(function() {
                $('#test1').text(function(i, oldtext) {
                    return 'old text:' + oldtext + 'new text:' + 'Hello World! index:(' + i + ')';
                });
            });
            $('#btn2').click(function() {
                $('#test2').html(function(i, oldtext) {
                    return 'old HTML:' + oldtext + 'New HTML: Hello <strong>World!</string> index:(' + i + ')';
                });
            });
        })
    </script>
</head>

<body>
    <p>如果你點我,我就會消失。</p>
    <p>繼續點我!</p>
    <p>接著點我!</p>
    <p id="test1">這是<b>粗體</b>文本。</p>
    <p id="test2">這是另一段<b>粗體</b>文本。</p>
    <button id="btn1">顯示舊/新文本</button>
    <button id="btn2">顯示舊/新 HTML</button>
</body>

</html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例


全部評論

文明上網理性發言,請遵守新聞評論服務協議

條評論
暫無評論暫無評論!
  • 第十期線上培訓班 白小姐救世民彩图2019