jquery选择器属性查询（13jQuery内容选择器）(1)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>13-jQuery内容选择器</title>

<script src="../static/js/jquery-3.6.0.js"></script>

<style type="text/css">

div{

width: 100px;

height: 50px;

background-color: red;

margin-top: 15px;

}

</style>

<script>

$(function(){

// :contains(Text)

// :empty

// :has(selector)

// :parent

// :empty 作用：找到既没有文本内容也没有元素的指定元素

jquery选择器属性查询（13jQuery内容选择器）(2)

// var $div = $("div:empty")

// console.log($div)

jquery选择器属性查询（13jQuery内容选择器）(3)

// :parent 作用：找到有文本内容或有子元素的指定元素

var $div = $("div:parent")

console.log($div)

jquery选择器属性查询（13jQuery内容选择器）(4)

// :contains(Text) 作用：找到包含指定文本内容的指定元素

var $div = $("div:contains('我是div')")

console.log($div)

jquery选择器属性查询（13jQuery内容选择器）(5)

// :has(selector) 作用：找到包含指定子元素的指定元素

var $div = $("div:has('p')")

console.log($div)

jquery选择器属性查询（13jQuery内容选择器）(6)

})

</script>

</head>

<body>

<div ></div>

<div >我是div</div>

<div >我是div</div>

<div ><span>我是span</span></div>

<div ><p>我是p标签</p></div>

</body>

</html>

,