JQuery 中几个类选择器的简单使用介绍_Javascript教程-查字典教程网
JQuery 中几个类选择器的简单使用介绍
JQuery 中几个类选择器的简单使用介绍
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:.first_div{background-color:red;}.second_div{background-color...

复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestClassSelector.aspx.cs" Inherits="WebApplication1.TestClassSelector" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="Scripts/jquery-1.9.0.min.js"></script>

<style type="text/css">

.first_div {

background-color:red;

}

.second_div {

background-color:green;

}

.first_span {

width:500px;

height:100px;

}

.eric_sun_class {

font-family:Arial;

font-size:18px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<div>

This is the first div

</div>

<div>

This is the second div

</div>

<div>

<span>

This is the first span

</span>

</div>

<span>

This is the first span + eric sun class.

</span>

<br />

<span>

This is the eric sun class.

</span>

<br />

<input type="button" value="Test" />

</div>

</form>

</body>

</html>

<script type="text/javascript">

function btn_Click() {

alert($(".first_div").text());

alert($(".first_div.first_span").text());

}

</script>

复制代码 代码如下:

$(".first_div, .first_span")

将包含有.first_div 或者 .first_span" 的对象都取到。 这里取到 4 个 对象。

此处的Html对应

复制代码 代码如下:

<div>

This is the first div

</div>

<div>

<span>

This is the first span

</span>

</div>

<span>

This is the first span + eric sun class.

</span>

复制代码 代码如下:

$(".first_div .first_span")

将以 .first_div 为类的控件 下的 以 .first_span 为类 的对象取到(类与类之间带有空格 逐层取)。 这里只取到 1 个。

对应的 className="first_span" 此处的Html对应

复制代码 代码如下:

<div>

<span>

This is the first span

</span>

</div>

复制代码 代码如下:

$(".first_span.eric_sun_class")

将包含有.first_span 并且同时包含有 .eric_sun_class 类的 对象取到(类与类之间没有空格 类似于 ‘与' 操作)。 这里只取到1个。

对应的 className="first_span eric_sun_class" 此处的Html 对应

复制代码 代码如下:

<span>

This is the first span + eric sun class.

</span>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类