jQuery中input和:input選擇器的區別
阿新 • • 發佈:2019-02-11
(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>