Jquery基础教程之DOM操作

2020-05-23 06:24:09易采站长站整理

     2、样式操作addClass()、removeClass()、toggleClass()和hasClass()

      添加样式addClass()方法,使用该方法对目标元素添加相应的样式,方法如下:


$(element).addClass();

例:     


$("p").addClass("ul");

该示例设置元素p的样式为ul。

      移除样式removeClass()方法,使用该方法移除目标元素的指定样式,方法如下:


$(element).removeClass();

例:     


$("p").removeClass("ul");

该救命去除掉p元素的ul类样式。

      切换样式toggleClass()方法,使用该方法切换目标元素的样式,方法如下:


$(element).toggleClass();

例:      


$("p").toggleClass("ul");

该方法来回切换【添加删除实现切换】元素p的样式ul.

      判断元素是否使用了样式$(element).hasClass(),方法如下:


$(element).hasClass(class);

例:      


alert($("p").hasClass("ul"));

打印出p元素是否有ul样式。

      PS:addClass()和attr()方法设置样式的不同,attr方法把元素的属性名对应的属性值设为方法中的参数值,addClass()则把属性值

添加到属性名对应的属性值中。例:已有元素<p class=’class1′>元素样式</p>,使用attr()和addClass()分别添加新样式。      


$("p").attr("class","another").

结果是<p class=’another’>元素样式</>      


$("p").addClass("class","another")

结果是<p class=’class1 another’>元素样式</p>

    3、设置和获取HTML【html()】,文本【text()】和值【val()】

      html()方法获得或设置某个元素的html元素。方法如下:


$(selector).html();

例:

       $(“p”).html();该示例获得元素p的html内容。

      $(“p”).html(“<strong>添加html内容</strong>”);该示例设置p的html内容为”<strong>添加html内容</strong>“;

      PS:该方法可以用于XHTML文档,不能用于XML文档。

      text()方法获得或设置某个元素的文本值。方法如下:$(selecotr).text();例: