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>元素内声明的链接元素

$("p a.specialClass");

总的来说，jQuery就是支持CSS，包括完全兼容CSS3，反正在学jQuery之前，我对CSS是什么也完全不知道，现在了解的也仅仅是它是一个样式开发的东东。不过我想这也完全不影响我学习jQuery。

2、利用子选择器、容器选择器和特性选择器

下面见识一下稍微高级一点的玩法。这样一段html代码。

<ulclass="list">
  <li><ahref="http://jquery.com">jQuery supports</a>
    <ul>
      <li><ahref="css1">CSS1</a></li>
      <li><ahref="css2">CSS2</a></li>
      <li><ahref="css3">CSS3</a></li>
      <li>Basic XPath</li>
    </ul>
  </li>
  <li>jQuery also supports
    <ul>
      <li>Custom selectors</li>
      <li>Form selectors</li>
    </ul>
  </li>
</ul>

如果我现在想选择第2行<a>元素，那么选择器要怎么写？也许你会马上想到这样

$("ul.list li a");

当然，这么写我们是选择上了第2行的<a>元素，但是我们也同时把4，5，6行的<a>元素也选择上了。这并不是我们想要的，所以子选择器“>”登场。

$("ul.list > li > a");

这样就独一无二的选择出了第2行的<a>元素。“>”是选择父节点的直接子节点。

同样，使用特性选择器也能达到我们想要的结果。因为第2行的<a>元素有href特性，并且其值为字符串“http://”使其与众不同，所以利用这一特性便能准确的匹配出我们想要的。

$("a[href^=http://]");

“^”表示选择器匹配包含以http://开头的href值的所有链接。如果替换成“$”，则表示选择器匹配包含以http://结尾的所有链接。替换成“*”表示选择器匹配任何部位中包含http://字符串的所有链接。

接着是容器选择器，是指有时我们选择的元素包含在某个其他元素中。举个例子：想要找到所有包含链接的列表元素。可以这样写

$("li:has(a)");

这块提一下，这么写绝对与

$("li a");

表达的意思不一样，前者表示包含<a>的<li>元素，后者表示在<li>中的<a>元素。指的目标元素不同。

3、通过位置选择

有时候根据元素在页面上的位置或者与其他元素的关系去选择元素，会使问题变得更加简单。

比如：页面上的第一个<a>元素，我们可以写成

$("a:first");

列表元素的最后一个子节点

$("li:last-child");

<table id="languages" border="0" cellspacing="1">
  <thead>
    <tr>
      <th>Language</th>
      <th>Type</th>
      <th>Invented</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Java</td>
      <td>Static</td>
      <td>1995</td>
    </tr>
    <tr>
      <td>Ruby</td>
      <td>Dynamic</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>Smalltalk</td>
      <td>Dynamic</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>C++</td>
      <td>Static</td>
      <td>1983</td>
    </tr>
  </tbody>
</table>

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

名称栏目：jQuery学习系列笔记（二）-创新互联
URL网址：https://www.cdcxhl.com/article10/idddo.html

成都网站建设公司_创新互联，为您提供服务器托管、网站建设、营销型网站建设、网页设计公司、建站公司、面包屑导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容