jQuery学习系列笔记(二)-创新互联
上一篇属于对jQuery进行一个简单的概述,这篇我们重点学习一下jQuery选择器最强大的、使用最频繁的两个功能:
创新互联公司提供成都网站设计、成都网站制作、网页设计,成都品牌网站建设,广告投放等致力于企业网站建设与公司网站制作,10多年的网站开发和建站经验,助力企业信息化建设,成功案例突破成百上千,是您实现网站建设的好选择.(1)利用选择器选择DOM元素
(2)创建新的DOM元素
一、选择将被操作的元素
jQuery的元素选择方法是集大成的,包括通过元素ID,CSS类,标签名称以及页面元素的DOM层次结构进行选择。
大家可以根据选择器实验室(Selector Lab)这个页面结合这篇文章来学习,实际操作。
1、利用基本CSS选择器
下面举几个简单的例子给大家热热身
(1)选择器匹配所有链接元素
$("a");
(2)选择器匹配id为specialID的元素
$("#specialID");
(3)选择器匹配拥有CSS类specialClass的元素
$(".specialClass");
(4)选择匹配id为specialID、拥有CSS类specialClass的链接元素
$("a#specialID.specialClass");
(5)选择器匹配拥有CSS类specialClass、在
元素内声明的链接元素
$("p a.specialClass");
总的来说,jQuery就是支持CSS,包括完全兼容CSS3,反正在学jQuery之前,我对CSS是什么也完全不知道,现在了解的也仅仅是它是一个样式开发的东东。不过我想这也完全不影响我学习jQuery。
2、利用子选择器、容器选择器和特性选择器
下面见识一下稍微高级一点的玩法。这样一段html代码。
jQuery supports
CSS1 CSS2 CSS3 - Basic XPath
jQuery also supports
- Custom selectors
- Form selectors
如果我现在想选择第2行元素,那么选择器要怎么写?也许你会马上想到这样
$("ul.list li a");
当然,这么写我们是选择上了第2行的元素,但是我们也同时把4,5,6行的元素也选择上了。这并不是我们想要的,所以子选择器“>”登场。
$("ul.list > li > a");
这样就独一无二的选择出了第2行的元素。“>”是选择父节点的直接子节点。
同样,使用特性选择器也能达到我们想要的结果。因为第2行的元素有href特性,并且其值为字符串“http://”使其与众不同,所以利用这一特性便能准确的匹配出我们想要的。
$("a[href^=http://]");
“^”表示选择器匹配包含以http://开头的href值的所有链接。如果替换成“$”,则表示选择器匹配包含以http://结尾的所有链接。替换成“*”表示选择器匹配任何部位中包含http://字符串的所有链接。
接着是容器选择器,是指有时我们选择的元素包含在某个其他元素中。举个例子:想要找到所有包含链接的列表元素。可以这样写
$("li:has(a)");
这块提一下,这么写绝对与
$("li a");
表达的意思不一样,前者表示包含的
3、通过位置选择
有时候根据元素在页面上的位置或者与其他元素的关系去选择元素,会使问题变得更加简单。
比如:页面上的第一个元素,我们可以写成
$("a:first");
列表元素的最后一个子节点
$("li:last-child");
Language | Type | Invented |
---|---|---|
Java | Static | 1995 |
Ruby | Dynamic | 1993 |
Smalltalk | Dynamic | 1972 |
C++ | Static | 1983 |
有这么一段html代码,生成的格式即为
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章标题:jQuery学习系列笔记(二)-创新互联
文章起源:http://cdiso.cn/article/idddo.html