jQuery第三章

最新推荐文章于 2024-11-08 16:09:18 发布

岳职软件22-01-40

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量409

点赞数 8

文章标签： javascript

本文链接：https://blog.csdn.net/2301_79613063/article/details/134915226

版权

一.使用jquery操作DOM
dom : 文档对象模型就是HTML元素

js中如何操作DOM节点
document.write("<p>我是p标签</p>");
缺点:无法在指定的位置生成元素

$() 函数的2个用法:
用法1:放入一个字符串(选择器)表示获取元素例如$("p") $("#abc") $(".del")
用法2:放入一个函数，表示文档就绪函数例如 $(function(){代码...})

用法3:如下所示

jquery创建节点的方法如下：
1.创建节点语法如下:
$("xxxxx"); xxx表示你要创建的dom元素例如 $("<p>我是p标签<p>");

此时仅仅是创建了节点.理解为是孤儿节点. 需要将其插入到某个节点中.
例如放入body标签中方法div标签中等等.

插入方法1:append() 表示插入到指定元素内部的尾端.
语法: $("aa").append("bb") 表示将bb插入到aa内部的尾端

需求如下:
在div的尾端插入一个值为555的p标签

1.创建一个值为555的p标签
let a = $("<p>555<p>");
//调用方法即可
$("div").append(a);

插入方法2:prepend() 表示插入到指定元素内部的首端.
语法: $("aa").prepend("bb") 表示将bb插入到aa内部的首端

需求如下:
在div的首端插入一个值为000的p标签
//1.创建一个值为000的p标签
let a = $("<p>000<p>");
//调用方法即可
$("div").prepend(a);

插入方法3:after() 表示插入到指定元素的后面. 兄弟关系
语法: $("aa").after("bb") 表示将bb插入到aa的后面

需求如下:
在111的后面插入一个1.5 1.5 1.5
1.创建一个值为000的p标签
let a = $("<p>1.5 1.5 1.5<p>");
调用方法即可
$("p:eq(0)").after(a);

插入方法4:before() 表示插入到指定元素的前面. 兄弟关系
语法: $("aa").before("bb") 表示将bb插入到aa的前面

需求如下:
在333的前面插入一个2.5 2.5 2.5
1.创建一个值为2.5 2.5 2.5的p标签
let a = $("<p>2.5 2.5 2.5<p>");
调用方法即可
$("p:eq(2)").before(a);

上述的方法可以实现在任意位置创建新的节点.

下述的方法可以实现删除任意位置的节点:

方法1: remove()
语法如下: $("xx").remove(); 将xx元素彻底删除不仅删除了值而且删除了标签

需求如下: 将444的p标签删除

$("p:eq(3)").remove();

方法2: empty() 清空
语法如下: $("xx").empty(); 将xx元素删除值但是不删除标签

需求如下: 将444的p标签删除

$("p:eq(3)").empty();

克隆节点
语法: $("xxx").clone(); 将xxx元素复制一份
注意事项:上一步仅仅只是复制此时理解为孤儿节点. 任然需要通过append prepend after before进行粘贴

例如:将111复制一份到444的后面

let a = $("p:eq(0)").clone();
$("p:eq(3)").after(a);

二.无聊小案例1
!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <button>按钮</button>


       <script src="js/jquery.js"></script>
       <script>
           //需求如下:点击按钮,实现按钮的复制.1-2-4-8-16-32-64
           $("button").click(function(){
               // alert(123);
               let a = $("button:eq(0)").clone(true);

               $("button").after(a);
           });

           //备注:clone仅仅是复制了样式如果想要复制功能只需要在clone()加上一个true

       </script>
   </body>
</html>