文档章节

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提供了四种表单过...

Red_Ant_hoyl
07/25
0
0
jquery合集--从零开始学习jQuery系列- 转载

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

nkbai
2010/04/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学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge
05/17
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Python基础案例教程

一、超市买薯片 # 用户输入薯片的单价danjia = float(input("薯片的单价"))# 用户输入购买袋数daishu = int(input("购买的袋数"))# 计算总价zongjia = danjia * daishu# 输出结果...

linuxprobe16
56分钟前
1
0
采用CXF框架发布webservice

package cn.it.ws.cxf.a;import javax.jws.WebParam;import javax.jws.WebResult;import javax.jws.WebService;@WebService(serviceName="languageManager")public interface ......

江戸川
58分钟前
1
0
HashMap工作原理及实现

HashMap工作原理及实现 1. 概述 什么时候会使用HashMap?他有什么特点? 知道HashMap的工作原理吗? 知道get和put的原理吗? 知道hash的实现吗?为什么要这样实现? 如果HashMap的大小超过了...

傅小水water
今天
1
0
swagger如何屏蔽某些接口,不对外公开--使用@ApiIgnore

@ApiIgnore@RestController@RequestMapping(value = "/i18nTest")public class I18nTestController {// @Resource// private LocaleMessageSourceService localeMessageSourceSe......

karma123
今天
1
0
大数据技术学习,大数据处理为何选择Spark,而不是Hadoop

大数据处理为何选择Spark,而不是Hadoop。 一.基础知识 1.Spark Spark是一个用来实现快速而通用的集群计算的平台。 在速度方面,Spark扩展了广泛使用的MapReduce计算模型,而且高效地支持更多...

董黎明
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部