jquery中的dom操作

    xiaoxiao2021-03-25  94

    1.插入节点的方法

    abc.append(d):向每个匹配的元素内部添加内容。   

    d.appendTo(abc):将所有匹配的元素添加到另一个元素里。跟上面相反

    abc.prepend(d):向每个匹配元素内部前置内容。

    d.prependTo(abc):跟上面相反。

    abc.after(d):在每个匹配元素之后插入

    d.insertAfter(abc):跟上面相反

    abc.before(d):在每个匹配元素之前插入

    d.insertBefore(abc):跟上面相反

    2.删除节点的方法

    $("ul li").remove():删除一个节点,会把这个节点里面的所有元素删除。

    $("ul li").remove("li[title=='xxx']")可以指定删除的元素

    detach():删除一个节点,会把这个节点里面的所有元素删除。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

    empty():会清空节点内部的所有内容。

    3.查找节点

    $("ul li:eq(1)").text() $("ul li:eq(1)").attr("title")

    4.复制节点

    $("#id").clone() $("#id").clone(true)//为true复制的同时,复制绑定事件

    5.替换节点

    abc.replaceWith(d)把匹配的元素替换成括号里的内容

    d.replaceAll(abc)跟上面相反

    6.包裹节点

    wrap()用括号里的元素把匹配的内容包裹起来,所有匹配结果一一包裹

    $("div").wrap("<html></html>")wrapAll():只包裹一次,把所有匹配的元素都包裹进来。如果有其他元素,就把其他元素放到包裹元素之后

    wrapInner():匹配元素的子内容包裹起来。一一包裹

    7.属性操作

    7.1设置属性和获取属性

    $("#name").attr("title");//获取属性 $("#name").attr("title","hello");//设置单个属性 $("#name").attr({"title":"hello","class":"name"})//设置多个属性

    7.2删除属性

    removeAttr("title")

    8.样式操作

    8.1获取样式和设置样式

    attr("class")

    attr("class","hi") 8.2追加样式

    addClass("hi")//在原有class里增加了hi

    8.3移除样式

    removeClass("hi")

    removeClass()//移除class属性

    8.4切换样式

    toggle()让元素在隐藏和显示之间转换,如果之前是显示的就隐藏,反之显示

    toggleClass():添加或移除属性,如果原来没有就添加,有就删除

    $("xxx").toggleClass("hi")

    8.5判断是否含有样式

    hasClass()

    $("p").hasClass("a")==$("p").is(".a")

    9设置和获取html、文本、和值

    9.1html()

    和innerHtml()相似,获取一个元素内部html,也可以设置

    $("p").html() $("p").html("hello")

    9.2text()

    和innerText()类似,获取文本内容,也可以设置

    9.3val()

    用来设置和获取value属性。

    focus():获取焦点的事件

    blur():失去焦点的事件

    this.defaultValue()属性获取的是当前元素的默认值

    10遍历节点

    children()获取匹配元素的子元素集合

    next():获取相连的下一个同辈元素

    prev():获取相连的前一个同辈元素

    siblings():获取前后所有同辈元素

    closest():从当前元素开始找,然后父元素,然后父元素的父元素,一直找,找到最先匹配的返回,没有就返回空对象

    parent():找当前元素的父元素

    parents():遍历找当前元素的所有父元素,就是parent()后再parent()一直parent()

    find():获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。

    filter():将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。

    11css操作

    $(xxx).css("color","red") $(xxx).css({"color":"red","font-size":"16px"})

    css("height");

    $().height(100)//默认px

    $().height()

    width()

    offset():返回元素在当前视窗的相对位移,包含top和left

    var a = $().offset(); a.left a.top position():获取元素相对于最近一个position样式设置为relative和absolute的祖父节点的相对位移。返回left和top

    scrollTop():获取滚动条距离顶端的距离,可以设置

    scrollLeft():获取滚动条距离左侧的距离,可以设置

    转载请注明原文地址: https://ju.6miu.com/read-20448.html

    最新回复(0)