像写css选择器一样写jQuery选择器(一)【jQuery入门四】

jQuery选择器有很大一部分的写法和css选择器的写法非常相识,

我们先来看看css选择器的写法;这些对于你应该不是很陌生,呵呵。那么我们开始学习jQuery选择器。

一、简单的jQuery选择器

首先看看最简单的jQuery选择器,再次说明jQuery选择器获取的DOM元素返回的是一个数组,及时他只返回一个元素:

查看上一篇jQuery选择器入门【jQuery入门三】中的$(”div”):标签名,$(”#nickName”):ID属性,$(”.user”):样式名及例子,

  1. $(”div”):标签名,取得DOM文档中所有div标签的元素,返回的是一个元素集合,$(”.user”):样式名:
  2. $(”#nickName”):ID属性,取得DOM文档中ID为nickName的一个元素(ps:一个文档中ID是唯一的),返回的是一个元素;
  3. $(”.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”),并查看一下代码:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



jQuery简单的选择器


jQuery简单的选择器

大家可以去很多jQuery程序,绝大部分的函数都是从$()开始的,$()函数简化了javascript获取DOM元素的复杂性,消除了使用for循环获取一组DOM元素
  1. $(“div”):标签名,取得DOM文档中所有div标签的元素,返回的是一个元素集合;
  2. $(“#nickName”):ID属性,取得DOM文档中ID为nickName的一个元素(ps:一个文档中ID是唯一的),返回的是一个元素;
  3. $(“.user”):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合;
  4. $(“.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”);

关于层级选择器的示例:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



jQuery简单的选择器


jQuery简单的选择器

javascript森林群规有120个会员,其中管理员120个;
javascript森林群博客目前有30作者,10篇文章;

我是

你叫什么名字呢?
我爱javascript森林;
以为森林里有我好好多的朋友;
欢迎你加入我们;






赞(0) 打赏
未经允许不得转载:WEB前端开发 » 像写css选择器一样写jQuery选择器(一)【jQuery入门四】

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏