jQuery内容选择器与表单选择器实例分析


Posted in jQuery onJune 28, 2019

本文实例讲述了jQuery内容选择器与表单选择器。分享给大家供大家参考,具体如下:

内容选择器

jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上,主要包括以下四种过滤方法:
内容选择器4种用法

  • 内容选择器
    • 选取含有文本内容为“text”的元素
    • 格式:E:contains(text)
  • 包含元素选择器
    • 选取含有选择器所匹配的元素的元素
    • 格式: E:has(selector)
  • 空内容选择器
    • 选取不含任何子元素或文本的空元素
    • 格式: E:empty
  • 非空内容选择器
    • 选取含有子元素或者文本的元素标签
    • 格式:E :parent

表单元素选择器

表单元素是指用于获取指定表单元素的选择器,表单元素选择器用于简化表单的操作.

jQuery内容选择器与表单选择器实例分析

如操作:

  • 选择所有内容包含 “is”单词的段落
  • 找到所有拥有input标签的div对象
  • 标出所有的非空元素,即拥有子元素或文本的元素
  • 标出所有空元素,即没有子元素或文本的元素
  • 获取表单下所有输入框
  • 所有不可用输入项
  • 被选中的元素
<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.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 #jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
jQuery事件委托代码实践详解
Jun 21 #jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 #jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 #jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 #jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 #jQuery
You might like
多php服务器实现多session并发运行
2006/10/09 PHP
php mail to 配置详解
2014/01/16 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
JavaScript库 开发规则
2009/01/31 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
高三生物教学反思
2014/01/25 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
八年级作文之友谊
2019/12/02 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android