zoukankan      html  css  js  c++  java
  • Dom对象

    DOM对象指的是通过传统的javaScript方法获取的元素对象,如下代码:

    var DomObj1 = document.getElementById(“id1″);
    var DomObj2 = document.getElementsByName(“name2″); //IE下不支持
    var DomObj3 = document.getElementsByTagName(“div”);
    jQuery对象指的是通过jQuery语法包装原始的DOM对象后生成的新对象,如下代码:

    var $JQObj1 = $(“#id1″);
    var $JQObj2 = $(“[name=’name2′]”);
    var $JQObj3 = $(“div”);

    Query对象转成DOM对象:

    两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);

    (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。

    如:var $v =$("#v") ; //jQuery对象

    var v=$v[0]; //DOM对象

    alert(v.checked) //检测这个checkbox是否被选中

    (2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象

    如:var $v=$("#v"); //jQuery对象

    var v=$v.get(0); //DOM对象

    alert(v.checked) //检测这个checkbox是否被选中

    DOM对象转成jQuery对象:

    对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)

    如:var v=document.getElementById("v"); //DOM对象

    var $v=$(v); //jQuery对象

    转换后,就可以任意使用jQuery的方法了。

    首先需要知道,DOM操作分为3个方面:DOM Core、HTML-DOM、CSS-DOM。我们很多情况下用到的getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法都是DOM Core的组成部分。而document.forms(获取表单对象)、element.src(获取元素的src属性)是HTML-DOM中的方法,这是我以前没用过的。element.style.coler="red"这种对获取style各种属性的方法则属于CSS-DOM。

        Jquery中的DOM操作包括以下部分

        1、查找节点

          查找元素的节点:这是我们之前介绍过的选择器实现的功能。

          查找属性节点:当获取到元素的节点后,若是想要获取该元素的相关属性,可使用Jquery中的attr()方法,这个方法中需要的参数是想要查找的属性的名称,例如title。

        2、创建节点

        插入节点的方法有以下几种:

        例:<p> world </p>

        append():向匹配元素内部追加内容。$("p").append("<b> hello </b>"),结果是:<p> world <b> hello </b></p>。

        appendTo():将匹配元素追加到指定元素中。$("<b> hello </b>").appendTo("p"),结果是:<p> world <b> hello </b></p>。

        prepend():向每个匹配元素中前置内容。$("p").prepend("<b> hello </b>"),结果是:<p><b> hello </b> world </p>。

        propendTo():将匹配元素前置到指定元素中。$("<b> hello </b>").prepend("p"),结果是:<p><b> hello </b> world </p>。

        after():在每个匹配元素之后插入内容。$("p").after("<b> hello </b>"),结果是:<p> world <b> hello </b></p>。

        insertAfter():将匹配元素插入到指定元素的后面。$("<b> hello </b>").after("p"),结果是:<p> world <b> hello </b></p>。

        before():在每个匹配元素之前插入内容。$("p").before("<b> hello </b>"),结果是:<p><b> hello </b> world </p>。

        insertBefore():将匹配元素插入到指定元素的前面。$("<b> hello </b>").insertBefore("p"),结果是:<p><b> hello </b> world </p>。

        另插入的元素中可以包含文本和属性:$("p").append("<span title='hello'> hello </span>")。

        3、删除节点

        删除节点的方法有三种:remove()、detach()、empty()。

        remove():var delLi = $("ul li:eq(1)").remove()。删除ul下第二个li节点。使用remove()删除节点后,被删除的节点的子节点也会被删除,这个方法的返回值是指向被删除节点的引用,所以可以利用返回值再添加此节点。

        detach():此方法和remove()用法相同,它们的区别在于detach()删除节点后,再添加此节点,该节点原有的事件、绑定的数据都会保留下来。

        empty():$("ul li:eq(1)").empty(),这个方法严格来说不是一个删除的方法,它是清空节点的方法。它能清空选中节点的所有子节点。

        4、复制节点

        复制节点使用的方法是clone()。$("ul li").clone().appendTo("ul") 注:复制ul中所有li节点,并将复制的节点添加到ul中,这样,在ul中就有了两份原有的li节点了!

  • 相关阅读:
    Apache 虚拟主机 VirtualHost 配置
    ajax无线级刷新
    Apache中 RewriteRule 规则参数介绍
    用户注册
    用户登录
    Android 侧滑菜单
    PhontoShop CS6 视频
    ArcGis地图
    Android 汉子转换成拼音
    UTF-8 转 GBK
  • 原文地址:https://www.cnblogs.com/sixiangqimeng/p/4291004.html
Copyright © 2011-2022 走看看