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

代码如下:

<%@ 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 class="first_div">
This is the first div
</div>
<div class="second_div">
This is the second div
</div>
<div class="first_div">
<span class="first_span">
This is the first span
</span>
</div>
<span class="first_span eric_sun_class">
This is the first span + eric sun class.
</span>
<br />
<span class="eric_sun_class">
This is the eric sun class.
</span>
<br />
<input type="button" value="Test" onclick="btn_Click();" />
</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 class="first_div">
This is the first div
</div>
<div class="first_div">
<span class="first_span">
This is the first span
</span>
</div>
<span class="first_span eric_sun_class">
This is the first span + eric sun class.
</span>

代码如下:

$(".first_div .first_span")

将以 .first_div 为类的控件 下的 以 .first_span 为类 的对象取到（类与类之间带有空格 逐层取）。 这里只取到 1 个。
对应的 className="first_span" 此处的Html对应


代码如下:

<div class="first_div">
<span class="first_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 class="first_span eric_sun_class">
This is the first span + eric sun class.
</span>

赞 (0)

相关推荐

  • jQuery选择器全集详解

    jQuery选择器全集详解

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行 了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(fu

  • jQuery类选择器用法实例

    本文实例讲述了jQuery类选择器用法.分享给大家供大家参考.具体分析如下: 类选择的器匹配具有指定类名的所有元素. 例子: 复制代码 代码如下: $(".mydiv") 以上代码选取类名为mydiv的所有元素. 注意:在mydiv前面有一点(.). 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=

  • jQuery分组选择器用法实例

    本文实例讲述了jQuery分组选择器用法.分享给大家供大家参考.具体分析如下: 分组选择器将每一个选择器匹配到的元素合并后一起返回,能够对它们进行相同的操作. 实例代码: 复制代码 代码如下: $(".mydiv ,span") 以上代码能够匹配类名为mydiv的元素和所有的span元素.两个选择器之间要用逗号分割. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu

  • jQuery中odd选择器的定义和用法

    本文实例讲述了jQuery中odd选择器的定义和用法.分享给大家供大家参考.具体分析如下: 此选择器匹配索引值为奇数的元素,从0开始计数. 语法结构: 复制代码 代码如下: $(":odd") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $("li:odd)").css("color","green") 以上代码是将li元素集合中索引为奇数的li中的字体颜色设置为绿色. 如

  • jquery选择器需要注意的问题

    jquery选择器需要注意的问题

    我们先来看段代码,很简单,如下 复制代码 代码如下: <div id="div1">     <span>111</span>     <span>222</span>     <span>333</span>     <button id="button1">clear</button> </div> 复制代码 代码如下: $(function(

  • 原生的html元素选择器类似jquery选择器

    做前端,需要选择元素,虽说有jquery和各大js库已经帮我造好了轮子,但我想试试自己实现一个,正好项目也不忙,正好加入自己的js文件中,下面是实现代码.用$g("#content .op")这种格式就可以调用,和jquery $()的参数一样: function $findChilds(parentNode, text) { //如果不传入父节点的话,默认为body if(parentNode == undefined) parentNode = document.body; var

  • jQuery中even选择器的定义和用法

    本文实例讲述了jQuery中even选择器的定义和用法.分享给大家供大家参考.具体分析如下: 此选择器匹配所有索引值为偶数的元素,从0开始计数. 语法结构: 复制代码 代码如下: $(":even") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等. 例如: 复制代码 代码如下: $("li:even)").css("color","green") 以上代码是将li元素集合中索引为偶数的li中的字体颜色设置

  • jQuery元素选择器用法实例

    本文实例讲述了jQuery元素选择器用法.分享给大家供大家参考.具体分析如下: 元素选择器根据元素名称匹配所有的元素. 实例代码: 复制代码 代码如下: $("div") 以上代码匹配所有的div元素. 实例代码: 复制代码 代码如下: <!DOCTYPE html>   <html>   <head>   <meta charset=" utf-8">   <meta name="author&quo

  • 常见的jQuery选择器汇总

    基本元素选择器 复制代码 代码如下: $("p") $("p.ii")选取所有class=ii的 p元素 $("p#demo")选取id=demo的第一个p元素 分层选择器 复制代码 代码如下: $("div input")div 下的所有input $("div>input") 基本条件选择器 复制代码 代码如下: $("p:first") $("p:last"

  • jQuery 复合选择器应用的几个例子

    <!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js --> 一. 复合选择器对checkbox的相关操作 <input type="checkbox" id="ckb_1" /> <input type="checkbox" id="ckb_2" disabled="true" /> <input type="checkb

  • jQuery后代选择器用法实例

    本文实例讲述了jQuery后代选择器用法.分享给大家供大家参考.具体分析如下: 后代选择器匹配给定的祖先元素下用以匹配的所有后代元素. 点击选择器可以查阅参考手册中所有jQuery选择器. 代码实例如下: 复制代码 代码如下: $(".mydiv span") 以上代码匹配类名mydiv元素包含的span元素.两个选择器之间要用空格分隔. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta

随机推荐