Heim > Web-Frontend > js-Tutorial > In Javascript integrierte Objekte (Teilinhalt)

In Javascript integrierte Objekte (Teilinhalt)

php是最好的语言
Freigeben: 2018-08-09 15:32:02
Original
1597 Leute haben es durchsucht

Textobjekt

Textobjekt stellt ein Texteingabefeld in einem HTML-Formular dar. Jedes Mal, wenn input type="text in einem HTML-Formular erscheint, wird ein Textobjekt erstellt.
disabled Legt fest oder gibt zurück, ob das Textfeld deaktiviert werden soll. (Es gibt nur zwei Werte: true und false)
readOnly Legt fest oder gibt zurück, ob das Textfeld schreibgeschützt sein soll (kann nur gelesen, nicht geändert werden). (Es gibt nur zwei Werte: wahr und falsch)
Wert legt den Wert des Wertattributs des Texts fest oder gibt ihn zurück Feld in
focus(). Fokus auf das Textfeld setzen.

Radio-Objekt stellt das Optionsfeld im HTML-Formular dar oder gibt den Wert des Optionsfelds zurück (true und false).

disabled legt fest, ob das Optionsfeld deaktiviert ist Das Checkbox-Objekt stellt ein Kontrollkästchen in einem HTML-Formular dar.

checked legt den Status der Mehrfachauswahlschaltfläche fest oder gibt zurück, ob eine Schaltfläche deaktiviert sein soll Attribut des Kontrollkästchens.

zB:

        <form>
            <input name="wd" />
            <input type="button" onclick="onesubmit()" value= "搜索" />
        </form>
        <script>
            var form = document.getElementsByTagName("form")[0];
            form.action = "https://www.baidu.com/s";            var text = document.getElementsByName("wd")[0];            function onesubmit(){
                text.value = "中国";//设置或返回文本域的 value 属性的值
                console.log(text.value);
                text.focus();//在文本域上设置默认焦点
                text.readOnly = true;//设置或返回文本域是否应是只读的 即不能更改
                text.disabled = true;//设置或返回文本域是否应被禁用,即不能使用
            }        </script>
Nach dem Login kopieren

Objekt auswählen

Objekt auswählen stellt eine Dropdown-Liste im HTML-Formular dar] Gibt ein Array zurück, das alle Optionen im enthält Dropdown-Liste.

deaktiviert legt fest, ob die Dropdown-Liste deaktiviert werden soll.

Länge gibt die Anzahl der Optionen in der Dropdown-Liste zurück (beginnt bei 0). add() Fügt eine Option zur Dropdown-Liste hinzu.

remove() Entfernt eine Option aus der Dropdown-Liste.


Option(text,value) Erstellt ein Optionsobjekt durch Text (d. h.). , der Wert zwischen Options-Tags) und value value
selected legt den Wert des ausgewählten Attributs fest oder gibt ihn zurück (wahr oder falsch, d. h., ob es ausgewählt ist)

text legt fest oder gibt den Klartextwert einer Option zurück .

Wert Legt den an den Server gesendeten Wert fest oder gibt ihn zurück:

rrree

Elementobjekt

Stellt ein HTML-Element dar haben untergeordnete Knoten vom Typ Elementknoten, Textknoten und Kommentarknoten. Rufen Sie das Element-Objekt über die Methode getElementById(), getElementsByTagName() oder getElementsByName() des Document-Objekts ab.

element.className legt das Klassenattribut des Elements fest oder gibt es zurück.
element.innerHTML legt den Inhalt des Elements fest oder gibt ihn zurück.
element.style Legt das Stilattribut des Elements fest oder gibt es zurück.
element.parentNode gibt den übergeordneten Knoten des Elements als Node-Objekt zurück.

zB:

<body>
        <form onsubmit="return check()">
            用户名<input name="user_name" id="user_name" /><br />
            密码<input name="password" id="password" type="password" /><br />
            确认密码<input name="pw_check" id="pw_check" type="password" /><br />
            <input type="reset" value="重置" />
            <input type="submit" value="注册" />
            <input type="radio" name="sex" value="男" />男            <input type="radio" name="sex" value="女" />女            <input type="checkbox" name="hobby" value="篮球" />篮球            <input type="checkbox" name="hobby" value="羽毛球" />羽毛球            <input type="checkbox" name="hobby" value="乒乓球" />乒乓球            <input type="checkbox" name="hobby" value="足球" />足球            <select name="choose" id="choose">
                <option value="gaoyi">高一</option>
                <option value="gaoer">高二</option>
                <option value="gaosan">高三</option>
            </select>
        </form>
        <span id="msg" style="color: red;"></span>

        <script>

            function $(id){
                return document.getElementById(id);
            }            function check(){
                var selects = document.getElementById("choose");
                selects.disabled=true;
                console.log(selects.length);
                console.log(selects.selectedIndex);                var options = selects.options;                for(var i=0;i<options.length;i++){
                    console.log(options[i].value)
                }
                console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$");                var radios = document.getElementsByName("sex");                for(var i=0;i<radios.length;i++){

                    console.log(radios[i].checked+radios[i].value);
                }
                radios[0].cheked=true;
                radios[0].disabled=true;

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");                var checkboxes = document.getElementsByName("hobby");                for(var i=0;i<checkboxes.length;i++){

                    console.log(checkboxes[i].checked+checkboxes[i].value)
                }
                checkboxes[2].checked=true;
                checkboxes[2].disabled=true;
                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");                var user_name = $("user_name").value;                var password = $("password").value;                var pw_check = $("pw_check").value;                if(user_name.length==0){
                    $("msg").innerHTML = "用户名不能为空";                    return false;
                }                else if(user_name.length>12){
                    $("msg").innerHTML = "用户名不能超过12个字符";                    return false;
                }                if(password.length==0){
                    $("msg").innerHTML = "密码不能为空"
                    return false;   
                }                else if(password.length>15){
                    $("msg").innerHTML = "密码不能超过12个字符";                    return false;
                }                if(password!=pw_check){
                    $("msg").innerHTML = "密码不一致";                    return false;
                }
                console.log("注册成功")                return false;
            }        </script>
    </body>
Nach dem Login kopieren

Das obige Beispiel imitiert den Effekt des Wechselns von Beschriftungen und der Anzeige von Inhalten durch Bewegen der Maus auf der Sina-Seite.

Fensterobjekt

Tatsächlich gehören häufig verwendete Verlaufs-, Dokument- und andere Objekte zum Fensterobjekt, aber das Fensterobjekt ist eine globale Variable und „Fenster“ wird im Allgemeinen weggelassen .

Dokumentobjekt

Domäne gibt den Domänennamen des aktuellen Dokuments zurück, zum Beispiel: www.blue-bridge.com

URL gibt die URL des aktuellen Dokuments zurück, zum Beispiel: http ://www.blue-bridge.com/venus/login.jsp

getElementById() Gibt einen Verweis auf das erste Objekt mit der angegebenen ID zurück.

getElementsByName() gibt eine Sammlung von Objekten mit dem angegebenen Namen zurück.

getElementsByTagName() gibt eine Sammlung von Objekten mit dem angegebenen Tag-Namen zurück.

History-Objekt

back() lädt die vorherige URL in der History-Liste, genau wie die Schaltfläche „Zurück“.

forward() lädt die nächste URL in der Verlaufsliste, genau wie die Schaltfläche „Weiter“.

go() lädt eine bestimmte Seite in der Verlaufsliste, History.go(-1)//ist äquivalent zu back().

Verwandte Empfehlungen:

TextRange-Objektanwendungsbeispiel für die Verarbeitung eines Teils des Textinhalts

Einzelnes integriertes Objekt von „JavaScript Adventure“

Das obige ist der detaillierte Inhalt vonIn Javascript integrierte Objekte (Teilinhalt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage