jQuery子属性过滤选择器用法分析
本文实例讲述了jQuery子属性过滤选择器用法。分享给大家供大家参考。具体分析如下：
1. :first-child选择器
$("selector:first-child")
$("ul:first-child").css("text-decoration", "underline").css("color", "blue");
2. :last-child选择器
用于选择其父级的最后一个子元素的所有元素，格式:
代码如下:
$("selector:last-child")
$("ul:last-child").css("text-decoration", "underline").css("color", "red");
3. :nth-child选择器
用于选择父元素下的第N个子元素或奇偶元素。
$("selector:nth-child(index/even/odd/equation)");
$("ul li:nth-child(4)").css("color", "red");//将ul元素下的第5个元素的文本颜色设置为红色，即该li元素的索引值为4
4. :only-chilid选择器
用于选择某元素的惟一选择器
$("selector:only-chilid")
简单示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子元素过滤选择器</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table tr:first-child").css("background", "#FCF");
$("table tr:last-child").css("background", "yellow");
$("tr td:nth-child(even)").css("border", "1px solid red");
$("div h3:only-child").css("color", "#999");
});
</script>
</head>
<body>
<div align="center">子元素过滤器应用实例</div>
<table width="462" height="152" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
效果图如下所示：
希望本文所述对大家的jQuery程序设计有所帮助。
相关推荐
-
JQuery中属性过滤选择器用法实例分析
本文实例讲述了JQuery中属性过滤选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
-
jquery可见性过滤选择器使用示例
复制代码 代码如下: <script src="Jquery1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { //$('span:hidden').addClass('class1').show(); $(':hidden')
-
jQuery子元素过滤选择器用法示例
本文实例讲述了jQuery子元素过滤选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="te
-
jQuery过滤选择器详解
过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以":"开头 按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器. 基本过滤选择器 基本过滤选择器示例 改变第一个 div元素的背景色为 # bbffaa 改变最后一个 div元素的背景色为 # bbffaa 改变class不为 one的所有 div元素的背景色为 # bbffaa 改变索引值为偶数的 div元素的背景色为 # bbffaa
-
举例讲解jQuery中可见性过滤选择器的使用
可见性过滤器 可见性过滤器根据元素的可见性和不可见性来选择相应的元素. 过滤器名 jQuery 语法 说明 返回 :hidden $(':hidden') 选取所有不可见元素 集合元素 :visible $(':visible') 选取所有可见元素 集合元素 $('p:hidden).size(); //元素p 隐藏的元素 $('p:visible').size(); //元素p 显示的元素 注意::hidden 过滤器一般是包含的内容为:CSS 样式为display:none.inpu
-
jquery表单对象属性过滤选择器实例分析
本文实例讲述了jquery表单对象属性过滤选择器用法.分享给大家供大家参考.具体分析如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &
-
jQuery过滤选择器用法分析
本文实例讲述了jQuery过滤选择器用法.分享给大家供大家参考.具体分析如下: 在实践中,可以在基本选择器的基础上添加过滤选择器来完成查询任务,根据具体情况,在过滤选择器中可以使用元素的索引值.内容.属性.子元素位置.表单 域属性以及可见性作为筛选条件 1. :first选择器 格式: 复制代码 代码如下: $("selector: first") 用于对当前jQuery集合进行过滤并选择出第一个匹配元素 实例: 复制代码 代码如下: $("td:first").c
-
JQuery中基础过滤选择器用法实例分析
本文实例讲述了JQuery中基础过滤选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
-
简单讲解jQuery中的子元素过滤选择器
子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素. $('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素 $('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素 $('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素 $('li:nth-child(odd)').css(
-
jQuery过滤选择器经典应用
本文实例为大家分享了经典的jQuery过滤选择器应用,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤选择器</title> <style type="text/css"> #txt_show {display:none; color:#00C
-
jQuery可见性过滤选择器用法示例
本文实例讲述了jQuery可见性过滤选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- 引入jQuery --> <script src="js/jquery-1.10.1.mi
-
jQuery内容过滤选择器用法示例
本文实例讲述了jQuery内容过滤选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex
-
jQuery内容过滤选择器用法分析
本文实例讲述了jQuery内容过滤选择器用法.分享给大家供大家参考.具体分析如下: 在HTML文档中,元素的内容可以是文本或者子元素,如果将某个选择器或者内容过滤选择器一起使用,就可以从查询到的元素中进一步筛选出具有给定 文本或者子元素的元素 1. :contains()选择器 用于选择包含给定文本的所有元素,格式: 复制代码 代码如下: $("selector1:contains(text)") 如: 复制代码 代码如下: $("p:contains('text')&quo