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实现unicode和字符的互相转换
Jul 18 Javascript
慎用 somefunction.prototype 分析
Jun 02 Javascript
前台js调用后台方法示例
Dec 02 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 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
对Session和Cookie的区分与解释
2007/03/16 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP代码优化的53个细节
2014/03/03 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python中实现字符串翻转的方法
2018/07/11 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
C语言面试题
2015/10/30 面试题
生物制药专业自我鉴定
2014/02/19 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
地理科学专业自荐信
2014/09/01 职场文书
幽灵公主观后感
2015/06/09 职场文书
公司借款担保书
2015/09/22 职场文书