编程 Javascript

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程序设计有所帮助。

jQuery后代选择器用法实例

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript使用中为什么10..toString()正常而10.toString()出错呢

Jan 11 Javascript

JS将秒换成时分秒实现代码

Sep 03 Javascript

JavaScript 语言基础知识点总结（思维导图）

Nov 10 Javascript

浏览器缩放检测的js代码

Sep 28 Javascript

jQuery中noconflict函数的实现原理分解

Feb 03 Javascript

在JavaScript的正则表达式中使用exec()方法

Jun 16 Javascript

javascript中substring()、substr()、slice()的区别

Aug 30 Javascript

angular和BootStrap3实现购物车功能

Jan 25 Javascript

从零学习node.js之详解异步控制工具async（八）

Feb 27 Javascript

JS设计模式之惰性模式（二）

Sep 29 Javascript

vue中格式化时间过滤器代码实例

Apr 17 Javascript

学习 Vue.js 遇到的那些坑

Feb 02 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