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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jquery实现简单拖拽效果
Jul 20 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缓存函数的使用说明
2013/05/10 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
python3个性签名设计实现代码
2018/06/19 Python
Linux下多个Python版本安装教程
2018/08/15 Python
详解python之heapq模块及排序操作
2019/04/04 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python自动发微信监控报警
2019/09/06 Python
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
介绍信样本
2015/01/31 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫