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 相关文章推荐
lib.utf.js
Aug 21 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 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中与数组相关的函数
2007/03/22 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
PHP中的事务使用实例
2015/05/26 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
Python中apply函数的用法实例教程
2014/07/31 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
python3 kubernetes api的使用示例
2021/01/12 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
实习期自我鉴定
2013/10/11 职场文书
个人校本研修方案
2014/05/26 职场文书
责任书格式范文
2014/07/28 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
小学英语教学反思范文
2016/02/15 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
我收到了德劲DE1107
2022/04/05 无线电