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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
vue实现购物车的监听
Apr 20 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命令行脚本单进程运行的方法
2014/04/15 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python微信公众号开发平台
2018/01/25 Python
python框架中flask知识点总结
2018/08/17 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
.NET remoting中对象激活的两种方式
2015/06/08 面试题
医药代表个人求职信范本
2013/12/19 职场文书
满月酒主持词
2014/03/27 职场文书
总经理岗位职责范本
2015/04/01 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书