文档章节

jQuery的选择器(五)

博为峰教研组
 博为峰教研组
发布于 2016/12/07 18:54
字数 350
阅读 17
收藏 0
点赞 0
评论 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>

 

运行后的效果

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 49
博文 1224
码字总数 479077
作品 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
jQuery精选面试题及答案

1、jQuery的美元符号$有什么作用? 回答:其实美元符号$只是”jQuery”的别名,它是jQuery的选择器,如下代码: Html代码 $(document).ready(function(){ }); 当然你也可以用jQuery来代替$,...

西来飞鸿
2014/09/23
0
2
了解jQuery技巧来提高你的代码

1.测试并提升你的jQuery选择器水平 这个jQuery选择器实验室非常酷,它能在线免费使用,当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段,然后你能尝试预定义使用各种jQu...

i33
2012/09/25
0
0
jquery要怎么写才能速度最快?(转)

很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记。 其内容和一些新提供的方法还是很多有值得学习的地方。 1. 使用最新版本的jQuery jQuery的版本更新很快,你应...

山哥
2012/03/16
0
0
jquery要怎么写才能速度最快?

很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记。 其内容和一些新提供的方法还是很多有值得学习的地方。 1. 使用最新版本的jQuery jQuery的版本更新很快,你应...

随影求是
2012/03/16
0
0
jQuery零基础入门——(二)Selector选择器

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 大家好,欢迎回到我们的jQuery零基础...

JandenMa
07/01
0
0
jQuery的性能优化,你知道几条

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

刘炳文
2013/08/31
0
0
jQuery的性能优化,你知道几条

================================================================= 一、选择器性能优化建议 ================================================================= 1. 总是从#id选择器来继......

樱花泪
2013/12/27
0
4
jQuery零基础入门——(五)操作DOM

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 jQuery强大的选择器,最终目的是...

JandenMa
07/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

回想过往,分析当下,着眼未来

好久没有真正的在纸质笔记本上写过东西了,感觉都快不会写字了,笔画都不知道怎么写了。接下来就说说咱们的正事。 2018年7月22日,我做了一个决定,那就是去参加安全培训(可能是我职业生涯中...

yeahlife
40分钟前
1
0
关于工作中的人际交往

关于工作中的人际交往 Intro 写了篇发泄情绪的博客,但不会发布出来。 大概就是,要么忍,要么滚。 以及一些不那么符合社会主义核心价值观,不满于大资本家与小资本家剥削的废话。

uniqptr
46分钟前
0
0
springMVC的流程

1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3.处理器映射器根据请求url找到具体的处理器,生成处理器对象及处理器拦截器(...

JavaSon712
今天
0
0
大数据教程(3.2):Linux系统软件安装之自动化脚本

博主前面文章有介绍过软件的安装,可以帮助IT人员顺利的完成功能软件安装;但是,对于我们运维人员或者需要管理软件安装的项目经理来说,有些应用一次行需要搭建很多台相同的软件环境(如tom...

em_aaron
今天
0
1
Spring Boot 2.0.3 JDBC整合Oracle 12

整合步骤 1. Oracle驱动引入 Oracle驱动一般不能通过maven仓库直接下载得到,需自行下载并导入到项目的lib目录下,建议通过如下pom依赖引入下载的Oracle驱动 <!-- Oracle 驱动 -->...

OSC_fly
今天
0
0
java 8 并行流 - 1

下面创建一个并行流,与顺序流 //顺序流Stream.iterate(0L, i -> i + 1) .limit(Integer.MAX_VALUE) .reduce(0L, Long::sum);//并行流Stream.iterate(0L, i -> i......

Canaan_
今天
0
0
数据结构与算法5

二分法采用向下取整的方法 使用有序数组的好处是查找的速度比无序数组快的多,不好的方面是因为要将所有靠后的数据移开,所以速度较慢,有序数组和无序数组的删除操作都很慢。 有序数组在查找...

沉迷于编程的小菜菜
昨天
1
1
SpringBoot | 第十一章:Redis的集成和简单使用

前言 上几节讲了利用Mybatis-Plus这个第三方的ORM框架进行数据库访问,在实际工作中,在存储一些非结构化或者缓存一些临时数据及热点数据时,一般上都会用上mongodb和redis进行这方面的需求。...

oKong
昨天
5
0
对基于深度神经网络的Auto Encoder用于异常检测的一些思考

一、前言 现实中,大部分数据都是无标签的,人和动物多数情况下都是通过无监督学习获取概念,故而无监督学习拥有广阔的业务场景。举几个场景:网络流量是正常流量还是攻击流量、视频中的人的...

冷血狂魔
昨天
0
0
并发设计之A系统调用B系统

A-->B A在发送请求之前,用乐观锁,减少对B的重复调用,这样一定程度上是幂等性。 比如A系统支付功能,要调用B系统进行支付操作,但是前端对"支付"按钮不进行控制,即用户会不断多次点击支付...

汉斯-冯-拉特
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部