집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 선택기 입력과 :input의 차이점

jQuery 선택기 입력과 :input의 차이점

黄舟원래의: 2017-06-23 15:23:342267검색

(1) 입력, 레이블 선택기, 입력 요소만 선택합니다 23efcc05e98690ceeb219581933e4231;
(2) :input, 의사 클래스 선택기, 양식에서 입력, 선택, 텍스트 영역 선택, 버튼
예는 다음과 같습니다:
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>

모든 입력 요소를 찾으면 다음 요소가 일치합니다.

HTML 코드:

<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 코드:

$(":input")

결과:

[ 
    <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 입력은 입력 요소만 선택합니다.

입력 요소를 찾으세요.

HTML 코드:

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

j쿼리 코드:

$("input");

결과:

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

위 내용은 jQuery 선택기 입력과 :input의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：jQuery: 입력 선택기 사용에 대한 자세한 설명다음 기사：jQuery: 입력 선택기 사용에 대한 자세한 설명