jQuery选择器input和:input两者之间的区别
程序员文章站
2022-05-03 08:30:48
...
(1) input,标签选择器,仅仅选择input元素<input type="text">;
(2) :input,伪类选择器,选择表单中的input ,select, textarea, button元素.
示例如下:
html:
(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两者之间的区别的详细内容,更多请关注其它相关文章!
上一篇: html开发中遇到的问题和坏习惯
下一篇: 最土团购程序购物车功能开发完毕【散分】
推荐阅读
-
使用jQuery实现input数值增量和减量的方法教程
-
如何用input标签和jquery实现多图片的上传和回显功能
-
jQuery控制input只能输入数字和两位小数的方法
-
jquery中$(#form :input)与$(#form input)的区别
-
Python2 中 input() 和 raw_input() 的区别
-
php使用file_get_contents(‘php://input‘)和$_POST的区别实例对比
-
老生常谈jquery id选择器和class选择器的区别
-
jquery的选择器的使用技巧之如何选择input框
-
的区别">
关于
-
button 和input 的区别及在表单form中的用法