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");

表达的意思不一样，前者表示包含的

$("a:first");

$("li:last-child");

  

    

      
Language
      
Type
      
Invented
    
  
  

    

      
Java
      
Static
      
1995
    
    

      
Ruby
      
Dynamic
      
1993
    
    

      
Smalltalk
      
Dynamic
      
1972
    
    

      
C++
      
Static
      
1983
    
  

有这么一段html代码，生成的格式即为

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

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

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

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

$("Hello World");

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