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 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
vant中的toast轻提示实现代码
Nov 04 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
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
Jquery Change与bind事件代码
2011/09/29 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
Python新手实现2048小游戏
2015/03/31 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
代理商会议邀请函
2014/01/27 职场文书
竞聘自述材料
2014/08/25 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
学习普通话的体会
2014/11/07 职场文书
自我工作评价范文
2015/03/06 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
我的收音机情缘
2022/04/05 无线电