jQuery再学习之二、jQuery选择器
前言
jQuery选择器非常非常强大而且灵活,要完全掌握它是需要狠下一番功夫的。当然,掌握了主要的部分后,其它的了解就好,因为一些比较偏的毕竟用得少,而且可以有其它方法来实现。
选择器
1 基本选择器
1.1 #id选择器,通过元素的id来查找对象,
例:$("#txtTime")
查找id为txtTime的元素
1.2 html标签选择器,通过html标签来查找对象,例:
$("div")
查找标签为div的所有元素
1.3 .css类选择器,通过元素使用的css类名来查找对象,例:
$(".title")
查找css类名为title的元素
1.4 *,选取所有元素,例:$("*")
1.5 xx,xx,xx多选择器,多个选择器一起使用(逗号分隔),例:
$("div,#txtname")
查找所有的div元素和id为txtName的元素
2 层级关系选择器
2.1 在所有子孙元素中匹配(使用空格),例:
$("body div")
查找body元素下的所有子孙节点中的div元素
2.2 在所有子元素中匹配(使用>号),例:
$("body>div");
查找body元素下所有儿子节点中的div元素
3 简单条件选择器
3.1 :not(…) :非选择器,祛除匹配的元素,例:
$("div:not(.txtRed)");
查找所有的div元素,并排除css类名为txtRed的div元素
3.2 :eq(index) :匹配一个给定索引值的元素,例:
$("div:eq(1)");
查找所有div元素,并只取查找到的元素数组的索引号为1的div元素
3.3 :gt(index) :匹配大于给定索引值的元素,例:
$("div:gt(1)");
查找所有div元素,并取查找到的元素数组的索引号大于1的div元素
3.4 :lt(index) :匹配小于给定索引值的元素,例:
$("div:lt(1)");
查找所有div元素,并取查找到的元素数组的索引号小于1的div元素
3.5 :contains(text) :匹配包含给定文本的元素,例:
$("div:contains('name')");
查找所有div元素,并取查找到的元素包含name文本的div元素
3.6 :hidden、:visible :匹配所有隐藏的、可见的元素,例:
$("div:hidden");
查找所有div元素,并取所有隐藏了的div元素
4 属性选择器
4.1 […] :匹配包含给定属性的元素,例:
$("div[id]")
查找包含id属性的div元素
4.2 [attribute(=/!=/^=/$=/*=)value] :匹配给定的属性值(等于、不等于、开头为、结束为、包含)给定的value值,例:
$("div[id='title']")
查找id等于title的div(注意:值应该用引号括起来,如’value’)
4.3 […][…][…] :多属性联合使用,例:
$("div[id='txt'][class='title']")
查找id为txt且class为title的div
$("input[type='checkbox'][checked='true']")
查找所有的被勾选了的复选框
5 查找选择器
5.1 $("...").children([…]) :获取所有匹配元素的儿子节点的匹配元素,例:
$("body").children().length
获取body元素的所有儿子节点元素
$("body").children("div").length
获取body元素的所有儿子节点元素中的div元素
5.2 $("...").closest("...") : 从元素本身开始,逐级向上查找匹配的元素,并返回最新查找到的元素,例:
$("#dd").closest("div").html()
查找id为dd的元素的最近的上级div元素
5.3 $("...").find("...") :查找元素下的匹配元素(所有子孙节点),例:
$("body").find("div").length
获取body节点下的所有div元素
5.4 $("...").parent() :获取元素的父亲节点元素,例:
$("#yy").parent().html()
获取id为yy的节点的父亲节点
5.5 $("...").parents("...") :获取元素的所有祖先节点或其中的匹配节点,例:
$("#yy").parents().length
获取id为yy的节点的所有祖先节点
$("#yy").parents("body").html()
获取id为yy的节点的祖先节点为body标签的元素
reference url : http://blog.csdn.net/soldierluo/article/details/5784292
转载于:https://blog.51cto.com/wanqiufeng/736707
jQuery再学习之二、jQuery选择器相关推荐
- Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]
1:属性.attr(name|pro|key,val|key,fn)与removeAttr(name) 1.1 .attr(name) 参数name为属性名称 <a id="my_hr ...
- jQuery框架学习第六天:jQuery中的Ajax应用
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...
- 【Qt】Qt再学习(二):Bars Example(Q3DBars)
1.简介 Bars example显示了如何使用Q3DBars制作3D条形图,以及如何结合使用小部件来调整几种可调节的质量.该示例显示了如何: 使用Q3DBars和一些小部件创建应用程序 使用QBar ...
- jQuery框架学习第二天:jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
- jQuery框架学习第一天:开始认识jQuery
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
- jQuery框架学习第十天:实战jQueryUI常用功能
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
- jQuery框架学习第八天:ASP.NET jQuery实施方案
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
- jQuery框架学习第七天:jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
最新文章
- EMC设计中电缆屏蔽使用方法
- thttpd+php 不加载php.ini 问题
- CopyOnWriteArrayList源码分析
- 103. Leetcode 213. 打家劫舍 II (动态规划-打家劫舍)
- Apache Shiro Architecture--官方文档
- 学会这几个Redis技巧,让你的程序快如闪电
- 刷了三遍面试题仍拿不到offer?如何掌握AI技术面正确刷题姿势?
- 洛谷3171 网络吞吐量(网络流)
- java把控件跑挂了_Java代码动态修改 ConstraintLayout 内控件布局的辅助类
- 50 Python - 装饰器 类定义装饰器
- 《web前端课堂》正式上线啦!
- java查询比对是否重复_java-对象的ArrayList,比较对象并查找重复项,...
- 软件正在吞噬整个世界?!
- 卷积神经网络VGG16这么简单,为什么没人能说清?
- 学生电脑哪个牌子好_香米哪个牌子好
- ggradar画雷达图
- 【应用】Android平台最佳健身
- 计算机专业电脑内存,电脑内存大小是否和速度有关?
- Java中三元运算符
- //数据结构:先序、中序、后序遍历二叉树。输入数据:abd##eg###c#f#h##