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 相关文章推荐
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
js实现产品缩略图效果
Mar 10 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 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实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
JS实现图片放大镜效果的方法
2015/02/27 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
轻松实现python搭建微信公众平台
2016/02/16 Python
python实现多线程网页下载器
2018/04/15 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
python 如何调用远程接口
2020/09/11 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
汉语专业应届生求职信
2013/10/01 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
参观监狱心得体会
2014/01/02 职场文书
网络技术专业推荐信
2014/02/20 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
商务宴会祝酒词
2015/08/11 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
html form表单基础入门案例讲解
2021/07/15 HTML / CSS