jQuery后代选择器用法实例_jquery

本文实例讲述了jQuery后代选择器用法。分享给大家供大家参考。具体分析如下:

后代选择器匹配给定的祖先元素下用以匹配的所有后代元素。

点击选择器可以查阅参考手册中所有jQuery选择器。

代码实例如下:

复制代码 代码如下:

$(".mydiv span")

以上代码匹配类名mydiv元素包含的span元素。两个选择器之间要用空格分隔。
实例代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
div{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(".mydiv span").css("color","red");
  })
})
</script>
</head>
<body>
<div class="mydiv">
  <span></span>
</div>
<div class="anotherdiv">
  <span></span>
</div>
<button>点击查看效果</button>
</body>
</html>

该实例可实现将类名为mydiv的div下的span元素中的文本颜色设置为红色。

希望本文所述对大家的jQuery程序设计有所帮助。

时间: 2024-09-08 04:49:30

jQuery后代选择器用法实例_jquery的相关文章

jQuery元素选择器用法实例_jquery

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

jQuery分组选择器用法实例_jquery

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

jQuery过滤选择器用法示例_jquery

本文实例讲述了jQuery过滤选择器用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

jQuery属性选择器用法示例_jquery

本文实例讲述了jQuery属性选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/

jQuery过滤选择器用法分析_jquery

本文实例讲述了jQuery过滤选择器用法.分享给大家供大家参考.具体分析如下: 在实践中,可以在基本选择器的基础上添加过滤选择器来完成查询任务,根据具体情况,在过滤选择器中可以使用元素的索引值.内容.属性.子元素位置.表单 域属性以及可见性作为筛选条件 1. :first选择器 格式: 复制代码 代码如下: $("selector: first")用于对当前jQuery集合进行过滤并选择出第一个匹配元素 实例: 复制代码 代码如下: $("td:first").cs

jQuery中:not选择器用法实例_jquery

本文实例讲述了jQuery中not选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够移除元素集合中与给定选择器匹配的元素. 语法结构: 复制代码 代码如下: $(":not(selector)") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $("li:not(.second)").css("color","green") 以上代码是将li元素集合中,类名不为s

jQuery中复合属性选择器用法实例_jquery

本文实例讲述了jQuery中复合属性选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配同时满足多个属性条件的元素. 语法结构: 复制代码 代码如下: [selector1][selector2][selectorN] 参数列表: 参数 描述 selector1 属性选择器. selector2 另一个属性选择器,用以进一步缩小范围. selectorN 任意多个属性选择器,也是用来缩小范围. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html&g

jQuery中:first选择器用法实例_jquery

本文实例讲述了jQuery中first选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配指定元素集合中的第一个元素. 语法结构: 复制代码 代码如下: $(":first") 在使用中一般要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $("li:first").css("color","green") 以上代码能够将li元素集合中的第一个li元素中的字体颜色设置为绿色.如果不和

jQuery中:has选择器用法实例_jquery

本文实例讲述了jQuery中has选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配含有选择器所匹配的元素的元素. 语法结构: 复制代码 代码如下: $(":has(selector)") 关于此选择器的定义可能有点拗口,通俗的讲就是如果一个元素含有selector(选择器)所匹配的元素,那么此元素将被匹配.例如: 复制代码 代码如下: $("div:has(p)") 以上选择器将匹配含有p元素的div元素.此选择器一般也要和其他选择器配合使用,比如类选