jQuery后代选择器用法实例


Posted in Javascript onDecember 23, 2014

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

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

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

代码实例如下:

$(".mydiv span")

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<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程序设计有所帮助。

Javascript 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
JS清除选择内容的方法
Jan 29 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 #Javascript
javascript实现微信分享
Dec 23 #Javascript
JSON取值前判断
Dec 23 #Javascript
jQuery基础语法实例入门
Dec 23 #Javascript
jQuery回调函数的定义及用法实例
Dec 23 #Javascript
jQuery中odd选择器的定义和用法
Dec 23 #Javascript
浅析javascript 定时器
Dec 23 #Javascript
You might like
PHP动态图像的创建
2006/10/09 PHP
php的正则处理函数总结分析
2008/06/20 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
python实现得到一个给定类的虚函数
2014/09/28 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
Python csv文件记录流程代码解析
2020/07/16 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
《问银河》教学反思
2014/02/19 职场文书
产品推广策划方案
2014/05/10 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
小平小道观后感
2015/06/09 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server
Pillow图像处理库安装及使用
2022/04/12 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS