jquery設置input的value值「jquery判斷字符串是否為空」

Introduction to jQuery

jQuery 是一個快速、簡潔的 JavaScript 框架，是目前最流行的 JavaScript 程序庫，它是對 JavaScript 對象和函數的封裝
jQuery 的設計思想是 Write less, do more
實現隔行變色效果，JavaScript 要循環加判斷，而 jQuery 只需一句關鍵代碼

$("tr:even").css("background-color", "#ccc");

jQuery Function

訪問和操作 DOM 元素
控制頁面樣式
對頁面事件進行處理
擴展新的 jQuery 插件
與 Ajax 技術完美結合

jQuery 能做的 JavaScript 也都能做，但使用 jQuery 能大幅提高開發效率

jQuery Advantages

體積小，壓縮後只有 100 KB 左右
強大的選擇器
出色的 DOM 封裝
可靠的事件處理機制
出色的瀏覽器兼容性

jQuery Usage

jQuery 作為一個單獨存在的 js 文件，並不會與其他的 js 文件發生衝突

<script src="js/jquery-3.4.1.min.js"></script>

基本的語法介紹

<script>
    $(selector).action();
</script>

工廠函數 $()：將 DOM 對象轉化為 jQuery 對象

選擇器 selector：獲取需要操作的 DOM 元素

方法 action()：jQuery 中提供的方法，其中包括綁定事件處理的方法「$」等同於「jQuery」

例如：

<body>
    <p>hello</p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    alert($("p").text());
</script>

jQuery 對象與 DOM 對象

DOM 對象和 jQuery 對象分別擁有一套獨立的方法，不能混用

$("#title").html();
// 等同於
document.getElementById("title").innerHTML;

如果要混用它們，就要進行轉換

DOM 對象轉 jQuery 對象

// a 是 DOM 對象
var a = document.getElementById("name");
// b 是 jQuery 對象
var b = $(a);

jQuery 對象轉 DOM 對象

// a 是 jQuery 對象
var a = $("#name");
// b 是 DOM 對象
var b = jqObject.get(0);

選擇器

基本選擇器

基本選擇器包括標籤選擇器、類選擇器、ID選擇器、並集選擇器、交集選擇器和全局選擇器。

<p>中國</p>
<p>China</p>
<p class="jy">加油</p>
<p id="wan">萬</p>
<h3 class="jy">加油</h3>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 標籤選擇器，獲得所有的 p
    $("p").css("color","red");
    // 類選擇器
    $(".jy").css("color","red");
    // ID 選擇器，更具備唯一性
    $("#wan").css("color","red");
    // 並集選擇器 ".jy" 和 "#wan"
    $(".jy,#wan").css("color","red");
    // 交集選擇器，既是 h3 標籤，又擁有 ".jy" 的元素
    $("h3.jy").css("color","red");
</script>

層次選擇器

<h3>000</h3>
<div id="x">
    111
    <p>p1</p>
    <div>
        <p>p2</p>
    </div>
</div>
<h3>222</h3>
<h3>333</h3>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 後代選擇器，忽略層級，選取所有後代元素
    $("#x p").css("color","red");
    // 子代選擇器，只選取子層的元素
    $("#x>p").css("color","red");
    // 相鄰元素選擇器，下一個緊鄰的兄弟元素 h3
    $("#x+h3").css("color","red");
    // 同輩元素選擇器，#x 元素之後的的所有兄弟元素 h3
    $("#x~h3").css("color","red");
</script>

屬性選擇器

<a href="www.baidu.com">百度</a>
<a href="www.sina.com.cn">新浪網</a>
<a href="http://www.163.com">網易</a>
<p href="x">測試1</p>
<p href="x" title="x">測試2</p>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 選取擁有 href 屬性的元素
    $("[href]").css("color","red");
    // 選取擁有 href=x 的元素
    $("[href='x']").css("color","red");
    // 選取 a 標籤中 href 不等於 x 的元素
    $("a[href!='x']").css("color","red");
    // 選取 href 屬性以 www 開頭的元素
    $("[href^='www']").css("color","red");
    // 選取 href 屬性以 com 結尾的元素
    $("[href$='com']").css("color","red");
    // 選取 href 屬性包含 a 的元素
    $("[href*='a']").css("color","red");
    // 選取擁有 href 屬性和 title 屬性，並且 title=x 的 p 元素
    $("p[href][title='x']").css("color","red");
</script>

過濾選擇器

<h2 id="h2#x">選擇</h2>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 第一個 li
    $("li:first").css("color","red");
    // 最後一個 li
    $("li:last").css("color","red");
    // 偶數行的 li
    $("li:even").css("color","red");
    // 奇數行的 li
    $("li:odd").css("color","red");
    // 下標為 2 的 li
    $("li:eq(2)").css("color","red");
    // 下標大於 1 的 li
    $("li:gt(1)").css("color","red");
    // 下標小於 2 的 li
    $("li:lt(2)").css("color","red");
    // 使用轉義符
    $("#h2\\#x").css("color","red");
</script>

事件

鼠標事件

鼠標事件是當用戶在文檔上移動或單擊鼠標時而產生的事件。

<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 點擊一下，切換照片
    $("img").click( function(){
        // this 是事件觸發的源頭
        $(this).attr( "src","img/2.jpg" );
    } );
    // 移動到元素上
    $("img").mouseover( function(){
        $(this).css( "border","2px solid red" );
    } );
    // 離開元素
    $("img").mouseout( function(){
        $(this).css( "border","2px solid white" );
    } );
</script>

鍵盤事件

用戶每次按下或者釋放鍵盤上的鍵時都會產生事件。

<input>
<h3></h3>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("input").keyup( function(){
        // 獲取框中的值
        var str = $(this).val();
        // 將 h3 元素中的文本內容更改為 str
        $("h3").text( str );
    } );
</script>

表單事件

當元素獲得焦點時，會觸發 focus 事件，失去焦點時，會觸發 blur 事件。

<form action="">
    <p>帳號：<input id="a" value="請輸入帳號..."></p>
    <p>電話：<input id="b"></p>
</form>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 獲得焦點（激活/點擊一下）
    $("#a").focus(function(){
        $(this).val("");
    });

    // 失去焦點（未激活/未點擊）
    $("#a").blur(function(){
        $(this).val("請輸入帳號...");
    });
</script>

鼠標懸停複合事件

hover() 方法相當於 mouseover 與 mouseout 事件的組合。

<img src="img/3.jpg" width="400">

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("img").hover(
        function(){
            $(this).css("border","5px solid red");
        },
        function(){
            $(this).css("border","5px solid white");
        }
    );
</script>

連續點擊複合事件

<h2>選擇</h2>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("h2").click(function(){
        // 連續點擊，ul 的可見和隱藏進行切換
        $("ul").toggle();
    });
</script>

事件的動態綁定

對 dom 元素綁定事件的另一種寫法

綁定一個事件

$(".del").on('click', function() {
    alert('hello');
})

綁定多個事件

$(".del").on('click mouseover', function() {
    alert('hello');
})

元素的隱藏和顯示

改變元素的寬和高（帶動畫效果）

show(speed)：顯示
hide(speed)：隱藏
toggle(speed) 等價於 show + hide：顯示的隱藏，隱藏的顯示

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值：”slow”、”fast” 或毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
    <button id="btn1">顯示</button>
    <button id="btn2">隱藏</button>
    <button id="btn3">切換</button>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            $("div").show('slow');
        });
        $("#btn2").click(function(){
            // fast:快速的
            // slow:緩慢的
            // 毫秒：自定義
            $("div").hide(2000); 
        });
        $("#btn3").click(function(){
            $("div").toggle(1000);
        });
    </script>
</body>

改變元素的高（拉伸效果）

slideDown(speed)：顯示
slideUp(speed)：隱藏
slideToggle(speed) 等價於 slideDown + slideUp

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值：”slow”、”fast” 或毫秒

<script>
    $("#btn1").click(function(){
        // 向下伸展
        $("div").slideDown(1000);
    });
    $("#btn2").click(function(){
        // 向上收縮
        $("div").slideUp(1000);
    });
    $("#btn3").click(function(){
        // 切換
        $("div").slideToggle(1000);
    });
</script>

不改變元素的大小（淡入淡出效果）

fadeIn(speed) 顯示
fadeOut(speed) 隱藏
fadeToggle(speed) 等價於 fadeIn + fadeOut 動畫
fadeTo(speed, 透明度) 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值：”slow”、”fast” 或毫秒

<script>
    $("#btn1").click(function(){
        // 顯示：映入眼帘
        $("div").fadeIn(1000);
    });

    $("#btn2").click(function(){
        // 隱藏：淡出我的視線
        $("div").fadeOut(1000);
    });

    $("#btn3").click(function(){
        // 切換
        $("div").fadeToggle(1000);
    });

    $("#btn4").click(function(){
        // 1 秒內變成 50% 的透明度
        $("div").fadeTo(1000,0.5);
    });
</script>

鏈

鏈是允許在同一個元素上在一條語句中運行多個 jQuery 方法，可以把動作/方法鏈接在一起。

例如：點擊一次按鈕，讓 div 完成 4 個指定動作：

背景變粉
字體變綠
向上收縮
向下拉伸

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
        color:white;
        font-size: 3em;
    }    
</style>
<body>
    <button>試試</button>
    <div>hello</div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000);
        });
    </script>
</body>

DOM 和 CSS 的操作

屬性函數

attr(“屬性”) 獲得元素的屬性值。

attr(“屬性”, “新值”) 修改元素的屬性值。

attr(樣式參數) 樣式參數可以寫成 json 格式。

<body>
    <button id="btn1">點我試試</button>
    <hr>
    <img src="img/1.jpg" title="風景圖" width="300">

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            $("img").attr("src","img/2.jpg");
            $("img").attr("title","高清風景圖");
            $("img").attr({width:"200",height:"200"});
        });
    </script>
</body>

val() 獲得表單元素中的 value 值

val(“x”) 修改表單元素中的 value 值

html() 獲得元素中的內容（標籤 + 文本）

html(“x”) 修改元素中的內容（標籤 + 文本）

text() 獲得元素中的文本

text(“x”) 修改元素中的文本

<button>試試</button>
<hr>
<input id="username">

<div>
    <h1><i>中國加油</i></h1>
</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // input 框中的值
        alert($("input").val());
        // 修改 input 框中的值
        $("input").val("66666");
        // 獲得 div 中的內容（包含標籤信息）
        alert($("div").html());
        // 獲得 div 中的內容（不包含標籤信息，只包含文本內容）
        alert($("div").text());
        // 修改 div 中的內容（全部內容都覆蓋）
        $("div").text("祖國萬歲！");
    });
</script>

樣式函數

css(“屬性”) 獲得該屬性值

css(“屬性”, “值”) 設置屬性的值

css({json}) 設置多個屬性的值

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>試試</button>
    <hr>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            // 獲取 css 屬性，width 的值
            var w = $("div").css("width");

            // 一個鍵值對
            $("div").css("background-color","pink");

            // 鏈式編程
            $("div").css("background-color","pink").css("border-radius","50%");

            // json 為參數
            $("div").css({
                opacity:"0.4",
                background:"orange",
                borderRadius:"50%"
            });
        });
    </script>
</body>

width() 獲得元素的寬度

width(number) 修改元素的寬度

height() 獲得元素的高度

height(number) 修改元素的高度

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>試試</button>
    <hr>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            //（無參）獲取寬度
            var w = $("div").width();
            //（無參）獲取高度
            var h = $("div").height();
            alert("寬:"+w+"px，高:"+h+"px");
            //（傳參）修改寬度
            $("div").width("300");
            //（傳參）修改高度
            $("div").height("300");
        });
    </script>
</body>

類樣式函數

addClass() 為元素添加類樣式

removeClass() 將元素的類樣式移除

toggleClass() 樣式的切換；有->無，無->有

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #000;
    }
    .a{
        background: palevioletred;
        border-radius: 50%;
    } 
    .b{
        border:5px dashed darkcyan;
        opacity: 0.6;
    }
    .cn{
        background: #000;
        color: #FFF;
        font-family: 字魂49號-逍遙行書;
    }
</style>
<body>
    <button id="btn1">試試</button>
    <button id="btn2">取消透明度</button>
    <button id="btn3">樣式切換</button>
    <hr>
    <div></div>
    <h1>中華人民共和國</h1>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            // $("div").addClass("a");
            $("div").addClass("a b");
        });

        $("#btn2").click(function(){
            $("div").removeClass("b");
        });

        $("#btn3").click(function(){
            $("h1").toggleClass("cn");
        });
    </script>
</body>

節點操作

<input>
<button id="test">測試</button>

<ul>
    <li>西遊記</li>
    <li>三國演義</li>
    <li>水滸傳</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("#test").click(function(){
        var bookname = $("input").val();
        // 通過工廠函數，創建新的 li 節點
        var newli = $("<li>"+bookname+"</li>");

        /* 添加子節點 */
        // newli 添加到 ul 後面
        $("ul").append(newli);
        // newli 添加到 ul 後面
        newli.appendTo("ul");
        // newli 添加到 ul 前面
        $("ul").prepend(newli);
        newli.prependTo("ul");

        /* 添加同輩節點 */
        // newli 添加到最後的 li 的後面
        $("li:last").after( newli );
        newli.insertAfter("li:last");
        //newli 添加到最後的 li 的前面
        $("li:last").before(newli);
        newli.insertBefore("li:last");

        /* 替換節點 */
        // 將第二個 li 替換成 newli
        $("li:eq(1)").replaceWith(newli);
        newli.replaceAll( "li:eq(1)" );

        /* 複製節點 */
        // 複製第一個 li，並插入到最後一個 li 的後面
        $("li:first").clone().insertAfter("li:last");

        /* 刪除節點 */
        // 清空了節點上的文本（節點並沒有消失）
        $("li:eq(1)").empty();
        // 刪除節點
        $("li:eq(1)").remove();
    });
</script>

遍歷節點

祖先元素

用於向上遍歷 DOM 樹的方法

parent() 返回被選元素的直接父元素，僅僅是上一級
parents() 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素，可以選擇輩分

<p><button>測試</button></p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 找爸爸
        var x = $("b").parent().html();
        // 找祖宗 ul
        var x = $("b").parents("ul").html();
        // 找祖宗 body
        var x = $("b").parents("body").html();
        alert( x );
    });
</script>

同輩元素

next() 獲取緊鄰匹配元素之後的元素

prev() 獲取緊鄰匹配元素之前的元素

siblings([selector]) 獲取位於匹配元素前面和後面的所有同輩元素

<button>測試</button>
<p>p1</p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>
<p>p2</p>
<p id="x">p3</p>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 緊鄰的下一個元素
        var x = $("ul").next().text();
        // 緊鄰的上一個元素
        var x = $("ul").prev().text();
        // 所有的兄弟中 id=x 的
        var x = $("ul").siblings("#x").text();
        // ul 的所有兄弟：1 個 button，3 個 p，2 個 script
        var arr = $("ul").siblings();
        for(var i = 0 ;i< arr.length ;i++){
            alert(arr[i]);
        }
    });
</script>

後代元素

後代是子、孫、曾孫等等

children([selector]) 方法返回被選元素的所有直接子元素

<button>測試</button>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 所有子節點：a b c
        var x =  $("ul").children().text();
        // ul 中的第一個子節點
        var x =  $("ul").children("li:first").text();
        alert(x);
    });
</script>

find(選擇器) 方法返回被選元素的後代元素，一路向下直到最後一個後代

<button>測試</button>
<ul>
    <li>盤古</li>
    <li>蚩尤</li>
    <li>刑天
        <p>龔工</p>
    </li>
    <h3>祝融</h3>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 在 ul 中查找 p 元素，忽略層級
        var x = $("ul").find("p").text();
        // 在 ul 中查找 h3 元素，忽略層級
        var x = $("ul").find("h3").text();
        // 不知道找什麼
        var x = $("ul").find().text();
        alert(x);
    });
</script>

元素的過濾

first() 過濾第一個元素

last() 過濾最後一個元素

eq(index) 過濾到下標為 index 的元素

not() 除了什麼之外的元素

is() 返回布爾，判斷是不是這種元素

<button>測試</button>
<ul>
    <li>盤古</li>
    <li>蚩尤</li>
    <li>刑天</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 第一個 li
        var x = $("li").first().text();
        // 最後一個 li
        var x = $("li").last().text();
        // 下標為 1 的 li
        var x = $("li").eq(1).text();
        // 除了下標為 1 的其餘所有 li
        var x = $("li").not("li:eq(1)").text();
        // 返回布爾型，li 的父節點是不是 ul
        var x = $("li").parent().is("ul");
        alert(x);
    });
</script>

案例

手風琴特效

<style>
    dd {
        /* 隱藏元素 */
        display: none;
    }
</style>
<body>
    <nav>
        <header>網站</header>
        <ul>
            <li>
                <dl>
                    <dt>求職</dt>
                    <dd>1.簡歷</dd>
                    <dd>2.面試</dd>
                    <dd>3.入職</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>教育</dt>
                    <dd>1.看視頻</dd>
                    <dd>2.做作業</dd>
                    <dd>3.在線輔導</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>創業</dt>
                    <dd>1.幫助小企業</dd>
                    <dd>2.頭腦風暴</dd>
                    <dd>3.賺錢啦</dd>
                </dl>
            </li>
        </ul>
    </nav>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("nav dt").click(function(){
            // 所有的 dd 全部都閉合上，除了自己的兄弟
            $("dd").not($(this).siblings()).slideUp(500);
            // 自己的兄弟進行切換，顯示閉合上，閉合的顯示出來
            $(this).siblings().slideToggle(500);
        });
    </script>
</body>

購物車結算

<style>
    .minus,.plus{
        border:1px solid #999;
        /* 超鏈接 a 是行內元素 */
        /* 轉換成行內塊顯示，才能改變寬和高 */
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        text-decoration: none;
    }
</style>
<body>
    <table border="1" cellspacing="0" width="400">
        <tr>
            <td>商品編號</td>
            <td>名稱</td>
            <td>單價</td>
            <td>數量</td>
            <td>總價</td>
        </tr>
        <tr>
            <td>1</td>
            <td>炸香腸</td>
            <td>3</td>
            <td>
                <a href="#" class="minus">-</a>
                <span>1</span>
                <a href="#" class="plus">+</a>
            </td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王八</td>
            <td>10</td>
            <td>
                <a href="#" class="minus">-</a>
                <span>1</span>
                <a href="#" class="plus">+</a>
            </td>
            <td>10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>恐龍</td>
            <td>1000</td>
            <td>
                <a href="#" class="minus">-</a>
                <span>1</span>
                <a href="#" class="plus">+</a>
            </td>
            <td>1000</td>
        </tr>
    </table>
    <p style="width: 400px; text-align: right;">
        總價：<b style="color:red;">111</b> <button>提交訂單</button>
    </p>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/car.js"></script>
</body>

car.js

$(".plus").click(function(){
    // 獲得原來的商品數量
    var i = $(this).prev().text();
    i++;
    // 現在的商品數量
    $(this).prev().text(i);
    // 商品單價
    var price = $(this).parent().prev().text();
    // 商品總價
    var total = i*price;
    // 現在商品的總價
    $(this).parent().next().text(total);
    getTotal();
});


$(".minus").click(function(){
    var i = $(this).next().text();
    i--;
    // 數量已經是 0 了，詢問用戶是否刪除該商品
    if(i == 0){
        if( confirm("是否刪除該商品？") ){
            $(this).parents("tr").remove();
        }
    }else{
        $(this).next().text(i);
        // 商品單價
        var price = $(this).parent().prev().text();
        // 商品總價
        var total = i*price;
        // 現在商品的總價
        $(this).parent().next().text(total);
    }
    getTotal();
});

// 計算所有商品的總價
// function getTotal(){
//     // 總價錢
//     var sum = 0;
//     var arr = $("tr:not(tr:first)").find("td:last");
//     for(var i = 0;i<arr.length ; i++){
//        sum += Number(arr[i].innerHTML) ;
//     }
//     $("b").text(sum);
// }

function getTotal(){
    // 總價錢
    var sum = 0;
    $("tr:not(tr:first)").find("td:last").each(function(){
        sum += Number($(this).text());
    });
    $("b").text(sum);
}

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/253084.html