• 使用Jquery操作DOM对象


    Dom操作分类

    DOMCore:任何一种支持DOM的编程语言都可以使用它,如getElementById()

    HTML-DOM:用于处理HTML文档,如document.forms

    CSS-DOM:用于操作CSS,如element.style.color="green"

    提示:JavaScript用于对(x)html文档进行操作,它对这三类DOM操作都提供了支持。

    jQuery中的DOM操作

    jQuery对JavaScript中的DOM操作进行了封装,使用起来也更简便。

    jQuery中的DOM操作可分为:样式操作、内容及Value属性值操作、节点操作、节点属性操作、节点遍历、CSS-DOM操作。

    直接设置样式值

    使用css()为指定的元素设置样式值

    css(name,value)设置单个属性

    例如:$(this).css("border","5px solid #f5f5f5");

    css()同时设置多个属性

    例如:$(this).css({"border":"5pxsolid #f5f5f5","opacity":"0.5"});

    追加和移出样式

    追加样式addClass(class)或addClass(class1class2 … classN)

    移除样式removeClass(“style2”)或removeClass("style1style2 ")

    切换样式

    toggleClass()模拟了addClass()与removeClass()实现样式切换的过程

    HTML代码操作

    html()可以对HTML代码进行操作,类似于JS中的innerHTML

    例如:$("div.left").html();或 $("div.left").html("

    ");

    文本操作

    text()可以获取或设置元素的文本内容

    例如:$("div.left").text();或 $("div.left").text("

    ");

    html()和text()的区别

    Value值操作

    val()可以获取或设置元素的value属性值

    例如:$(this).val();或 $(this).val("");

    节点操作jQuery中节点操作主要分为:

    查找节点创建节点插入节点删除节点替换节点复制节点

    创建节点元素

    工厂函数$()用于获取或创建节点

    $(selector):通过选择器获取节点

    $(element):把DOM节点转化成jQuery节点

    $(html):使用HTML字符串创建jQuery节点

    例如:var $newNode2=$(“千与千寻”);

    替换节点replaceWith()和replaceAll()用于替换某个节点

    例如:$("ul li:eq(1)").replaceWith($newNode1);或$newNode1.replaceAll("ul li:eq(1)");注意:两者的关系类似于append()和appendTo()。

    复制节点

    clone()用于复制某个节点:$("ul li:eq(1)").clone(true).appendTo("ul");

    可以使用clone()实现输出DOM元素本身的HTML:$("

    ").append($(DOM元素).clone()).html();

    删除节点

    jQuery提供了三种删除节点的方法:

    remove():删除整个节点

    detach():删除整个节点,保留元素的绑定事件、附加的数据

    empty():清空节点内容

    获取与设置节点属性

    attr()用来获取与设置元素属性

    例如:$newNode4.attr("alt");或$("img").attr();

    removeAttr()用来删除元素的属性

    例如:$newNode2.removeAttr("title");

    遍历子元素

    children()方法可以用来获取元素的所有子元素

    例如:$("body").children();

    注意:获取元素的子元素,但不包含子元素的子元素。

    遍历同辈元素

    jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

    遍历前辈元素

    jQuery中可以遍历前辈元素,方法如下:

    parent():获取元素的父级元素

    parents():元素元素的祖先元素

  • 相关阅读:
    HDU 2013(递归)
    紫书搜索 习题7-6 UVA
    紫书搜索 习题7-4 UVA
    紫书搜索 习题7-3 UVA
    紫书搜索 习题7-2 UVA
    紫书搜索 习题7-1 UVA
    紫书搜索 例题7-10 UVA
    紫书搜索 例题7-13 UVA
    紫书搜索 例题7-12 UVA
    紫书搜索 例题7-9 UVA
  • 原文地址:https://www.cnblogs.com/chuliuxiang/p/11052729.html
Copyright © 2020-2023  润新知