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 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
JS实现打字游戏
Dec 17 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
德生1994机评
2021/03/02 无线电
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
用JS实现选项卡
2020/03/23 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python 实现两个线程交替执行
2020/05/02 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
研究生导师评语
2014/12/31 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
如何用python绘制雷达图
2021/04/24 Python
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL