经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery内容选择器与表单选择器实例分析
来源:jb51  时间:2019/6/28 12:39:11  对本文有异议

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

内容选择器

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

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

表单元素选择器

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

如操作:

  • 选择所有内容包含 “is”单词的段落
  • 找到所有拥有input标签的div对象
  • 标出所有的非空元素,即拥有子元素或文本的元素
  • 标出所有空元素,即没有子元素或文本的元素
  • 获取表单下所有输入框
  • 所有不可用输入项
  • 被选中的元素
  1. <script>
  2. $(function(){
  3. //利用:contains获取包含指定内容的组件,筛选文本内容中包含is单词的组件
  4. //$("p:contains(special)").css("border" , "1px solid red");
  5. //获取拥有名为input后代节点的标签
  6. //$("div:has(input)").css("border" , "1px solid red");
  7. //利用层叠选择器与has()选择器最大的不同时,层叠选择器选中的是input组件,而上面的has则选中的是拥有input组件的div组件
  8. //$("div input").css("border" , "1px solid red");
  9. //利用:parent选择器获取所有非空元素
  10. //$("*:parent").css("border" , "1px solid red");
  11. //利用:empty 来获取所有空元素
  12. //$("*:empty").css("border" , "1px solid red");
  13. //利用:input获取表单所有元素,:之前什么都不写默认就是*查询所有
  14. //$(":input").css("border" , "1px solid red");
  15. //$(":input").css("width" , "200px");
  16. //$("input,select,button").css("border" , "1px solid red");
  17. //获取所有按钮
  18. //$(":button , :submit , :reset").css("border" , "1px solid red");
  19. //利用:disabled获取不可用的表单元素
  20. //$(":disabled").css("border" , "1px solid red");
  21. //下面这句话与之等价
  22. //$("*[disabled='disabled']").css("border" , "1px solid red");
  23. //获取被选中的单选框或复选框
  24. //$(":checked").css("width" , "100px");
  25. $("*[checked='checked']").css("border" , "1px solid red");
  26. })
  27. </script>
  28.  

更多关于jQuery相关内容感兴趣的读者可查看jb51专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号