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>
顯示結果：
沒有留言:
張貼留言