JQuery基础教程:选择元素(上)

2019/7/22 19:41:39 人评论 次浏览 分类:学习教程

原文链接:http://www.cnblogs.com/SamFlynn/p/4313808.html

   jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素、子元素,等等。通过一个简单的例子,可以帮助我们理解文档各元素构成的树形结构:

<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
</div>
</body>
</html>

   这里,<html>是其他所有元素的祖先元素,换句话说,其他所有元素都是<html>的后代元素。<head>和<body>元素是<html>的子元素(但并不是它唯一的子元素)。因此除了作为<head>和<body>的祖先元素之外,<html>也是它们的父元素。 而<p>元素则是<div>的子元素(也是后代元素),是<body>和<html>的后代元素,是其他<p>元素的同辈元素

 

使用$()函数

    通过jQuery的各种选择符和方法取得的结果集合会被包装在jQuery对象中,可以轻松地为jQuery对象绑定事件、添加漂亮的效果,也可以将多重修改或效果通过jQuery对象连缀到一起。为了创建jQuery对象,就要使用$()函数。这个函数接受CSS选择符作为参数,充当一个工厂,返回包含页面中对应元素的jQuery对象。所有能在样式表中使用的选择符都可以传给这个函数,随后我们就可以对匹配的元素集合应用jQuery方法。

   有三种基本的选择符(当然还有其他的),标签名ID。这些选择符可以单独使用,也可以与其他选择符组合使用。在将方法连缀到$()工厂函数后面时,包装在jQuery对象中的元素会被自动、隐式地循环遍历。换句话说,这样就避免了使用for循环之类的显式迭代(这种迭代在DOM脚本编程中非常常见)

   下面我们来看一个例子

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .horizontal {
            float: left;
            list-style: none;
            margin: 10px;
        }

        .sub-level {
            background: #ccc;
        } 
    </style>

    <script src="Scripts/jquery-1.8.2.js"></script>
    <script src="Scripts/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            $('#selected-plays > li').addClass('horizontal');
            $('#selected-plays li:not(.horizontal)').addClass('sub-level');
        });

    </script>
   
</head>
<body>
  
    <ul id="selected-plays">
        <li>
            Comedies
            <ul>
                <li><a href="/asyoulikeit/">As You Like It</a></li>
                <li>All's Well That Ends Well</li>
                <li>A Midsummer Night's Dream</li>
                <li>Twelfth Night</li>
            </ul>
        </li>
        <li>
            Tragedies
            <ul>
                <li><a href="hamlet.pdf">Hamlet</a></li>
                <li>Macbeth</li>
                <li>Romeo and Juliet</li>
            </ul>
        </li>
        <li>
            Histories
            <ul>
                <li>
                    Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
                    <ul>
                        <li>Part I</li>
                        <li>Part II</li>
                    </ul>
                <li>
                    <a href="http://www.shakespeare.co.uk/henryv.htm">
                        Henry V
                    </a>
                </li>
                <li>Richard II</li>
            </ul>
        </li>
    </ul>
</body>
</html>
View Code

假设我们想让顶级的项(Comedies、Tragedies和Histories),而且只有顶级的项水平排列,那么可以先在样式表中定义一个horizontal类:这个horizontal类会将元素浮动到它后面元素的左侧,如果这个元素是一个列表项,那么会移除其项目符号,最后再为该元素的每一边各添加10像素的外边距。这里,我们没有直接在HTML中添加horizontal类,而只是将它动态地添加给位于顶级的列表项Comedies、Tragedies和Histories,以便示范jQuery中选择符的用法

$('#selected-plays > li').addClass('horizontal');使用子元素组合符(>)将horizontal类只添加到位于顶级的项中。实际上,位于$()函数中的选择符的含义是,查找ID为selected-plays的元素(#selected-plays)的子元素(>)中所有的列表项(li),API文档如下:

要为其他项(非顶级的项)添加样式,有很多种方式。因为已经为顶级项添加了horizontal类,所以取得全部非顶级项的一种方式,就是使用否定式伪类选择符来识别没有horizontal类的所有列表项。$('#selected-plays li:not(.horizontal)').addClass('sub-level'); 对应的API文档如下:

 属性选择符

属性选择符通过HTML元素的属性选择元素,例如链接的title属性或图像的alt属性。例如,要选择带有alt属性的所有图像元素,可以使用以下代码:$('img[alt]')

 

  属性选择符使用一种从正则表达式中借鉴来的通配符语法,以^表示值在字符串的开始,以$表示值在字符串的结尾。而且,也是用星号*表示要匹配的值可以出现在字符串中的任意位置,用叹号!表示对值取反。详细API可以看这里

  继续针对上面的例子,我们来学习属性选择符的用法。假设我们想以不同的文本颜色来显示不同类型的链接,那么首先要在样式表中定义如下样式:

a {
color: #00c;
}
a.mailto {
background: url(images/email.png) no-repeat right top;
padding-right: 18px;
}
a.pdflink {
background: url(images/pdf.png) no-repeat right top;
padding-right: 18px;
}
a.henrylink {
background-color: #fff;
padding: 2px;
border: 1px solid #000;
}

 

然后,可以使用jQuery为符合条件的链接添加3个类:mailto、pdflink和henrylink。要为所有电子邮件链接添加类,需要构造一个选择符,用来寻找所有带href属性([href])且以mailto开头(^="mailto:"])的锚元素(a),因为我们在页面的样式表中定义了相应的规则,所以页面中所有mailto:链接的后面都会出现一个信封图标

$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
});

要为所有指向PDF文件的链接添加类,需要使用美元符号($)而不是脱字符号(^)。这是因为我们要选择所有href属性以.pdf结尾的链接,因为有已经定义的样式表规则,新添加的pdflink类也会导致每个PDF文档链接后面出现Adobe Acrobat图标

$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
});

属性选择符也可以组合使用。例如,可以为href属性即以http开头且任意位置包含henry的所有链接添加一个henrylink类

$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="henry"]')
.addClass('henrylink');
});
});

 

转载于:https://www.cnblogs.com/SamFlynn/p/4313808.html

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->