; (2) :input、疑似クラス セレクター、フォーム内の input、select、textarea、および button 要素を選択します。"/> ; (2) :input、疑似クラス セレクター、フォーム内の input、select、textarea、および button 要素を選択します。">
ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryセレクターinputと:inputの違い
(1) input、label selector、入力要素のみを選択します 23efcc05e98690ceeb219581933e4231;
(2) :input、擬似 class selector、フォーム内の input、select、textarea を選択します、 button 要素。
例は次のとおりです:
html:
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script> $(function(){ $('input').css('border','1px solid red');//只有input标签边框变为红色 $(':input').foucs(function(){//input select textarea button获取焦点背景变为#fcc $(this).css('background','#fcc'); }).blur(function(){//失去焦点背景变为#fff $(this).css('background','#fff'); }); }) </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. input は input 要素のみを選択します。
入力要素を見つけます。
HTML コード:
<input>INPUT1</input> <input>INPUT2</input> <span>SPAN</span>
jQuery コード:
$("input");
結果:
[ <input>INPUT1</input>,<input>INPUT2</input> ]
以上がjQueryセレクターinputと:inputの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。