jQuery学习2 选择器的使用说明

2016-02-19 14:12 3 1 收藏

下面是个jQuery学习2 选择器的使用说明教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - Web开发 】

1.利用CSS的基本选择器:
a:匹配所有链接a元素。
#*:匹配id为*的元素
.*:匹配CSS类为*的元素
a#*id.*class:匹配id为*id,并拥有CSS类为*class的链接元素。
以上是CSS中的写法,在jQuery中用$("")包起来,如:jQuery("p a.Class")

利用子选择器、容器选择器和特性选择器,以下面的为例:
代码如下:
ul class="myList"
lia href=http://jquery.comjQuery supports/a
ul
  lia href="css1"CSS1/a/li
  lia href="css2"CSS2/a/li
  lia href="css3"CSS3/a/li
  liBasic XPath/li
/ul
/li
li
ul
liCustom selectors/li
liForm selectors/li
/ul
/li
/ul

如果要选择第一个列表li中的所有链接做操作就应利用子选择器:ul.myList li a 而不能像这样ul.myList li a 因为所有这些链接a都是列表li元素的后代节点.
子选择器:父节点与直接子节点以右尖括号()隔开。
特性选择器:将符合特定内容的元素包起来。比如选择包含以http://开头的href值的链接:a[href^=http://]
input[type=text]:匹配type特性为text的所有input元素
div[title=^my]:匹配title特性值以my开头的所有div元素。
通过位置选择
a:first:选择器匹配页面上的第一个a元素
p:odd,p:even 分别匹配奇数和偶数元素
其他就不一一举例了,如有需要可到相关网站查找。

来源:http://www.tulaoshi.com/n/20160219/1606410.html

延伸阅读
标签: Web开发
这个是网页版,直接用ctrl+F搜索,如果大家不是经常上网,可以用chm版的更方便些。 jQuery 1.3 API 参考手册 CHM 锋利的jquery 电子书 近期将会将一些jquery学习教程逐步发一些。参考了锋利的jquery一书。 $的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常...
标签: Web开发
但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究Jquery的源码,这个疑问也一直没有得到解决了, 今天,空闲之余,打开Jquery的源码看看,才明天它实现的原理,原来在加入jquery的js这个文件时,实际上是执行了一个函数,在这个函数里己经初始化了$和JQuery变量, 实现这个功能源码如下(代码已删减和更改,并不影响说明实现原理)...
标签: Web开发
DOM结构其实也是一种树形结构,jQuery提供的树形选择器可以用来选择DOM Tree里的节点。这些树形选择器的方法包括:children(), parent(), parents(), next(), prev(), siblings(). 选择某个元素的"孩子" - children() 代码如下: ul id="parent" li id="son1"第一列/li li id="son2"第二列/li li id="son3"第三列/li /ul $("#parent"...
标签: Web开发
jQuery选择器其实是一个有些地方比较费解的,如果没有经过多次实验的话,很难得出它的每个操作符到底是干什么的,很容易出错,经过我的多次测试,终于对一些比较难理解或容易出错的选择操作进行总结,既方便自己将来查询又方便初学者学习。如果哪里有不对的还望大家帮我指出来,这里是一个相互学习的地方。 1. 先说说通过位置选择的...
标签: Web开发
去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。 笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS 2...

经验教程

316

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部