zoukankan      html  css  js  c++  java
  • jQuery简单入门(二)

    2.Dom操作


    A.DOM分类

    个人认为在jQuery中这些分类被弱化了,有兴趣的读者可以自行补充这方面的知识;

      aa.DOM Core

      bb.HTML -DOM

      cc. CSS-DOM


    B.jQuery操作DOM

      aa.操作节点

        1.查找节点

          1.1.查找元素节点:

          $(“input”).val();//获取input元素的数值

          $(“form input:eq(1)”).val();//获取form元素的第2input子元素的数值

          1.2.查找属性节点:

          $(“input”).attr(“value”);//获取input元素的value属性的值

        2.创建节点

          2.1.创建元素节点:

          $(“form”).append(“<input type=”text” />”);//动态创建<input>元素节点并添加到<form>

          2.2.创建文本节点:

          $(“form”).append(“<h5>动态创建”<h5>”文本节点</h5>”);

          2.3.创建属性节点:

          $(“ul”).append(<li title=”属性节点”></li>);

        3.插入节点

        参考创建节点实例(注:jQuery提供多种插入节点方法如:append(), appendTo, after()...

        4.删除节点

          4.1.使用remove()    (:当某个节点被remove掉,那么他的子代节点也同时被remove)

          $(“ul li”).remove();//删除掉ul元素的所有li子元素

          4.2.使用detach()    (注:该方法删除的节点,如果再次添加会该节点,则删除之前所绑定的事件依旧生效)

          $(“ul li”).detach();

          4.3.使用empty()  (注:该方法是清空掉元素里的内容)

          $(“ul li”).empty();//清空ul元素的子元素li的内容,如:文本值

        5.复制节点(clone()

          5.1.$(“ul li”).clone().appendTo(“form”);//复制ul元素的子元素li并把他添加到form元素中

          5.2.$(“ul li”).clone(true).appendTo(“form”);//复制ul元素的子元素li并把他添加到form元素中,并且原本在被复制元素中具有的事件方法,在新元素中同样有效

        6.替换节点(replaceWith()replaceAll()

          6.1.$(“ul”).replaceWith(“<ol></ol>”);//把无序列表替换成有序列表

          6.2.$(“<ol></ol>”).replaceAll(<ul>);//把无序列表替换成有序列表

        7.包裹节点(wrap()wrapAll()wrapInner()

          7.1.$(“input”).wrap(“<li></li>”);//使用li元素把input元素包裹起来

          7.2.其他两个方法类似,这里不累赘

        8.遍历节点

          8.1.children()

          该方法用于获取匹配元素的子元素(而不是所有后代元素,后代元素获取请看第一篇文章)

          $(“html”).children();//获取<html>元素的子元素,即headbody

          8.2.next()

          该方法用于获取匹配元素后面紧邻的同辈元素

          $(“head”).next();//获取<head>元素后面紧邻的同辈元素(因为<head>的同辈元素有且只用一个元素,即<body>元素,所以这里获得的是<body>元素)

        8.3.prev()

        该方法用于获取匹配元素后面紧邻的同辈元素

        $(“body”).prev();

        8.4.siblings()

        该方法用于获取匹配元素的同辈元素

        $(“head”).siblings();

        8.5.parent()parents()

        parent()//获得父元素

        parents()//获得祖宗元素


    bb.操作属性(attr()removeAttr())

      1.获取属性和设置属性

      $(“input”).attr(“value”);//获取<input>元素的value属性值

      $(“input”).attr(“value”, “setiValue”);//获取<input>元素并设置其value属性为setiVlalue

      $(“input”).attr({“value” : “setiValue”, “name” : “setiName”});//获取<input>元素并分别设置其value属性为setiValuename属性为setiName

      2.删除属性

      $(“input”).removeAttr(“name”);


    cc.操作样式

    示例HTML

    <p class=”iClass” title=”样式操作”>样式操作</p>

      1.获取样式和设置样式

      同以上示例<p>元素中可以得知class是其属性,所以可以通过该属性来获取和设置样式(不明白的同学可以参考bb.操作属性

      2.追加样式(addClass()

      $(“p”).addClass(“addClass”);//<p>元素追加addClass样式

      3.移除样式(removeClass()

        3.1.移除指定样式:

        $(“p”).removeClass(“addClass”);//把刚刚向<p>元素追加的addClasss样式移除掉

        3.2.移除所有样式:

        $(“p”).removeClass();//移除<p>元素所有样式

      4.切换样式(toggleClass()

      切换样式就好比电闸的开关闸,当电闸开时,电路通路;当电闸关时,电路不通

      $(“p”).toggleClass(“addClass”);

      5.是否具有某一样式(hasClass())

      $(“p”).hasClass(“addClass”);


    dd.设置和获取HTML、文本和值

    示例HTML

    <p title=”设置和获取HTML代码”><strong>锋利的jQuery</strong></p>

      1.设置和获取HTML代码

      $(“p”).html();//获取<p>元素的html代码,这里得到的结果是:<strong>锋利的jQuery</strong>

      $(“p”).html(“<strong>锋利的jQuery</strong>”);//设置<p>元素的html<strong>锋利的jQuery</strong>

      2.设置或获取文本内容

      $(“p”).text();//获取<p>元素的文本内容,这里得到的结果是:锋利的jQuery

      $(“p”).text(“锋利的jQuery”);

      3.设置和获取元素的值

      示例HTML

      <input type=”text” value=”设置和获取元素的值” />

      $(“input”).val(“锋利的jQuery”);//这里把<input>元素的值设置为:锋利的jQuery

      $(“input”).val();//获取<input>元素的值


    cc.操作CSS-DOM

    CSS-DOM技术简单来说就是设置和获取style(层叠样式)对象的各种属性

      1.获取样式属性

      $(“input”).css(“color”);//获取<input>元素的样式颜色

      ...

      2.设置样式属性

        2.1.设置单一样式属性

        $(“input”).css(“color”, “red”);//设置<input>元素样式颜色为红色

        ...

        2.2.设置多个样式属性

        $(“input”).css({“color” : “red”, “fontSize” : “30px”});//设置<input>元素样式颜色为红色且字体大小为30像素

    (未完...)

  • 相关阅读:
    数组里面为对象根据某一属性排序
    理由<a>标签跳转到对应锚点
    jquery对复选框选中
    Fullcalendar
    es6学习
    vue 关于树杈图问题
    input 复选框样式修改
    GAMES101 作业2
    一份自己iOS 面试题,拿到15K35K,分享出来
    Cesium 一款面向三维地球和地图的,世界级的JavaScript开源产品
  • 原文地址:https://www.cnblogs.com/imaikce/p/5615617.html
Copyright © 2011-2022 走看看