您的位置：首页 > Web前端 > JQuery

JQuery选择

2015-12-09 21:42 676 查看

JQuery选择器顾名思义就是选择相应的选择DOM元素需要运行的操作，JQuery选择的力量在于它支持放在一起，也就是说，可以连续使用一个以上的选择来运行多个操作的声明。这确保简单的代码，更有效地利用代码。

1. 使用ID选择DOM元件

代码1

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#div1").addClass("class1");  // 使用ID选中DOM元素
});
</script>
<style type="text/css">
.class1
{
color:red;
}
</style>
</head>
<body>
<div id="div1">Welcome to JQuery!</div>
</body>
</html>

2. 使用类选择多个DOM元素

代码2

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$(".div_changecolor").addClass("class1"); // 使用类选择多个DOM元素
});
</script>
<style type="text/css">
.class1
{
color:red;
}
</style>
</head>
<body>
<div id="div1" class="div_changecolor">Welcome to JQuery!</div>
<div id="div2" class="div_changecolor">Welcome to JQuery!</div>
<div id="div3" >Welcome to JQuery!</div>
</body>
</html>

显示结果例如以下图，仅仅有含有class的div才会显示红色

3. 依据DOM元素类型选择元素

仅仅需改动代码2中的部分代码为以下的代码就可以

$("div").addClass("class1");

显示结果例如以下图，所有div元素的内容都显示红色

4. 依据层级选择元素

在div元素中包括有超链接a元素。默认的超链接元素是有下划线的，例如以下图

如今希望通过选择器定位到a元素然后将其下划线显示去掉

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#div3 a").addClass("class2");  // 选择的是DOM元素ID为div3以下的全部a标签
});
</script>
<style type="text/css">
.class1
{
color:red;
}

.class2
{
text-decoration:none;
}
</style>
</head>
<body>
<div id="div1" class="div_changecolor">Welcome to JQuery!</div>
<div id="div2" class="div_changecolor">Welcome to JQuery!</div>
<div id="div3" ><a href="#">Welcome to JQuery!</a></div>
</body>
</html>

经过这样处理后显示结果例如以下：

5. 依据位置选择DOM元素

常常会看到一些报表显示记录的时候奇偶行的底色是相间的，这样看起来让人非常舒服。通过选择器就能够做到

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("tr:odd").css("background-color","#bbffff");
$("td").addClass("class1");
 });
</script>
<style type="text/css">
        .class1
        {
            width:100px;text-align:center
        }
    </style>
 </head>
<body>
<table border="1">
<tr><td>大众</td><td>德国</td></tr>
<tr><td>别克</td><td>美国</td></tr>
<tr><td>红旗</td><td>中国</td></tr>
<tr><td>现代</td><td>韩国</td></tr>
</table>
</body>
</html>

显示效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航