jQuery选择器有很大一部分的写法和css选择器的写法非常相识,
我们先来看看css选择器的写法;这些对于你应该不是很陌生,呵呵。那么我们开始学习jQuery选择器。
一、简单的jQuery选择器
首先看看最简单的jQuery选择器,再次说明jQuery选择器获取的DOM元素返回的是一个数组,及时他只返回一个元素:
查看上一篇jQuery选择器入门【jQuery入门三】中的$(”div”):标签名,$(”#nickName”):ID属性,$(”.user”):样式名及例子,
- $(”div”):标签名,取得DOM文档中所有div标签的元素,返回的是一个元素集合,$(”.user”):样式名:
- $(”#nickName”):ID属性,取得DOM文档中ID为nickName的一个元素(ps:一个文档中ID是唯一的),返回的是一个元素;
- $(”.user”):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合;
这里再补充1个通配符,即*:
$(“*”):通配符,取得DOM文档中所有节点元素;例如:$(“*”).css(“color”,”#FF3300″);则整个文档的文字颜色都会显示红色。至于.css(“color”,”#FF3300″)给元素加上color:#FF3300的css样式,我们会在后面再给大家详细解释。
大家可以看看这个我们写的css选择器非常的相似,下面的例子也是一样,这样我们就非常容易理解jQuery选择器的含义了
二、jQuery的组合选择器:
$(“selector1,selector2,selectorN”):多元素组合选择器,将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。例如:$(“h1,div,li#nickName”),并查看一下代码:
jQuery简单的选择器
- $(“div”):标签名,取得DOM文档中所有div标签的元素,返回的是一个元素集合;
- $(“#nickName”):ID属性,取得DOM文档中ID为nickName的一个元素(ps:一个文档中ID是唯一的),返回的是一个元素;
- $(“.user”):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合;
- $(“.user”):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合;
三、JQuery的层级选择器:
$(“ancestor descendant”):在给定的祖先元素下匹配所有的后代元素,即子孙元素,例如:$(“div span.num”);
$(“parent > child”):在给定的父元素下匹配所有的子元素,例如:$(“div>span”);
$(“prev + next”):匹配所有紧接在 prev 元素后的 next 元素,即第一个跟屁虫的兄弟元素,例如:$(“p+span”);
$(“prev ~ siblings”):匹配 prev 元素之后的所有 siblings 元素,即一群跟屁虫的兄弟元素(当然也有可能是一个屁虫的兄弟元素,那就和$(“prev + next”)等价了),例如:$(“p~span”);
关于层级选择器的示例:
jQuery简单的选择器
我是
你叫什么名字呢?
我爱javascript森林;
以为森林里有我好好多的朋友;
欢迎你加入我们;
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂