Heim >Web-Frontend >js-Tutorial >Der Unterschied zwischen jQuery-Selektoreingabe und :input

Der Unterschied zwischen jQuery-Selektoreingabe und :input

黄舟Original: 2017-06-23 15:23:342277Durchsuche

(1) Eingabe, Tag-Selektor, wählt nur das Eingabeelement 23efcc05e98690ceeb219581933e4231 aus;
(2) :input, Pseudo-Klassenselektor, Eingabe auswählen, auswählen, Textbereich, Schaltflächenelemente im Formular
Beispiel ist wie folgt:
html:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script>
            $(function(){
                $(&#39;input&#39;).css(&#39;border&#39;,&#39;1px solid red&#39;);//只有input标签边框变为红色
                $(&#39;:input&#39;).foucs(function(){//input select textarea button获取焦点背景变为#fcc
                    $(this).css(&#39;background&#39;,&#39;#fcc&#39;);
                }).blur(function(){//失去焦点背景变为#fff
                    $(this).css(&#39;background&#39;,&#39;#fff&#39;);
                });
            })        </script>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>个人基本信息</legend>
                <div>
                    <label for="username">名称：</label>
                    <input type="text" id="username">
                </div>
                <div>
                    <label for="nation">国家：</label>
                    <select>
                        <option>中国</option>
                        <option>美国</option>
                        <option>英国</option>
                    </select>
                </div>
                <div>
                    <label for="msg">详细信息：</label>
                    <textarea id="msg"></textarea>
                </div>
                <div>
                    <button id="submit">提交</button>
                </div>
            </fieldset>

        </form>
    </body></html>

Alle Eingabeelemente finden, die folgenden Elemente werden abgeglichen.

HTML-Code:

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
 
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
 
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
 
    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>
 
    <textarea></textarea>
    <button>Button</button>
 
</form>

jQuery-Code:

$(":input")

Ergebnis:

[ 
    <input type="button" value="Input Button"/>,
    <input type="checkbox" />,
 
    <input type="file" />,
    <input type="hidden" />,
    <input type="image" />,
 
    <input type="password" />,
    <input type="radio" />,
    <input type="reset" />,
 
    <input type="submit" />,
    <input type="text" />,
    <select><option>Option</option></select>,
 
    <textarea></textarea>,
    <button>Button</button>,
 ]

2. Eingabe wählt nur das Eingabeelement aus.

Ein Eingabeelement suchen.

HTML-Code:

<input>INPUT1</input>
<input>INPUT2</input>
<span>SPAN</span>

jQuery-Code:

$("input");

Ergebnis:

[ <input>INPUT1</input>,<input>INPUT2</input> ]

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen jQuery-Selektoreingabe und :input. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：jQuery: Detaillierte Erläuterung der Verwendung des EingabeselektorsNächster Artikel：jQuery: Detaillierte Erläuterung der Verwendung des Eingabeselektors

In Verbindung stehende Artikel

Mehr sehen