jQuery初學者筆記一

時間 2020-02-15

標籤 jquery 初學者筆記欄目 JQuery 简体版

原文原文鏈接

jQuery初學者筆記一

Mirror王宇陽 byjavascript

jQuery語法

jQuery語法是經過選取HTML元素，並對選取的元素進行操做php

基礎語法：

全部jQuery語句用「$」符號開始css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>點擊消失</p>
        <p>點擊消失</p>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <script>
            $(document).ready(function(){ //固定的jQ開頭
                $("p").click(function(){ // 選取p標籤，並綁定clisk事件
                    $(this).hide(); //事件觸發使用hide()方法（隱藏當前標籤屬性）
                })
            })
        </script>
    </body>
</html>

jQuery函數位於一個document ready函數中，咱們須要在js中加載該函數文檔html

// jQuery入口函數

$(document).ready(function(){
    //jQuery代碼
});
/*******************************/
$(function(){
    //jQuery代碼
});

選擇器語法:

jQuery的選擇器語法格式和CSS的調用方法同樣的哦！java

選擇器容許基於元素的id、class、type、屬性、屬性值等選擇方法來找到指定的HTML元素jquery

元素選擇器ajax
```
$("p"); //選取p標籤元素
```
id選擇器數組
```
$("#demo"); // 選取id='demo'的元素
```

.class選擇器服務器

$(".demo"); // 選取class='demo'的元素

全部元素app
```
$("*"); // 選取所有元素
```

jQuery事件：

事件語法：

參考：

過濾選擇器

基本標籤層次過濾器

:first/:last

:first:選取第一個元素

:last:選取最後一個元素
:not(*):去除選擇器給定的元素
:even/:odd

:even:偶數索引的標籤

:odd:奇數索引的標籤
:eq()/:gt()/:lt()

eq():選取指定索引的元素

ge():選取大於指定索引的元素

lt():選取小於指定索引的元素
:focus 選取全部失去焦點的元素
:header 選取全部標題元素（h1\h2\h3……）
:animated 匹配全部正在執行動畫操做的元素
實例：

$(document).ready(function(){
                $("div:lt(4)").addClass("myClass");// 除最後三個元素之外添加myClass
                $("div:not(.green,.gray)").addClass("myClass"); //除了green和gay之外的元素添加myClass
                $("div:gt(3)").addClass("myClass");//給最後三個元素添加myClass
                $("div:even").addClass("myClass");//偶數索引添加myClass
                $("div:odd").addClass("myClass");// 奇數索引添加沒有Class
                $("div:eq(3)").addClass("myClass");//給指定索引添加myClass
                $("div:first").addClass("myClass");//第一個標籤
                $("div:last").addClass("myClass");//最後一個標籤
            });

內容過濾選擇器

:contains(text) 選取包含text文本內容的元素；區分大小寫
:empty 選取不含子元素或者文本節點的空元素
:has(selector) 選取含有選擇器所匹配的元素的元素
:parent 選取含有子元素或文本節點的元素

屬性過濾選擇器

[attribute] 選取擁有此屬性的元素
[attribute = value] 選取此屬性值爲value的全部元素
[attribute != value] 選取此屬性值不爲value的全部元素
[attribute ^= value] 選取此屬性值爲value開始的全部元素
[attribute $= value] 選取此屬性值爲value結束的全部元素
[attribute *= value] 選取屬性值包含value的全部元素

表單過濾選擇器

表單屬性過濾選擇器

jQuery效果

隱藏和顯示 (hide/show)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hide()/show()</title>
    </head>
    <body>
        <div id="demo">
            <input type="button" id="hide" value="隱藏" />
            <input type="button" id="show" value="顯示" />
            <div id="a1" style=
                "color: #000; 
                background-color: #66FF66;
                width: 100px;
                height: 100px;
                margin-top: 20px;
                text-align: center;">
                演示塊
            </div>
        </div>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                $("#hide").click(function(){
                    // 隱藏
                    $("#a1").hide();
                })
                $("#show").click(function(){
                    //顯示
                    $("#a1").show();
                })
            })
        </script>
    </body>
</html>
<!-- hide/show()語法原型
    $().hide(speed,callback);
    $().show(speed,callback);
     speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
     callback:完成執行後調用的函數名稱
-->

toggle():開關

$("#toggle").click(function(){
    // toggle開關
    $("#a1").toggle();
});
<!-- 
     speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
     callback:完成執行後調用的函數名稱
-->

淡入淡出

fadeIn():淡入已隱藏的元素

語法

$().fadeIn(speed,callback);
<!--
     speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
     callback:完成執行後調用的函數名稱
-->

fadeOut():淡出可見的元素

語法

$().fadeOut(speed,callback);
<!-- 
    speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
     callback:完成執行後調用的函數名稱
-->

fadeToggle()：淡入/出已隱藏的/可見的元素

語法

$().fadeToggle(speed,callback);
<!-- speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
     callback:完成執行後調用的函數名稱
-->

fadeTo()：容許漸變爲給定的不透明度（值介於 0 與 1 之間）

語法：該方法嚴格的說只是將本來100%透明的隱藏給設置了不透明度來利用

$().fadeTo(speed,opacity,callback);
<!-- speed:規定了淡入淡出的延遲時間可取(slow/fast/毫秒數;即：緩慢的、快速的、延遲的)
     opacity:設置給定的不透明度（0~1）
     callback:完成執行後調用的函數名稱
-->

實例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>fadeIn()|fadeOut()|fadeToggle()|fadeTo()</title>
        <script src="jq/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div id="demo">
            <input type="button" id="fadeIn" value="fadeIn" />
            <input type="button" id="fadeOut" value="fadeOut" />
            <input type="button" id="fadeToggle" value="fadeToggle" />
            <input type="button" id="fadeTo" value="fadeTo" />
            <br>
            <div id="a1" style="
                background-color: #5555FF;
                width: 300px;
                height: 100px;
                margin-top: 20px;
            ">  
            </div>
            <div id="info" style="display: none;">
                已隱藏
            </div>
        </div>
        <script>
            function info(){
                $("#info").toggle();
            }
            $(function(){
                $("#fadeIn").click(function(){
                    $("#a1").fadeIn("slow",info());
                    // slow:慢速的
                    // fast:快速的
                });
                $("#fadeOut").click(function(){
                    $("#a1").fadeOut("slow",info());
                });
                $("#fadeToggle").click(function(){
                    $("#a1").fadeToggle("slow",info());
                })
                $("#fadeTo").click(function(){
                    // 設置隱藏不透明度(通俗的講就是顏色變淡並非徹底淡出)
                    $("#a1").fadeTo("slow",0.5);
                })
            })
        </script>
    </body>
</html>

滑動

slideDown():向下滑動元素

語法

$().slideDown(speed,callback);
<!-- 
    speed:slow\fast\毫秒值
    callback:完成動做後執行的函數名稱
 -->

slideUp():向上滑動元素

語法

$().slideUp(speed,callback);
<!-- 
    speed:slow\fast\毫秒值
    callback:完成動做後執行的函數名稱
 -->

slideToggle():上/下切換滑動元素

$().slideToggle(speed,callback);

實例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>slideDown()|slideUp()|slideToggle()</title>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <style type="text/css">
            *{margin: 0px;padding: 0px;}
            #Down,#Up,#Toggle{
                width: 60px;
                height: 20px;
                color: #000000;
                font-size: 10px;
                text-align: center;
                float: left;
                cursor: pointer;
            }
            #Down{background-color: #5555FF;}
            #Toggle{background-color: #FCFF9F;}
            #Up{background-color: #66FF66;}
            #slide{
                clear: both;
                background-color: #CCCCCC;
                width: 180px;
                height: 100px;
                border-top: #FF0000;
                text-align: center;
                position: relative;
            }
            #demo{margin: 10px 0px 0px 10px;}
        </style>
    </head>
    <body>
        <div id="demo">
            <div id="Down">向下滑動</div>
            <div id="Toggle">滑動切換</div>
            <div id="Up">向上滑動</div>
            <div id="slide">
            </div>
        </div>
        <script>
            $(function(){
                $("#Down").click(function(){
                    $("#slide").slideDown();
                })
                $("#Up").click(function(){
                    $("#slide").slideUp();
                })
                $("#Toggle").click(function(){
                    $("#slide").slideToggle();
                })
            })
        </script>
    </body>
</html>

動畫

animate():建立自定義動畫

語法

$().animate({css},speed,callback);
<!-- 
    {css}:定義動畫的css屬性
        （支持多個同時、支持相對值[+=/-=]、支持hide,toggle…等預約義值）
        支持‘隊列’式的動畫（即多個animate()組成一串（隊列）動畫）
    speed:slow/fast/毫秒值
    callback:執行完成調用函數
 -->

實例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>animate()動畫</title>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <style type="text/css">
            #demo{
                margin: 10px;
                width: 100px;
                height: 100px;
                background-color: #5555FF;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div id="demo">
            
        </div>
        <script>
            $(function(){
                $("#demo").animate({
                    left:'300px',
                    width:'+=150px',
                    height:'+=150px',
                    // 支持多個樣式的組合的動畫
                    // 支持相對值
                },2000);//支持延遲
                $("#demo").animate({left:'10px',width:'-=100px',height:'-=100px'});
                $("#demo").click(function(){
                    $("#demo").animate({top:'100px'},1000);
                    $("#demo").animate({left:'100px'},1000);
                    $("#demo").animate({top:'0px'});
                    $("#demo").animate({left:'0px'});
                    // 支持隊列組合的動畫動做
                })
            })
        </script>
    </body>
</html>

中止動畫或效果：
- 語法

$().stop(stopAll,goToEnd);
<!-- 
    stopAll:是否清除動畫隊列 默認false
    goToEnd:是否當即中止動畫 默認false
    默認狀況下，stop()會清除被選中的元素的當前動畫
 -->

Callback()

當前動畫 100% 完成以後執行

jQuery DOM

獲取/設置內容

text() 設置/返回所選元素的文本內容[原型：innerhtml]
html() 設置/返回所選元素的內容（含HTML標籤）
val() 設置/樊湖表單字段的value

獲取/設置屬性

attr() 設置/返回所選元素的屬性內容（支持多個屬性設置，返回數組）

添加元素

append() 尾部插入元素
prepend() 開頭插入元素
after() 被選元素後插入元素
before() 被選元素前插入元素

刪除元素

remove() 刪除被選元素和子元素
- 接受一個參數，過濾被刪除的元素（即指定刪除）
- removeClass() 刪除元素的class加載
empty() 刪除被選元素的子元素

jQuery CSS 獲取/設置

addClass() 向被選元素添加一個或多個Class類
removerClass() 從被選元素中刪除指定的一個或多個Class類
toggleClass() 對被選元素的add/remove進行切換式的操做
css() 設置/獲取被選元素的Class屬性
- css("classname","value") 單個
- css("classname":"value",……) 多個

jQuery 尺寸設置

width()/height() 設置/返回元素的寬度/高度（content;不包括內邊距、邊框、外邊距）
innerWidth()/innerHeight() 設置/返回元素的寬度/高度（Content+Padding；不包括邊框、外邊距）
outerWidth()/outerHeight() 設置/返回元素的寬度/高度（Content+Padding+Border；不包括外邊距）

jQuery 遍歷

向上遍歷DOM樹

parent() 返回本身的直接父類元素
parents() 返回本身的全部直系類元素（直至根元素）
parentsUntil() 返回兩種直接的全部直系類元素（不包含）

// parents(*)/parentsUntil(*):兩個方法在這裏都可選一個參數接收

向下遍歷DOM樹

children() 返回被選元素的全部直接子元素(支持過濾參數)
find() 返回被選元素的後代元素(支持過濾參數，指定標籤、類名、id、name等)

水平遍歷DOM樹

siblings() 返回被選元素的全部同級元素(支持過濾參數)
next() 返回被選元素的下一個同級元素
nextAll() 返回被選元素以後的全部同級元素
nextUntil() 返回被選元素與參數之間的全部同級元素
prev() 返回被選元素的上一個同級元素
prevAll() 返回被選元素以前的全部同級元素
prevUntil() 返回被選元素與參數之間的全部同級元素

遍歷過濾

first() 返回被選元素的首個子元素
last() 返回被選元素的最後子元素
eq() 返回被選元素中帶有指定索引的元素(可選參數，指定索引)
filter()返回可匹配的全部元素
not() 返回不匹配的全部元素

jQuery AJAX

AJAX

AJAX = 異步JavaScript + XML

在不重載網頁的狀況下，後臺加載數據並顯示在頁面上
AJAX菜鳥教程 jQuery ajax()方法

AJAX load()

load() 從服務器加載數據，並返回數據

經常利用：調用一個重複的代碼塊，例如網頁的導航、版本塊等……

由此能夠大大的減小代碼量的編寫工做，模塊化的團隊開發應該經常使用

語法

$().load(URL,data,callback);
<!-- 
    URL:加載的數據文件位置uRL
    data:與URL加載請求一塊兒發送的字符串鍵/值對集合
    callback:執行完畢後調用的函數
        - responseTxt : 調用成功的結果
        - statusTXT : 調用的狀態
        - xhr : XMLHttpRequest對象
 -->

AJAX GET()

$.get() 從指定的資源請求數據
語法

$.get(URL , callback);
<!-- 
    URL:加載的uRL
    callback:執行完畢後調用的函數
 -->

實例

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("數據: " + data + "\n狀態: " + status);
  });
});

AJAX POST()

$.post() 使用 POST 請求向服務器提交數據

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

jQuery初學者筆記 一

jQuery初學者筆記 一

jQuery語法

基礎語法：

選擇器語法:

jQuery事件：

事件語法：

過濾選擇器

基本標籤層次過濾器

內容過濾選擇器

屬性過濾選擇器

表單過濾選擇器

表單屬性過濾選擇器

jQuery效果

隱藏和顯示 (hide/show)

toggle():開關

淡入淡出

fadeIn():淡入已隱藏的元素

fadeOut():淡出可見的元素

fadeToggle()：淡入/出 已隱藏的/可見的元素

fadeTo()：容許漸變爲給定的不透明度（值介於 0 與 1 之間）

實例

滑動

slideDown():向下滑動元素

slideUp():向上滑動元素

slideToggle():上/下 切換滑動元素

實例

動畫

animate():建立自定義動畫

實例

Callback()

jQuery DOM

獲取/設置內容

獲取/設置屬性

添加元素

刪除元素

jQuery CSS 獲取/設置

jQuery 尺寸設置

jQuery 遍歷

向上遍歷DOM樹

向下遍歷DOM樹

水平遍歷DOM樹

遍歷 過濾

jQuery AJAX

AJAX

AJAX load()

AJAX GET()

AJAX POST()

jQuery初學者筆記一

jQuery初學者筆記一

fadeToggle()：淡入/出已隱藏的/可見的元素

slideToggle():上/下切換滑動元素

遍歷過濾