jQuery  Selector 之内容類 --
:contains(text)
:empty
:has(selector)
:parent


1、
:contains(text)
匹配包含給定文本的元素
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery  Selector 之内容類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:contains(text)  匹配包含給定文本的元素
//查找所有包含 "John" 的 div 元素
var str=' ';//此變數顯示訊息用的
$("div:contains('John')").text(
function(n,value) {
str+= ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
</body>
</html>



顯示結果：




2、
:empty
匹配所有不包含子元素或者文本的空元素
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery  Selector 之内容類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:empty 匹配所有不包含子元素或者文本的空元素
//查找所有不包含子元素或者文本的空元素
var str=' ';//此變數顯示訊息用的
$("td:empty").html(
function(n,value) {
str+= ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<table>
 <tr><td>Value 1</td><td></td></tr>
 <tr><td>Value 2</td><td></td></tr>
</table>
</body>
</html>


顯示結果：




3、
:has(selector)
匹配含有選擇器所匹配的元素的元素
程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery  Selector 之内容類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:has(selector) 匹配含有選擇器所匹配的元素的元素
//查所有div包含 p 元素
var str=' ';//此變數顯示訊息用的
$("div:has(p)").html(
function(n,value) {
str+= ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<div><p>Hello</p></div>
<div>Hello again!</div>
</body>
</html>

顯示結果：




4、
:parent
匹配含有子元素或者文本的元素

程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery  Selector 之内容類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:parent 匹配含有子元素或者文本的元素
//查找所有含有子元素或者文本的 td 元素
var str=' ';//此變數顯示訊息用的
$("td:parent").html(
function(n,value) {
str+= ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<table>
 <tr><td>Value 1</td><td></td></tr>
 <tr><td>Value 2</td><td></td></tr>
</table>
</body>
</html>


顯示結果：








arrow
arrow
    文章標籤
    jquery 測試 程式 匹配 用法 selector 元素 body
    全站熱搜

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄