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 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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
Smarty安装配置方法
2008/04/10 PHP
php daodb插入、更新与删除数据
2009/03/19 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
javascript每日必学之封装
2016/02/23 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
python实现图片批量压缩程序
2018/07/23 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
使用python实现简单五子棋游戏
2019/06/18 Python
基于pandas中expand的作用详解
2019/12/17 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
大学老师推荐信
2014/02/25 职场文书
捐助倡议书范文
2014/04/15 职场文书
志愿者事迹材料
2014/12/26 职场文书
护林员个人总结
2015/03/04 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
交通事故协议书范本
2016/03/19 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
如何利用python实现列表嵌套字典取值
2022/06/10 Python
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技