前端基础 -JQuery之 表单选择器

简介: 前端基础 -JQuery之 表单选择器

JQuery之 表单选择器

关键字:

  • :input 只要是form的子标签 就会被选中
  • input 直选中标签为input的元素

效果图:

代码:

<!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.11.0.min.js"></script>
    <script src="../js/assist.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script type="text/javascript">
      $(function() {
        $("#btn1").click(function() {
          alert($(":input").length);
        })
      });
    </script>
  </head>
  <body>
    <input type="button" value="选取所有的表单子元素" id="btn1" /><br />
    <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" /><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>
目录
相关文章
N..
|
1月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
14 1
|
1天前
|
JavaScript 索引
jQuery 选择器有几种,分别是什么
jQuery 选择器有几种,分别是什么
15 5
|
12天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
19 1
|
1月前
|
安全 JavaScript 数据安全/隐私保护
jQuery会员中心安全修改表单特效
jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置效果的代码
14 4
jQuery会员中心安全修改表单特效
|
1月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0
|
1月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
1月前
|
JavaScript 前端开发
jQuery选择器整理
jQuery选择器整理
13 0
|
1月前
|
前端开发 JavaScript 索引
第二章jQuery选择器
第二章jQuery选择器
8 0
|
1月前
|
JavaScript
jquery选择器案例分享
jquery选择器案例分享
9 0
|
1月前
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
23 1