文档章节

jQuery的选择器(五)

博为峰教研组
 博为峰教研组
发布于 2016/12/07 18:54
字数 350
阅读 17
收藏 0

四、表单选择器

    :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>

 

运行后的效果

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
jquery合集--从零开始学习jQuery系列- 转载

从零开始学习jQuery系列 作者: ziqiu.zhang 来源: 博客园 发布时间: 2009-12-22 11:37 阅读: 3452 次 [收藏] 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二...

nkbai
2010/04/06
0
0
JQuery 选择器与过滤器(随手笔记)

一、表单选择器 虽然可以使用常规的选择器来对表单的元素进行定位,但还是不能满足多变的需求,所以这里我们一起来学习一下JQuery表单选择器。 例如: 二、表单过滤器 JQuery提供了四种表单过...

Red_Ant_hoyl
2018/07/25
0
0
jQuery学习笔记之JavaScript脚本库和元素选择器研究[图]

jQuery学习笔记之JavaScript脚本库和元素选择器研究[图] jQuery是一套JavaScript脚本库,相当于Java的类库,将一些工具方法或者对象方法封装在类库中,方便用户使用。 工厂函数指的是这些内建...

原创小博客
2018/08/06
0
0
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
0
0
jQuery性能优化的28个建议

我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些。找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来 一、选择器性能优化建议 1. 总是从#...

晨曦之光
2012/03/01
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7 Nginx+rtmp 搭建流媒体服务器

一. gcc 安装 安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装: yum -y install gcc gcc-c++ 二. PCRE pcre-devel 安装 PCRE(Perl Compatib...

legend3
30分钟前
2
0
“别更新了,学不动了” 之:全栈开发者 2019 应该学些什么?

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文转载自 公众号 infoqchina 对于什么是全栈开发者并没有一个明确的定义。但是,有一件事是...

葡萄城技术团队
47分钟前
7
0
OSChina 周五乱弹 —— 姑娘馋的口水都留下来了。

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @且无需多言 :分享Fall Out Boy的单曲《Disloyal Order Of Water Buffaloes》 《Disloyal Order Of Water Buffaloes》- Fall Out Boy 手机党...

小小编辑
今天
827
15
vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
2
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部