锋利jquery 第八天----Jquery 内容选择器

锋利jquery 内容选择器

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery 过滤选择器</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<style type="text/css">
div,span,p
{
width:140px; height:140px;
margin:5px;
background:#aaa;
    border: solid 1px #000;
    float:left;
    font-size:17px;
    font-family:Verdana;
}
div.mini
{
width:55px; height:55px;
    background-color:#aaa;
    font-size:12px;
}
div.hide
{
display:none
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
    //内容选择器
//选择元素含有文本di.的div
$("div:contains(di)").css("background","red");

：contains(text) 匹配包含给定文本的元素，text (String) : 一个用以查找的字符串返回值为：Array<Element>

实例：查找所有包含 "John" 的 div 元素

HTML代码：

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

$("div:contains(John)")

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

//改变不含文本元素或子元素的div 的背景色
$("div:empty").css("background","yellow");

:empty 匹配所有不包含子元素或者文本的空元素返回值：Array<Element>

查找所有不包含子元素或者文本的空元素

<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>

$("td:empty")

[ <td></td>, <td></td> ]

//改变含有选择器所匹配的div元素的背景色
$("div:has(p)").css("background","blue"); //选取还有p元素的DIV

:has(selector) 匹配含有选择器所匹配的元素的元素 selector (Selector) : 一个用于筛选的选择器 Array<Element>

实例：给所有包含 p 元素的 div 元素添加一个 text 类

<div><p>Hello</p></div>
<div>Hello again!</div>

$("div:has(p)").addClass("text")

[ <div class="test"><p>Hello</p></div> ]

//改变含有文本元素或者子元素的div
$("div:parent").css("background","green");
:parent 匹配含有子元素或者文本的元素 Array<Element>

查找所有含有子元素或者文本的 td 元素

<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>

$("td:parent")

[ <td>Value 1</td>, <td>Value 2</td> ]

});
</script>
</head>

<body>
<h3 align="center">过滤选择器</h3>

<div class="one" id="one">
    class等于one,id等于one
    <div class="mini">class等于mini</div>
</div>
<div class="one" id="two" title="test">
     class="one" id="two" title="test" 的DIV
     <div class="mini" title="ohter">class为mini,title="ohter"</div>
     <div class="mini" title="test">class为mini,title="test"</div>
</div>
<div class="one">
     <div class="mini">class等于mini</div>
     <div class="mini">class等于mini</div>
     <div class="mini">class等于mini</div>
     <div class="mini"></div>
</div>
<div class="mini">
      <div class="mini">class等于mini</div>
      <div class="mini">class等于mini</div>
      <div class="mini">class等于mini</div>
      <div class="mini" title="tesst">class等于mini,title="tesst"</div>
</div>
<div style="display:none" class="one">style="display:none" class="one"的div</div>
<div class="hide">class="hide"的div</div>
<div>包含input的type为"hidden"的div<input type="hidden" size="8" /></div>

<span id="mover">正在执行动画的span元素</span>
<div><p>含有p元素的div</p></div>

</body>
</html>

posted @ 2012-08-10 10:49 BlackAnts 阅读(150) 评论(0) 收藏举报

刷新页面返回顶部

BlackAnts

锋利jquery 第八天----Jquery 内容选择器

公告