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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 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
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
判断控件是否已加载完成的代码
2010/02/24 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Python 多进程原理及实现
2020/12/21 Python
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
老干部工作先进事迹
2014/08/17 职场文书
商铺租房协议书范本
2014/12/04 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
收入证明申请书
2015/06/12 职场文书
网络舆情信息简报
2015/07/21 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
协议书格式模板
2016/03/24 职场文书