01 jquery屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        $(function(){
            $('#button1').click(
                function(){
                    alert($('#input1').val());
                }
            );
            
            $('#button2').click(
                function(){
                    $('#input1').val("設置輸入框中的內(nèi)容");
                }
            );
            
            
            $('#button3').click(
                function(){
                    $('#single').val("Single2");
                    $('#multiple').val(["Multiple2","Multiple3"]);


                    $('input:checkbox').eq(0).attr('checked', 'true');//根據(jù)索引來設置屬性
                    $('input:checkbox').eq(1).attr('checked', 'true');
                    
                    $('input:radio').eq(0).attr('checked', 'true');
                    
//                    $("input").val(["check2", "radio1"]);//這樣會動到所有的input元素,包括輸入框
                }
            );
            
            $('#button4').click(
                function(){
                    alert($('input').attr("name"));    //獲取所有input標簽name屬性
                }
            );
            
            $('#button5').click(
                function(){
                    $("p").attr({style:"color:red;"});
                }
            );
            
            $('#button6').click(
                function(){
                    $("#input1").attr("placeholder", function() { return this.name });//這個this代表的是document(dom)對象,而不是jquery對象,所以只能使用document對象的屬性哦
                }
            );
            
            
            $('#button7').click(
                function(){
                    alert($('p').html());   
                }
            );
            
            $('#button8').click(
                function(){
                    alert($('p').html("<a href='#'>被改變了</a>"));
                }
            );
        });
    </script>
</head>
<body>
    <p><b>val屬性</b></p>
    <hr>
    姓名:
    <input id="input1" type="text" name="input2" value="" placeholder="請輸入姓名">
    <br>
    <button id="button1">獲取輸入框內(nèi)容</button>
    <br>
    <br>
    <button id="button2">設置輸入框內(nèi)容</button>
    <br>
    <br>


    <select id="single">
        <option>Single</option>
        <option>Single2</option>
    </select>
    <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select>
    
    <br/>
    <input type="checkbox" name="checkbox" value="check1" /> check1
    <input type="checkbox" name="checkbox" value="check2" /> check2
    
    <input type="radio" name="radio" value="radio1" /> radio1
    <input type="radio" name="radio" value="radio2" /> radio2
    <br><br>
    <button id="button3">設置下拉單選/多選,復合選,單選選項的值</button>
    
    <hr>
    <p>attr屬性</p>
    <hr>
    
    <button id="button4">獲取input標簽屬性</button><br><br>
    <button id="button5">給所有p標簽設置屬性</button><br><br>
    <button id="button6">設置input標簽屬性</button><br><br>
    
    <hr>
    <p>html/text屬性(text區(qū)別在于所有內(nèi)容都被當文本)</p>
    <hr>
    
    <button id="button7">獲取p標簽html內(nèi)容</button><br><br>
    <button id="button8">設置p標簽html內(nèi)容</button><br><br>
</body>
</html>
Paste_Image.png
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容