jQuery表单选择器用法详解


Posted in jQuery onAugust 22, 2019

表单选择器

1. :button Selector

1. jQuery(":button")

2. 选择所有元素和类型为按钮的元素

2. :checkbox Selector

1. jQuery(":checkbox")

2. 选择所有元素和类型为复选框的元素

3. :checked Selector

1. jQuery(":checked")

2. 选择所有有勾选的元素

4. :disabled Selector

1. jQuery("disabled")

2. 选择所有被禁用的元素

5. :enabled Selector

1. jQuery(":enabled")

2. 选择所有未被禁用的元素

6. :file Selector

1. jQuery(":file")

2. 选择所有文件类型为file的元素

7. :focus Selector

1. jQuery(":focus")

2. 选择当前获取焦点的元素

8. :image Selector

1. jQuery(":image")

2. 选择所有图像类型的元素

9. input Selector

1. jQuery(":input")

2. 选择所有input,textarea,select和button元素

10. :password Selector

1. jQuery(":password")

2. 选择所有文件类型密码的元素

11. :radio Selector

1. jQuery(":radio")

2. 选择所有类型为单选框的元素

12. :submit Selector

1. jQuery(":submit")

2. 选择所有类型为提交的元素

例 :
var input = $(":button").addClass("marked")
// 选择所有为button的表单 然后添加样式marked

内容扩展:

代码实例:

<script>
$(function(){
    //利用:contains获取包含指定内容的组件,筛选文本内容中包含is单词的组件
    //$("p:contains(special)").css("border" , "1px solid red");
    //获取拥有名为input后代节点的标签
    //$("div:has(input)").css("border" , "1px solid red");
    //利用层叠选择器与has()选择器最大的不同时,层叠选择器选中的是input组件,而上面的has则选中的是拥有input组件的div组件
    //$("div input").css("border" , "1px solid red");
    //利用:parent选择器获取所有非空元素
    //$("*:parent").css("border" , "1px solid red");
    //利用:empty 来获取所有空元素
    //$("*:empty").css("border" , "1px solid red");
    //利用:input获取表单所有元素,:之前什么都不写默认就是*查询所有
    //$(":input").css("border" , "1px solid red");
    //$(":input").css("width" , "200px");
    //$("input,select,button").css("border" , "1px solid red");
    //获取所有按钮
    //$(":button , :submit , :reset").css("border" , "1px solid red");
    //利用:disabled获取不可用的表单元素
    //$(":disabled").css("border" , "1px solid red");
    //下面这句话与之等价
    //$("*[disabled='disabled']").css("border" , "1px solid red");
    //获取被选中的单选框或复选框
    //$(":checked").css("width" , "100px");
    $("*[checked='checked']").css("border" , "1px solid red");
  })
</script>

以上就是本次介绍的关于jQuery表单选择器的知识点全部内容,感谢大家的阅读和对三水点靠木的支持。

jQuery 相关文章推荐
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
jQuery zTree树插件的使用教程
Aug 16 #jQuery
jQuery zTree插件快速实现目录树
Aug 16 #jQuery
jQuery zTree插件使用简单教程
Aug 16 #jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 #jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
You might like
php实现window平台的checkdnsrr函数
2015/05/27 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
基于FME使用Python过程图解
2020/05/13 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
军训学生自我鉴定
2014/02/12 职场文书
报关专员求职信范文
2014/02/22 职场文书
学生请假条格式
2014/04/11 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js