<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery内容选择器</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> div{ width: 90px; height: 90px; margin-top:20px; background: gray; } </style> <script> //1、$(selector:contains(text)) 查找contains表示包含某一文本的选择器 //2、$(selector:has(selector)) 查找contains表示包含某一元素的选择器 //2、$(selector:empty) 查找contains表示不含有任何内容的选择器 注意包含空元素的匹配不到 //2、$(selector:parent) 查找contains表示包含子元素或文本的选择器 $(document).ready(function(){ $('div:contains("jion")').css("background","red"); $('div:has(b)').css("background",'yellow'); $('div:empty').css("background","blue"); $('div:empty').css("background","blue"); $('div:parent').css("background","pink"); }) </script> </head> <body> <div>jack</div> <div>jun</div> <div>jack cheng</div> <div>jion</div> <div><b>jion</b></div> <div></div> </body> </html>
点击 "运行实例" 按钮查看在线实例