$(":input")和$("input")區別

admin發表於2017-03-31

本章節將通過程式碼例項介紹一下標題中兩個選擇器的區別。

因為不少初學者可能對它們有何區別還不夠清晰，甚至認為它們的功能是完全一樣的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  var $ele=$(":input");
  var str="";
  $.each($ele,function(index,ele){
    str=str+ele.value;
  })
  $("div").text(str);
});
</script>
<body>
<input type="text" value="螞蟻部落"/>
<textarea>softwhy.com</textarea>
<div></div>
</body>
</html>

從上面的程式碼可以看出:input選擇器可以匹配input元素和文字框，再來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  var $ele=$("input");
  var str="";
  $.each($ele,function(index,ele){
    str=str+ele.value;
  })
  $("div").text(str);
});
</script>
<body>
<input type="text" value="螞蟻部落"/>
<textarea>softwhy.com</textarea>
<div></div>
</body>
</html>

上面的程式碼只會獲取input元素的值，於是這兩個選擇器的區別就看出來了。

:input選擇器可以匹配各種型別的表單元素，比如textarea文字框，select下拉選單或者input元素等。

但是input選擇器只能夠匹配input元素。

相關文章