Jquery-使用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);