【JavaWeb jQuery 04】

阿新 • • 發佈：2021-06-15

一、jQuery的屬性操作

1、HTML的程式碼/文字/值

html() 它可以設定和獲取起始標籤和結束標籤中的內容跟dom屬性innerHTML一樣

text() 它可以設定和獲取起始標籤和結束標籤的文字跟dom屬性innerTEXT一樣

val() 它可以設定和獲取表單項的value屬性值　　　　跟dom屬性value一樣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    < 
script type="text/javascript" src="Demo/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {

            //不傳引數是獲取，傳遞引數是設定
            alert( $("div").html());//我是div標籤<span>我是div中的span</span>
            $("div").html("<h1>我說div中的標題</h1> 
") //我說div中的標題


            alert( $("div").text()); //我是div標籤我是div中的span
            $("div").text("<h1>我說div中的標題</h1>"); //<h1>我說div中的標題</h1>


            $("button").click(function () {
              alert( $("input").val()); //獲取文字的內容
              $("input").val("超級程式設計師"); //設定文字的內容 

          })

        })

    </script>

</head>
<body>
    <div>我是div標籤<span>我是div中的span</span></div>
    <input type="text" id="username"/>
    <button>操作</button>

</body>
</html>

val() 可以批量操作單選項，多選項已經下拉列表

$(":radio,:checkbox,#multiple,#single").val(["radio1","checkbox2","mul1","mul2","sin3"])

2、屬性

attr() 可以設定或獲取屬性的值

prop() 可以設定或獲取屬性的值

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    
    $(function(){
        $("#checkedAllBtn").click(function () {
//            給全選按鈕繫結單擊事件
            $(":checkbox").prop("checked",true);
        });

        $("#checkedNoBtn").click(function () {
//            給全選按鈕繫結單擊事件
            $(":checkbox").prop("checked",false);
        });

//        反選，比如選擇了足球，點選反選按鈕則會選擇籃球，羽毛球，乒乓球，而全選/全不選複選框不會被操作，所以需要用name="items"進行過濾
        $("#checkedRevBtn").click(function () {
            //查詢所有球類的複選框，each相當於遍歷
            $(":checkbox[name='items']").each(function () {
                //在each遍歷的function函式中，有一個this物件，這個this物件是當前正在遍歷到的dom物件
                this.checked=!this.checked;
            })
        });

//        滿選（全選/全不選）
        //獲取所有球類的個數，獲取所有選中球類的個數，然後判斷是否相等（相等的話全選，不相等的話全不選）
        var allCount = $(":checkbox[name='items']").length;
        var selectCount = $(":checkbox[name='items']:checked").length;
        if(allCount == selectCount){
            $("#checkedAllBox").prop("checked",true);
        }else {
            $("#checkedAllBox").prop("checked",false);
        }

        $("#sendBtn").click(function () {
            //獲取選中的球類的複選框
            $(":checkbox[name='items'].checked").each(function () {
                alert(this.value);
            })
        })

        
    });
    
</script>
</head>
<body>

    <form method="post" action="">
    
        你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選 
        
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="籃球" />籃球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全　選" />
        <input type="button" id="checkedNoBtn" value="全不選" />
        <input type="button" id="checkedRevBtn" value="反　選" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>

</body>
</html>

3、DOM的增刪改

文件處理的這部分內容

append(）：追加內容

a.appendTo(b）：把a插入到b子元素末尾，成為最後一個子元素

a.prependTo(b）:把a插到b所有子元素的前面，成為第一個子元素

案例1：左側選中的內容新增到右側，右側選中的內容新增到左側

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        select {
            width: 100px;
            height: 140px;
        }
        
        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //頁面載入完成
        $(function () {
            //選中新增到右邊，click事件
            $("button:eq(0)").click(function () {
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            })
            
            //全部新增到右邊，click事件
            $("button:eq(1)").click(function () {
                $("select:eq(0) option").appendTo($("select:eq(1)"));
            })

            //選中刪除到左邊
            $("button:eq(2)").click(function () { //繫結按鈕的單擊事件
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
            })
            
            //全部刪除到左邊
            $("button:eq(3)").click(function () {
                $("select:eq(1) option").appendTo($("select:eq(0)"));
            })
        })
        
    </script>
</head>
<body>

    <div id="left">
        <select multiple="multiple" name="sel01">
            <option value="opt01">選項1</option>
            <option value="opt02">選項2</option>
            <option value="opt03">選項3</option>
            <option value="opt04">選項4</option>
            <option value="opt05">選項5</option>
            <option value="opt06">選項6</option>
            <option value="opt07">選項7</option>
            <option value="opt08">選項8</option>
        </select>
        
        <button>選中新增到右邊</button>
        <button>全部新增到右邊</button>
    </div>
    <div id="rigth">
        <select multiple="multiple" name="sel02">
        </select>
        <button>選中刪除到左邊</button>
        <button>全部刪除到左邊</button>
    </div>

</body>
</html>