http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 2723|回复: 3

[JavaScript] jQuery的表单元素选择器解析大全

[复制链接]
发表于 2018-3-20 21:51:47 | 显示全部楼层 |阅读模式
jQuery的表单元素选择器解析大全



在这里,总结了下jQuery的表单元素选择器,都有哪些表单元素选择器,表单元素选择器的具体使用方法,并通过具体的实例,介绍各个表单元素选择器的具体使用方法。


jQuery的表单元素选择器列表如下:


[C#] 纯文本查看 复制代码
1. :input  匹配所有 input, textarea, select 和 button 元素
2. :text  匹配所有的单行文本框
3. :password  匹配所有密码框
4. :radio  匹配所有单选按钮
5. :checkbox  匹配所有复选框
6. :submit  匹配所有提交按钮(只匹配 type="submit" 的input或者button)
7. :image  匹配所有图像域
8. :reset  匹配所有重置按钮
9. :button  匹配所有按钮
10 :file  匹配所有文件域

下面会根据具体的实例,进行各个 jQuery的表单元素选择器的详解

1. :input

     匹配所有 input, textarea, select 和 button 元素,即页面是所有的表单元素中,获取所有的 input框,textarea文本输入框,select下拉框,button按钮

jQuery代码如下:
[JavaScript] 纯文本查看 复制代码
$(":input")

输出代码如下:
[JavaScript] 纯文本查看 复制代码
[ 
    <input type="button" value="Input Button"/>,
    <input type="checkbox" />,

    <input type="file" />,
    <input type="hidden" />,
    <input type="image" />,

    <input type="password" />,
    <input type="radio" />,
    <input type="reset" />,

    <input type="submit" />,
    <input type="text" />,
    <select><option>Option</option></select>,

    <textarea></textarea>,
    <button>Button</button>,
 ]

备注:
从以上代码可以看出,  :input  选择器,获取的是所有的 input 元素,不管type 为text文本输入框,还是image 图像内容, password 密码输入框........   均可以获取到


2. :text

匹配所有的单行文本框

jQuery代码:
[JavaScript] 纯文本查看 复制代码
$(":text")

输出代码:
[JavaScript] 纯文本查看 复制代码
[ <input type="text" /> ]

备注:
从以上内容可以看出, :text  选择器,获取的仅仅是 type=text的input元素   即页面上通常使用的 input输入框


3. :password

匹配所有密码框

jQuery代码:
[JavaScript] 纯文本查看 复制代码
$(":password")

输出结果:
[JavaScript] 纯文本查看 复制代码
[ <input type="password" /> ]

备注:
从以上输出内容可以看出 :password 获取的是所有的,type=password的 input元素  即我们页面上常用的密码输入框  通常会用在登陆,注册,修改密码等地方


4. :radio

匹配所有单选按钮

jQuery代码:
[JavaScript] 纯文本查看 复制代码
$(":radio")

输出结果:
[JavaScript] 纯文本查看 复制代码
[ <input type="radio" /> ]

备注:
从输出内容可以看到,:radio 获取的是说有的 type=”radio“的单元按钮


5. :checkbox

匹配所有复选框

jQuery代码:
[JavaScript] 纯文本查看 复制代码
$(":checkbox")

输出结果:
[JavaScript] 纯文本查看 复制代码
[ <input type="checkbox" /> ]

备注:从输出内容可以看到, :checkbox  获取的是说有的 type=”checkbox“的复选框


6. :submit

匹配所有提交按钮(只匹配 type="submit" 的input或者button), 如果button 没有标注type 的话,默认为 type=”submit“

jQuery代码:
[JavaScript] 纯文本查看 复制代码
$(":submit")

输出结果:
[JavaScript] 纯文本查看 复制代码
[ <input type="submit" />, <button></button> ]

备注:从输出内容可以看到,:submit 获取的是说有的页面的提交按钮  button  或者type=”submit“的input元素   
另需谨记,button 在默认不设置type的情况下,默认type为submit,   所以很多情况下,不设置type的button也会成为筛选结果


7. :image

匹配所有图像域

jQuery代码:
[JavaScript] 纯文本查看 复制代码
$(":image")

输出结果:
[JavaScript] 纯文本查看 复制代码
[ <input type="image" /> ]

8. :reset  
匹配所有重置按钮
jQuery代码:
[JavaScript] 纯文本查看 复制代码
$(":reset")

输出结果:
[JavaScript] 纯文本查看 复制代码
[ <input type="reset" /> ]


9. :button
匹配所有按钮
jQuery代码:
[JavaScript] 纯文本查看 复制代码
$(":button")

输出结果:
[JavaScript] 纯文本查看 复制代码
[ <input type="button" />,<button></button> ]


10 :file
匹配所有文件域

jQuery代码:
[JavaScript] 纯文本查看 复制代码
$(":file")

输出结果:
[C#] 纯文本查看 复制代码
[ <input type="file" /> ]


附件

html代码如下:
[HTML] 纯文本查看 复制代码
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>






1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
 楼主| 发表于 2018-3-20 21:55:03 | 显示全部楼层
:input   是匹配所有的 页面表单元素   而其他的 表单元素选择器,匹配的则比较具体
发表于 2018-3-21 08:00:44 | 显示全部楼层
好贴子
回复

使用道具 举报

 楼主| 发表于 2018-3-22 22:23:06 | 显示全部楼层
谢老大支持,努力ing
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-3-29 21:29

© 2014-2021

快速回复 返回顶部 返回列表