诡欧心孪匣玩隙迸铺戊窃想然
古诗结构:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .bg-wheat {background-color: wheat;} .bg-green {background-color: lightgreen;} .bg-pink {background-color:pink;} </style> </head> <body> <h2>春晓</h2><span></span> <p>春眠不觉晓,处处闻啼鸟。</p> <p>夜来风雨声,花落知多少?</p> </body> </html>
执行:
1.选择包含指定文本内容的元素
将【春】的背景色变为小麦色
js:
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> $('p:contains("春")').addClass('bg-wheat') </script>
将【风】的背景色变为绿色
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> $('p:contains("风")').addClass('bg-green') </script>
执行:
2.选择内容为空的标签,空是指没有子标签,甚至连文本内容都不能有
给span标签添加文本信息
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> $(':empty').text('孟浩然') </script>
执行:
修改html代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .bg-wheat {background-color: wheat;} .bg-green {background-color: lightgreen;} .bg-pink {background-color:pink;} </style> </head> <body> <h2>春晓</h2><span></span> <p>春眠不觉晓,处处闻啼鸟。</p> <p>夜来风雨声,花落知多少?</p> <p>我的女神是:<img src="../images/zly.jpg"width="150"></p> <p>我想对颖宝宝说:<input type="text" /><button>提交</button></p> </body> </html> <script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> </script>
执行:
3.选择有img标签(图片)的p元素,给它加个背景
将带有img子标签的p标签背景变为粉红:
js代码:
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> $('p:has("img")').addClass('bg-pink') </script>
执行:
4.选择所有以p为父元素的节点,添加绿背景
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> $('p:parent').addClass('bg-green') </script>
执行:
5.取反过滤器not,选择页面中所有内容不为空的元素,前景色变更为红色
因为当前文档中所有元素都不为空 所有都会被选中
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> $(':empty').text('孟浩然') $(':not(:empty)').css('color','red') </script>
执行:
脯委考闹娟划诗龟惩岁腻跨舜