jQuery学习系列笔记(二)-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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代码,生成的格式即为

    jQuery 学习系列笔记(二)

    根据这个表格再介绍几个位置选择的语法。

    (1)选择匹配Language这列

    $("table td:first-child");

    或者

    $("table td:nth-child(1)");

    要说明的是:nth-child()里的索引是从1开始记数的。

    jQuery 学习系列笔记(二)

    (2)选择匹配第三行,第三列的元素,“1972”

    $("table td:eq(5)");

    要注意的是这里的:eq()里的索引是从我们熟悉的0开始的。

    jQuery 学习系列笔记(二)

    (3)选择匹配第三行,第三列之前的所有元素

    $("table td:lt(5)")

    jQuery 学习系列笔记(二)

    4、利用自定义jQuery选择器

    有些时候我们只依赖于CSS规范没法达到我们目的,所以jQuery为我们提供了自定义选择器,这样选择器真的就变的越发的强大了。

    具体的自定义jQuery选择器有哪些,大家可以到网上查一下,我只介绍一个, :not筛选器

    筛选选择器:通过对元素应用更高的选择标准,缩小正在匹配的元素的集合。比如“input:not(:checkbox)”选择非复选框的元素。筛选选择器一般都是以冒号(:)或者左方括号([)开头。除筛选选择器外,其他任何选择器都不能在:not()筛选器里使用。

    查找选择器:查找与已选择元素具有某种关系的其他元素。比如 “li a ”已选择元素li 包含关系的元素a。另外,后代选择器、子节点选择器、兄弟节点选择器均属于这一范畴。

    关于这两个定义我也有点没太理解好,大家可以在使用中多多体会。

    二、生成新HTML

    本来这篇不想再写这个标题的, 边学边写总觉得有点累,但是当我学习完这部分的内容之后,又有点热血沸腾了,所以想给大家表一下。

    上篇我们其实也写了一个演示了一个比较简单的例子,新建一个段落元素

    $("Hello World");

    下面的代码大家注意了,很好玩。

    $("
    I am iron man!
    I am Tony Stark") .filter(".iron").click(function(){ alert("I'm Iron Man!"); }).end().appendTo("#Avengers");

    解释一下,开始创建了两个

    元素,一个带有类iron,一个没有,.filter选择出带有类iron的
    ,并给它绑定鼠标点击事件,一点击这个
    就会出现对话框“I’m Iron Man!”,再用.end还原到两个