jQuery表单选择器

:input表单选择器
:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有标记的表单元素,而且还包括、 和 标记的表单元素,因此,它选择的表单元素是最广的。
例如:

<body>
  <h3>修改全部表单元素的背景色</h3>
  <form id="frmTest" action="#">
    <input type="button" value="Input Button" /><br />
    <select>
      <option>Option</option>
    </select><br />
    <textarea rows="3" cols="8"></textarea><br />
    <button>Button</button><br />
    </form>

  <script type="text/javascript">
    $("#frmTest :input").addClass("bg_blue");
  </script>
</body>

:text表单文本选择器
:text表单文本选择器可以获取表单中全部单行的文本输入框元素
例如:

<body>
  <h3>修改多个单行输入框元素的背景色</h3>
  <form id="frmTest" action="#">
    <input type="text" id="Text1" value="我是小纸条"/><br />
    <textarea rows="3" cols="8"></textarea><br />
    <input type="text" id="Text2" value="我也是小纸条"/><br />
    <button>Button</button><br />
  </form>

  <script type="text/javascript">
    $("#frmTest :text").addClass("bg_blue");
  </script>
</body>

:password表单密码选择器
:password选择器它的功能是获取表单中全部的密码输入文本框元素
例如:

<body>
  <h3>修改多个密码输入框元素的背景色</h3>
  <form id="frmTest" action="#">
    <input type="text" id="Text1" value="单行文本输入框"/><br />
    <input type="password" id="Text2" value="密码文本输入框"/><br />
    <textarea rows="3" cols="8">区域文本输入框</textarea><br />
    <input type="password" id="Text3" value="密码文本输入框"/><br />
    <button>Button</button><br />
  </form>  
  <script type="text/javascript">
    $("#frmTest :password").addClass("bg_red");
  </script>
</body>

:radio单选按钮选择器
:radio选择器可轻松获取表单中的全部单选按钮元素
例如:

<body>
  <h3>将表单中单选按钮设为不可用</h3>
  <form id="frmTest" action="#">
    <input type="button" value="Input Button" /><br />
    <input id="Radio1" type="radio" />
    <label for="Radio1"></label>
    <input id="Radio2" type="radio" />
    <label for="Radio2"></label><br />
    <button>Button</button><br />
  </form>
  <script type="text/javascript">
    $("#frmTest :radio").attr("disabled","true");
  </script>
</body>

:checkbox复选框选择器
:checkbox选择器可以快速定位并获取表单中的复选框元素。
例如:

<body>
  <h3>将表单的全部复选框设为不可用</h3>
  <form id="frmTest" action="#">
    <input type="button" value="Input Button" /><br />
    <input id="Checkbox1" type="checkbox" />
    <label for="Checkbox1">西红柿</label><br />
    <input id="Checkbox2" type="checkbox" />
    <label for="Checkbox2">茄子</label><br />
    <input id="Checkbox3" type="checkbox" />
    <label for="Checkbox3">黄瓜</label><br />
    <button>Button</button><br />
  </form>
  <script type="text/javascript">
    $("#frmTest :checkbox").attr("disabled","true");
  </script>
</body>

:submit提交按钮选择器
:submit选择器可获取表单中的这个提交按钮元素
例如:

<body>
  <h3>修改表单中提交按钮的背景色</h3>
  <form id="frmTest" action="#">
    <input type="button" value="Input Button" /><br />
    <input type="submit" value="点我就提交了" /><br />
    <button>Button</button><br />
  </form>
  <script type="text/javascript">
    $("#frmTest input:submit").addClass("bg_red");
  </script>
</body>

:image图像域选择器
当一个元素的“type”属性值设为“image”时,该元素就是一个图像域,使用:image选择器可以快速获取该类全部元素。
例如:

<body>
  <h3>修改表单中图像元素的背景色</h3>
  <form id="frmTest" action="#">
    <input type="image" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
    <br />
    <img alt="" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
  </form>
  <script type="text/javascript">
    $("#frmTest :image").addClass("bg_red");
  </script>
</body>

:button表单按钮选择器
使用:button选择器能获取且只能获取“type”属性值为“button”的和这两类普通按钮元素
例如:

<body>
  <h3>修改表单中按钮元素的背景色</h3>
  <form id="frmTest" action="#">
    <input id="Button1" type="button" value="我是普通按钮" /><br />
    <input id="Submit1" type="submit" value="点我就提交" /><br />
    <button> 我也是普通按钮 </button><br />
  </form>
  <script type="text/javascript">
    $("#frmTest :button").addClass("bg_blue");
  </script>
</body>

:checked选中状态选择器
有一些元素存在选中状态,如复选框、单选按钮元素,选中时“checked”属性值为“checked”,调用:checked可以获取处于选中状态的全部元素。
例如:

<body>
  <h3>将处于选中状态的元素设为不可用</h3>
  <form id="frmTest" action="#">
    <input id="Radio1" type="radio" checked="checked" />
    <label id="Label1" for="Radio1">苹果</label><br />
    <input id="Radio2" type="radio" />
    <label id="Label2" for="Radio2">桔子</label><br />
    <input id="Checkbox1" type="checkbox" checked="checked" />
    <label id="Label3" for="Checkbox1">荔枝</label><br />
    <input id="Checkbox2" type="checkbox" />
    <label id="Label4" for="Checkbox2">葡萄</label><br />
    <input id="Checkbox3" type="checkbox" checked="checked" />
    <label id="Label5" for="Checkbox3">香蕉</label><br />
  </form>     
  <script type="text/javascript">
    $("#frmTest :checked").attr("disabled", true);
  </script>
</body>

:selected选中状态选择器
与:checked选择器相比,:selected选择器只能获取下拉列表框中全部处于选中状态的选项元素。
例如:

<body>
  <h3>获取处于选中状态元素的内容</h3>
  <form id="frmTest" action="#">
    <select id="Select1" multiple="multiple">
      <option value="0">苹果</option>
      <option value="1" selected="selected">桔子</option>
      <option value="2">荔枝</option>
      <option value="3" selected="selected">葡萄</option>
      <option value="4">香蕉</option>
    </select><br /><br />
    <div id="tip"></div>
  </form>
  <script type="text/javascript">
    var $txtOpt = $("#frmTest :selected").text();
    $("#tip").html("选中内容为:" + $txtOpt);
  </script>
</body>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值