(1) input，标签选择器，仅仅选择input元素；
(2) :input，伪类选择器，选择表单中的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>查找所有的input元素，下面这些元素都会被匹配到。
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元素。
查找一个 input 元素。
HTML 代码:
<input>INPUT1</input> <input>INPUT2</input> <span>SPAN</span>
jQuery 代码:
$("input");结果:
[ <input>INPUT1</input>,<input>INPUT2</input> ]
以上是 jQuery选择器input和:input两者之间的区别的详细内容。更多信息请关注PHP中文网其他相关文章！
