jQuery的选择器(五)
jQuery的选择器(五)
博为峰教研组 发表于1年前
jQuery的选择器(五)
  • 发表于 1年前
  • 阅读 17
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

四、表单选择器

    :input:取input元素

 :text:取单行文本框元素

:password:取密码框元素

 :radio:取单选框元素

 :checkbox:取复选框元素

:file:取上传域元素

:images:取图片按钮元素

:button:取所有的按钮元素

 :submit:取提交按钮元素

 :reset:取重置按钮元素

这里我们写了一个注册界面的布局来使用表单选择器

<body>

<fieldset style="width: 200px;height: 500px;"><a href=""></a>

<legend>注册表单</legend>

<form>

<p>用户名:<input type="text" name="username"/></p>

<p>密码:<input type="password" name="pwd"/></p>

<p>确认密码:<input type="password" name="repwd"/></p>

<p>性别:

   <input type="radio" name="sex" value="0">男

    <input type="radio" name="sex" value="1">女

</p>

<p>个人爱好:

<input type="checkbox" name="hobby" value="跑步"/>跑步

<input type="checkbox" name="hobby" value="读书"/>读书

<input type="checkbox" name="hobby" value="爬山"/>爬山

<input type="checkbox" name="hobby" value="其他"/>其他

</p>

<p>选择资料:

<input type="file"/>

</p>

<p>

<input type="image">

<br/>

<button>上传图片</button>

</p>

<input type="submit" value="提交表单"/>

<input type="reset" value="重置表单">

   <br/>

   </form>

</fieldset>

</body>

界面效果:

使用表单选择器来修改htm元素的样式

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

// $(":input").css("background","red");

$(":text").attr("value","账号");

$(":password").attr("value","密码");

$(":radio:eq(0)").attr("checked","true");

$(":checkbox").attr("checked","true");

$(":file").css("background","red");

$(":image").attr("src","1.png");

$(":button").css("background","green");

$(":submit").css("background","green");

$(":reset").css("background","red");

});

</script>

 

运行后的效果

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 48
博文 1224
码字总数 479077
×
博为峰教研组
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: