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访问XML数据的实例
Dec 27 Javascript
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 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
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php返回json数据函数实例
2014/10/09 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
jQuery链使用指南
2015/01/20 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
通过实例解析python描述符原理作用
2020/01/22 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
AOP的定义以及作用
2013/09/08 面试题
毕业生找工作推荐信
2013/11/21 职场文书
五好关工委申报材料
2014/05/31 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
法律服务所工作总结
2015/08/10 职场文书
800字作文之大雪
2019/12/04 职场文书
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript