jQuery选择器input和:input两者之间的区别

来源：动视网责编：小采时间：2020-11-27 20:19:00

jQuery选择器input和:input两者之间的区别

jQuery选择器input和:input两者之间的区别:(1) input，标签选择器，仅仅选择input元素<input type="text">； (2) :input，伪类选择器，选择表单中的input ，select， textarea， button元素. 示例如下： html:<html> <head> <s

推荐度：

点击下载本文 文档为doc格式

导读jQuery选择器input和:input两者之间的区别:(1) input，标签选择器，仅仅选择input元素<input type="text">； (2) :input，伪类选择器，选择表单中的input ，select， textarea， button元素. 示例如下： html:<html> <head> <s

(1) input，标签选择器，仅仅选择input元素<input type="text">；
(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两者之间的区别

推荐度：

点击下载本文 文档为doc格式

标签：区别的区别有什么区别

热门焦点

jQuery选择器input和:input两者之间的区别

jQuery选择器input和:input两者之间的区别

jQuery选择器input和:input两者之间的区别

最新推荐

猜你喜欢

热门推荐