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监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 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 array的学习笔记
2012/05/10 PHP
Chrome Web App开发小结
2014/09/04 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
javascript中Object使用详解
2015/01/26 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
简单介绍Python中的RSS处理
2015/04/13 Python
python绘制条形图方法代码详解
2017/12/19 Python
Python列表list操作相关知识小结
2020/01/29 Python
Python tkinter和exe打包的方法
2020/02/05 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
生物学学生自我评价
2014/01/17 职场文书
小学新教师培训方案
2014/02/03 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
大学生应聘求职信
2014/05/26 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
特种设备安全管理制度
2015/08/06 职场文书
开学第一天的感想
2015/08/10 职场文书
合同补充协议书
2016/03/24 职场文书