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直接编辑当前cookie的脚本
Sep 14 Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
js中this的用法实例分析
Jan 10 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
深入了解JavaScript 私有化
May 30 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
浅析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
模拟xcopy的函数
2006/10/09 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
Python变量作用范围实例分析
2015/07/07 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Python实现数值积分方式
2019/11/20 Python
python构建指数平滑预测模型示例
2019/11/21 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
教师个人鉴定材料
2014/02/08 职场文书
住宅质量保证书
2014/04/29 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript