码迷,mamicode.com
首页 > 其他好文 > 详细

11.表单选择器

时间:2018-02-23 13:24:24      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:checkbox   提交   type   red   title   color   html   w3c   option   

了解:

:input   表单子元素  input  select  textarea  button==input tpye="button"

:text    文本框

:password  

:radio

:checkbox

:submit

:image

:reset

:button    

:file

:hidden  隐藏( type="hidden" display="none")

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>09-表单选择器.html</title>
 <!--   引入jQuery -->
 <script src="./js/jquery-1.8.3.js" type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[
  $(document).ready(function(){
 
    var $alltext = $("#form1 :text");
    var $allpassword= $("#form1 :password");
    var $allradio= $("#form1 :radio");
    var $allcheckbox= $("#form1 :checkbox");

	var $allsubmit= $("#form1 :submit");
	var $allimage= $("#form1 :image");
	var $allreset= $("#form1 :reset");
	var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
	var $allfile= $("#form1 :file");
    var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
    var $allselect = $("#form1 select");
    var $alltextarea = $("#form1 textarea");
    
	var $AllInputs = $("#form1 :input");
	var $inputs = $("#form1 input");

    $("div").append(" 有" + $alltext.length + " 个( :text 元素)<br/>")
	        .append(" 有" + $allpassword.length + " 个( :password 元素)<br/>")
			.append(" 有" + $allradio.length + " 个( :radio 元素)<br/>")
            .append(" 有" + $allcheckbox.length + " 个( :checkbox 元素)<br/>")
			.append(" 有" + $allsubmit.length + " 个( :submit 元素)<br/>")
            .append(" 有" + $allimage.length + " 个( :image 元素)<br/>")
			.append(" 有" + $allreset.length + " 个( :reset 元素)<br/>")
			.append(" 有" + $allbutton.length + " 个( :button 元素)<br/>")
			.append(" 有" + $allfile.length + " 个( :file 元素)<br/>")
			.append(" 有" + $allhidden.length + " 个( :hidden 元素)<br/>")
			.append(" 有" + $allselect.length + " 个( select 元素)<br/>")
			.append(" 有" + $alltextarea.length + " 个( textarea 元素)<br/>")
			.append(" 表单有 " + $inputs.length + " 个(input)元素。<br/>")
			.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
			.css("color", "red")

	//显示所有的隐藏标签名称
	$allhidden.each(function(){
		$("div").append("<br/>").append($(this).get(0).nodeName);
	});

    $("form").submit(function () { return false; }); // return false;不能提交.
	
  });
  //]]>
  </script>
</head>
<body>
  <form id="form1" action="#">
    <input type="button" value="Button"/><br/>
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
    <input type="file" /><br/>
    <input type="hidden" /><div style="display:none">test</div><br/>
    <input type="image" src="1.jpg"/><br/>
    <input type="password" /><br/>
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
    <input type="reset" /><br/>
    <input type="submit" value="提交"/><br/>
    <input type="text" /><br/>
    <select><option>Option</option></select><br/>
    <textarea rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
  </form>
 
  <div></div>
</body>
</html>

  

11.表单选择器

标签:checkbox   提交   type   red   title   color   html   w3c   option   

原文地址:https://www.cnblogs.com/syj1993/p/8461474.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!