jquery 常见选择器详解3

1.常用的表单选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
  //alert($(":input").length);
 // alert($(":text").length);
 // alert($(":password").length);
 // alert($(":radio").val());
 // alert($(":checkbox").val());
// alert($(":submit").val());
 //alert($(":reset").val());
 // alert($(":image").length);
 // alert($(":button").length);
 alert($(":file").length);
});
</script>
</head>
<body>
  <form name="myform">
   <input type="button" value="Input Button"/><br/>
   <input type="checkbox" value="football"/><br/>
   <input type="file" name="upload"/><br/>
   <input type="hidden" value="ok"/><br/>
   <input type="image" src="jia.jpg" width="50px" height="50px"/><br/>
   <input type="password" name="password" value="111"/><br/>
   <input type="radio" value="male">male<br/>
   <input type="reset" value="重置"><br/>
   <input type="submit" value="提交"><br/>
   <input type="text" name="name" value="haige"/><br/>
   <input type="text" name="age" value="age"><br/>
   <select>
    <option>Option1</option>
    <option>Option2</option>
   </select><br/>
   <textarea cols="10" rows="5">多行文本框</textarea>
   <button type="button">Button</button><br/>
   <input type="image" src="jia.jpg" width="50px" height="50px"/><br/>
   <img src="jia.jpg" width="50px" height="50px"/>
  </form>
</body>
</html>

运行截图:

 

2.表单对象属性过滤选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
  //alert($(':text:disabled').length);
  //alert($(':text:enabled').length);
  //alert($(':input:checked').length);
  alert($('select :selected').text());//查找select元素内部被选中的元素
  //alert($('select:selected').text());//查找select元素内部被选中的下拉列表
});
</script>
</head>
<body>
  <form id="myform">
    <input type="text" name="myname" value="haige"/><br/>
    <input type="text" name="myage" value="14" disabled="disabled"/><br/>
    <input type="text" name="pass" value="123"/><br/>
    <input type="text" name="dog" value="阿旺" disabled="disabled"/><br/>
   <input type="text" name="hobby" value="football" checked="checked"/>足球<br/>
    <input type="text" name="hobby" value="basketball"/>篮球<br/>
     <input type="text" name="hobby" value="tennis"/>网球<br/>
     <select name="test" multiple="multiple">
      <option selected="selected">浙江</option>
      <option>湖南</option>
      <option>北京</option>
      <option>天津</option>
      <option selected="selected">上海</option>
     </select>
  </form>
</body>
</html>

运行截图:

posted @ 2016-11-04 09:36  #想飞的鱼儿#  阅读(120)  评论(0)    收藏  举报