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 布尔型分析
Dec 22 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
react的hooks的用法详解
Oct 12 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中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
window.open不被拦截的实现代码
2012/08/22 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
Node.js模块加载详解
2014/08/16 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
python读写二进制文件的方法
2015/05/09 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python实现图片转字符画的示例
2017/08/22 Python
python实现图片批量压缩程序
2018/07/23 Python
python找出完数的方法
2018/11/12 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
软件测试常见笔试题
2012/02/04 面试题
幼儿园亲子活动通知
2015/04/24 职场文书
喋血孤城观后感
2015/06/08 职场文书
小平小道观后感
2015/06/09 职场文书
小王子读书笔记
2015/06/29 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS