jQuery方法总结

1.dom节点创建与属性处理

            $("html结构");
            $("<div class='create'>动态创建div元素节点</div>");

2.dom节点的插入

           //dom内部插入
            $(".div1").append();//向每个匹配的元素内部追加内容
            $(".div2").prepend();//向每个匹配的元素内部前置内容
            $("<span>加的内容</span>").appendTo();//把所有匹配的元素追加到另一个指定元素的集合中
            $("<span>加的内容</span>").prependTo();//把所有匹配的元素前置到另一个指定元素的集合中
            //dom外部插入
            $(".div3").after($("<span>将要插入的内容</span>"));//在匹配元素的后面插入内容,作为兄弟节点
            $(".div4").before($("<span>将要插入的内容</span>"));//在匹配元素的前面插入内容
            $("<span>将要插入的内容</span>").insertAfter($("div5"));//在目标元素后面插入集合中每个匹配的元素
            $("<span>将要插入的内容</span>").insertBefore($("div6"));//在目标元素前面插入集合中每个匹配的元素

3.dom节点删除

            $(".div7").empty();//并不是删除节点,而是清空节点,清空元素中的所有后代节点,不能删除自己本身这个节点
            $(".div8").remove();//将元素自身删除,同时删除元素内部的一切。
            $(".div9").remove("选择器表达式参数");//选择性的删除指定的节点以及节点内部的所有的子节点,包括事件和数据
            $(".div10").detach();//移除对象,仅仅是显示效果没有了。使用append,又重新回到文档流中,又显示出来

4.dom节点的复制和替换

           //dom拷贝clone
            $("#div1").click(function(){//执行操作})
            $("#div1").clone();//只是克隆了结构,事件丢失
            $("#div1").clone(true);//结构,数据和事件都克隆
           //dom替换方法
            $("#div2").replaceWith("newcontent");// 用提供的内容替换集合中所有匹配的元素并返回被删除的元素的集合(替换前的元素)
            $("newcontent").replaceAll("#div2");
           //dom包裹
            $("#div3").wrap("<div></div>");//给div3(只有一个div3)包裹一个父div  接受任何字符串或对象
            $("#div3").wrapAll("<div></div>");//给div3(集合)包裹一个父div
            $("#div3").wrap(function(){//一个回调函数,作用同上
                return "<div></div>";
            });
            $("#div4").unwrap();//删除父辈元素,保留自身
            $("#div5").wrapInner();//给集合中匹配的元素内部,增加包裹的HTML结构

5.遍历

            $("#div6").children();//匹配指定集合中每一个元素的第一子集元素,即仅儿子辈
            $("#div6").children(".selected");//选择性的接受同一类型选择器表达式
            $("#div7").find("li");// 遍历div7集合中每个元素的后代li(不包括自己),儿子辈祖孙辈都可以,参数是必须的
            $("#div7").find("*");//实现对所有后代元素的获取
            $("#div8").parent() ;// 查找集合中每一个元素的父元素,即父亲-儿子,只会向上查找一级
            $("#div9").parents();//查找所有祖辈元素,元素秩序是从里到外
            $("html").parent();//返回一个包含document的集合
            $("html").parents();//返回一个空集合
            $("#div10").closest("li");//往上查找所有的li,区别于parents
            // closest开始于当前元素,向上查找,直到找到一个匹配的就停止查找 ,返回的是0个或1个元素jQuery对象
            $("p").next();//查找指定元素p集合中每一个元素紧邻的后面同辈元素的元素集合
            $("p").prev();//查找指定元素p集合中每一个元素紧邻的前面同辈元素的元素集合
            $("p").siblings();//查找指定元素集合中每一个元素的同辈元素的元素集合
            $("li").add("p");//选择所有的li,之后把p元素也加到li的集合中。
            //  add()接受任何的$(),包括一个jQuery选择器表达式,dom元素,或HTML片段引用

注:下面是自己收藏的比较好的jQuery常用方法的总结,希望可以对我总结的另作一些补充

https://blog.csdn.net/yl2isoft/article/details/54427694






猜你喜欢

转载自blog.csdn.net/auroraone/article/details/80767673
今日推荐