jQueryDOM操作

Posted 2020-08-15

1.添加节点，效率上不相上下，使用firefox，jQuery要快于javascript
        1>JavaScript
            $(    function()
                {
                    var t1 = new Date();
                    var body = document.getElementsByTagName("body")[0];
                    for(var i =0; i < 5000 ;i++)
                    {
                        var span = document.createElement("span");
                        span.setAttribute("class","red");
                        body.appendChild(span);    
                    }
                    var t2 = new Date();
                    $("#result").html("添加5000个span用时:" + (t2-t1));
                }
            )
        2>jQuery
            $(    function()
                {
                    var t1 = new Date();
                    for (var i = 0;i<5000;i++)
                    {
                        var $span = $("<span/>");
                        $span.attr("class","red");
                        $("body").append($span);    
                        /*
                            注：在效率上使用
                            $("body").append("<span class=‘red‘ />");
                            要快,大约2到3倍
                        */
                    }
                    var t2 = new Date();
                    $("#result").html("添加5000个span用时:" + (t2-t1));
                }
            )
            
    2.添加文本节点
        var $h1 = $("<h1>标题，这个是</h1>");
        $("body").add($h1);
    
    3.添加属性
        $span.attr("class","red");
        或
        var $span = $("<span class=‘red‘/>");
        
    4.添加元素
        1>append    在末尾追加。添加后成为最后一个
        2>appendTo
        3>prepend    在开始追加。添加后成为第一个
        4>prependTo
        
        5>after            在每个匹配元素后插入。如　：$("div").after("<p>一段文本</p>");
        6>before        ..............前....
        7>insertAfter    如：$("<p>一段文本</p>").insertAfter("div");
        8>insertBefore
        
    5.删除元素
        1>remove()　如：$("p").remove();
        2>empty()
        
    6.复制元素
        1>clone() 如；var $div = $("div").clone();若使用clone(true)则同时会复制目标元素的事件
        
    7.元素替换
        1>replaceWith() 如：$("p").replaceWith("<div>替换</div>");
        2>replaceAll()
        
    8.包裹(加壳)元素
        1>A.wrap(B)        用元素Ｂ包裹元素Ａ。如：$("p").wrap("<span class=‘wrap‘ />");在p元素外加一层span，这里每一个p都会有一个span
        2>wrapAll()        用元素Ｂ包裹全部元素Ａ。如：$("p").wrapAll("<span class=‘wrap‘ />");则在新增元素span下有(连续)若干原有的p元素
        3>wrapInner()     元素B将包裹在每个元素Ａ里。与1>刚好相反。
        
    9.属性操作
        1>attr()    
            <1>设置属性        如：$("img").attr( { src:"1.jpg" , alt:"测试图像");  $("p").attr("title","文本");
            <2>获取属性        如：$("p").attr("title"); 若没有此属性则返回 undefined.
            <3>删除属性    removeAttr()    如：$("p").removeAttr("title");    
            
    10.类样式
        1>追加样式 addClass()。        如：$("p").addClass("style1");
        2>删除样式 removeClass()。　如：$("p").removeClass("style1");
        3>切换样式 toggleClass(styleName ,[选项])。如果第二个参数不存在，如果目标元素中的样式不存在，则追加，如果存在，则删除样式。如：$("p").toggleClass("hidden",n++ % 3== 0);//每三次切换一次样式
        4>样式判断 hasClass()。　    如 $("p").hasClass("style1"); 返回true或false
        
    11.操作Html、文本与值
        1>读写Html，html()。此方法是对Dom的innerHtml的封装
        如：var $html = $("p").html();
            $("p").html($html);
        2>读写文本，text()。用法同上。
        3>读写表单值，val()。用法同上。
        示例：
            <form>
                <select id="s1">
                    <option value="1" selected="selected">单选1</option>
                    <option value="2" >单选2</option>
                </select>
                <select id="s2" multiple="multiple">
                    <option value="1" selected="selected">单选1</option>
                    <option value="2" >单选2</option>
                    <option value="3" >单选3</option>
                </select>
                <input type="checkbox" value="6">复选框</input>
                <input type="radio" value="8">单选框</input>
            </form>
            
            $("#s1").val("单选2"); 
            $("s2").val(["多选2","多选3"]); 
            $("input").val(["6","8"]);
            
    12.读写样式,css() 第169页
        
    13.偏移位置
        1>绝对偏移位置 offset()方法返回元素在当前窗口的相对位置。返回值为一个对象，包含top与left属性。仅对可见元素有效。
        2>相对偏移位置 position()方法。用法同上。
        注：
            相对偏移位置是元素相对于距离最近的父级定位元素左上角的距离。
            <1>定位元素，就是被定义了　相对(),绝对(),固定()定位的元素，即设置了CSS的position为absolute,fixed或relative。
            <2>最近的父级定位元素是指元素的父级的position被定义为<1>中的值。若父级中没有定义position的三个属性值，那么父级要再向上追溯，直到body
            
    14.元素的高和宽
        1>width()
        2>height()
        3>innerHeight()    //返回元素的内部高
        4>innerWidth()    //..............宽
        
        5>outerHeight() //返回元素的总高
        6>outerWidth()    //............宽
        
    15.元素遍历
        1>children()    //子元素。如：$("body").children().eq(2).children()[0];
        2>next()        //相邻的下一个(同级)
        3>prev()        //......上.........
        4>parent()        //父元素