提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JQuery中几个类选择器的简单使用介绍

jQuery 使用 简单 介绍 几个 选择器
2023-06-13 09:14:47 时间
复制代码代码如下:

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="TestClassSelector.aspx.cs"Inherits="WebApplication1.TestClassSelector"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="Scripts/jquery-1.9.0.min.js"></script>
<styletype="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>
<formid="form1"runat="server">
<div>
<divclass="first_div">
Thisisthefirstdiv
</div>
<divclass="second_div">
Thisistheseconddiv
</div>
<divclass="first_div">
<spanclass="first_span">
Thisisthefirstspan
</span>
</div>
<spanclass="first_spaneric_sun_class">
Thisisthefirstspan+ericsunclass.
</span>
<br/>
<spanclass="eric_sun_class">
Thisistheericsunclass.
</span>
<br/>
<inputtype="button"value="Test"onclick="btn_Click();"/>
</div>
</form>
</body>
</html>
<scripttype="text/javascript">
functionbtn_Click(){
alert($(".first_div").text());
alert($(".first_div.first_span").text());
}
</script>

复制代码代码如下:

$(".first_div,.first_span")

将包含有.first_div或者.first_span"的对象都取到。这里取到4个对象。
此处的Html对应
复制代码代码如下:
<divclass="first_div">
Thisisthefirstdiv
</div>
<divclass="first_div">
<spanclass="first_span">
Thisisthefirstspan
</span>
</div>
<spanclass="first_spaneric_sun_class">
Thisisthefirstspan+ericsunclass.
</span>

复制代码代码如下:
$(".first_div.first_span")

将以.first_div为类的控件下的以.first_span为类的对象取到（类与类之间带有空格逐层取）。这里只取到1个。
对应的className="first_span"此处的Html对应
复制代码代码如下:
<divclass="first_div">
<spanclass="first_span">
Thisisthefirstspan
</span>
</div>

复制代码代码如下:
$(".first_span.eric_sun_class")

将包含有.first_span并且同时包含有.eric_sun_class类的对象取到（类与类之间没有空格类似于‘与"操作）。这里只取到1个。
对应的className="first_spaneric_sun_class"此处的Html对应
复制代码代码如下:
<spanclass="first_spaneric_sun_class">
Thisisthefirstspan+ericsunclass.
</span>

相关文章