jQ:has()、is() 电玩女神 2023-06-30 02:40 11阅读 0赞 ### has(): ### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>温故而知新</title> <style></style> </head> <body> <ul> <li>1 <ul> <li>11</li> <li>12</li> <li>13</li> </ul> </li> <li>2</li> <li>3 <ul> <li>31</li> <li>32</li> <li>33</li> </ul> </li> </ul> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- <script src="./myjQuery.js"></script> --> <script> /* 现在你想选择第一层ul>li下面带有ul的内容(包含li) */ $("ul li") .has("ul") .css({ backgroundColor: "#ff0000" }) </script> </html> -------------------- ### is(): ### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>温故而知新</title> <style></style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li class="test">7 <span class="test">span7-1</span> <span class="test">span7-2</span> <strong class="test">strong7-1</strong> </li> </ul> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- <script src="./myjQuery.js"></script> --> <script> /* 判断当前匹配的ul>.test元素集合中的元素是否含有span标签， 返回值为Boolean值 */ const flag = $("ul") .find(".test") .is("span") console.log("flag:" + flag) </script> </html> **现在你想点击ul弹出ul里面的文本内容，** ** 点击li弹出li里面对应的内容；** ** 这个时候就可以把is方法使用上了；** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>温故而知新</title> <style></style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li class="test">7</li> </ul> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- <script src="./myjQuery.js"></script> --> <script> /* 现在你想点击ul弹出ul里面的文本内容， 点击li弹出li里面对应的内容； 这个时候就可以把is方法使用上了； */ $("ul") .click(function (e) { if ($(e.target).is("li")) {//e.target代表目标原对象 alert($(e.target).text()) } else { alert($(this).text()) } }) //添加背景颜色来更好的点击，来体现上面的效果。 $("ul") .css({ backgroundColor: "#ff0000" }) .find("li") .css({ backgroundColor: "#0000ff" }) </script> </html>
还没有评论，来说两句吧...