你的位置:首页 > Java教程

[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元素的第2个input子元素的数值

      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>元素的子元素,即head和body

      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属性为setiValue,name属性为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像素

(未完...)