python学习_day60_前端基础之jQuery入门3
Posted 骑猪走秀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python学习_day60_前端基础之jQuery入门3相关的知识，希望对你有一定的参考价值。
一、文档操作
（一）插入儿子元素
1、添加到指定元素内部的后面
$(A).append(B)：B作为A的最后一个儿子元素；$(A).appendTo(B)：A作为B最后一个儿子元素。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：
<body> <ul> <li>111</li> <li class="c1">222</li> <li>333</li> </ul> <script src="jquery-3.2.1.min.js"></script> <script> $(".c1").append("<p>ppp</p>"); //加到.c1里面最后 $(".c1").append($("<p>ppp</p>")); $("<p>ddd</p>").appendTo("ul"); //加到ul里面最后 $("<p>ddd</p>").appendTo($("ul")) </script> </body>
2、添加指定元素内部的前面
$(A).prepend(B)：B作为A的第一个儿子元素；$(A).prependTo(B)：A作为B第一个儿子元素。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：
<body> <ul> <li>111</li> <li class="c1">222</li> <li>333</li> </ul> <script src="jquery-3.2.1.min.js"></script> <script> $(".c1").prepend("<p>ppp</p>"); //加到.c1里面最前面 $(".c1").prepend($("<p>ppp</p>")); $("<p>ddd</p>").prependTo("ul"); //加到ul里面最前面 $("<p>ddd</p>").prependTo($("ul")) </script> </body>
（二）插入兄弟元素
1、添加到指定元素外部的后面
$(A).after(B)：B作为兄弟元素紧挨A元素后面；$(A).insertAfter(B)：A作为兄弟元素紧挨B元素后面。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：
<body> <ul> <li>111</li> <li class="c1">222</li> <li>333</li> </ul> <script src="jquery-3.2.1.min.js"></script> <script> $(".c1").after("<p>ppp</p>"); //<p>作为兄弟元素紧挨.c1后面 $(".c1").after($("<p>ppp</p>")); $("<p>ddd</p>").insertAfter("ul"); //<p>作为兄弟元素紧挨ul后面 $("<p>ddd</p>").insertAfter($("ul")) </script> </body>
2、添加到指定元素外部的前面
$(A).before(B)：B作为兄弟元素紧挨A元素前面；$(A).insertBefore(B)：A作为兄弟元素紧挨B元素前面。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：
<body> <ul> <li>111</li> <li class="c1">222</li> <li>333</li> </ul> <script src="jquery-3.2.1.min.js"></script> <script> $(".c1").before("<p>ppp1</p>"); //p作为兄弟元素紧挨.c1元素前面 $(".c1").before($("<p>ppp2</p>")); $("<p>ddd1</p>").insertBefore("ul"); //p作为兄弟元素紧挨ul元素前面 $("<p>ddd2</p>").insertBefore($("ul")) </script> </body>
（三）移除和清空元素
remove（）：从DOM中删除所有匹配的元素；empty()：删除匹配的元素集合中所有的子节点。
<body> <ul> <li class="c1">111</li> <li class="c1">222</li> <li>333</li> </ul> <script src="jquery-3.2.1.min.js"></script> <script> $(".c1").remove(); //将所有的.c1元素删除 $("ul").empty() //将ul下的所有子节点清空 </script> </body>
（四）替换
$(A).replaceWith(B)：A被B替换；$(A).replaceAll(B)：A替换所有的B，应用实例：
<body> <ul> <li class="c1">111</li> <li class="c1">222</li> <li>333</li> </ul> <script src="jquery-3.2.1.min.js"></script> <script> $(".c1").replaceWith("<p>hhh</p>"); //.c1被<p>hhh</p>替换 $("<p>hhh</p>").replaceAll("li") //<p>hhh</p>替换所有的li标签 </script> </body>
（五）克隆
clone()，具体应用实例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>稳重，我们能赢</p> <script src="jquery-3.2.1.min.js"></script> <script> $("p").on("click",function () { $(this).clone(true).insertAfter(this) //加上true表示连事件也会克隆，即点击复制后的标签内容也可以实现克隆事件 }) </script> </body> </html>
二、绑定事件
（一）事件绑定
常见的事件类型有：click(点击触发)、hover（悬浮触发）、focus（聚焦触发）、blur（非聚焦触发）、change（主要用于select标签，更改选中就会触发）、keyup（输入按键一弹起就会触发事件，如电商网站搜索框，用户每输入一个字符，都会帮你用户提示相关内容），绑定事件的语法如下：
jQuery对象.on(事件类型，function（）{})
（二）事件委托
以上是关于python学习_day60_前端基础之jQuery入门3的主要内容，如果未能解决你的问题，请参考以下文章