时间:2021-07-01 10:21:17 帮助过:15人阅读
<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两者之间的区别的详细内容,更多请关注Gxl网其它相关文章!