jQuery中 对标签元素操作(2)

时间:2022-05-09 23:40:14

一、属性操作

1、获取属性和设置属性

例如下jQuery代码:

var $para=$("p");           //获取<p>节点

var p_txt=$para.attr("title");       //获取<p>元素节点属性title

var id = parseInt($("img").parent().prop("id"));   //获取图片标签的父元素的属性ID的值

注意:

jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的,例如 attr()方法,既能设置元素属性的值,也能获取属性的值。类似的方法还有html()、text()、height()、width()、val()、css()等。

2、删除属性

如果需要删除<p>元素的title属性,可以视同下面的代码实现:

$("p").removeAttr("title");     //删除<p>元素的title属性

二、样式操作

1、获取样式和设置样式

$("p").attr("class");    //获取<p>元素的class

$("#Text1").css("color", "#ACACAC");     //将ID为Text1的元素的文本颜色设置为#ACACAC

2、追加样式

$("p").addClass("another");   //给<p>元素追加“another”类

3、移除样式

$("p").removeClass("high");    //移除<p>元素中值为“high”的class

4、切换样式

<p>元素的HTML原始代码:

<p class="myclass" title="test">test</p>

当点击“切换样式”按钮后,变为:

<p class="myclass another" title="test">test</p>

当再次单击“切换样式”按钮时,又变回原来的状态

<p class="myclass" title="test">test</p>

5、判断是否含有某个样式

hasClass()

用法:

$("p").hasClass("another");      //判断此元素中是否含有“another”的class

$("p").is("another");      //作用同等于如上代码

三、设置和获取HTML,文本和值

1、HTML()方法

$("p").html();      //获取<p>元素的HTML代码

$("p").html("<strong>叫我大哥</strong>");  //设置<p>元素的HTML代码

2、text()方法

$("p").text();    //获取<p>元素的text

$("p").text("叫我大哥");    //设置<p>元素的text

3、val()方法

$("input").val();    //获取<input>元素的val

$("input").val("叫我大哥");  //设置<input>元素的val

四、遍历节点

1、children()方法

该方法用于取得匹配元素的子元素的集合。

2、next()方法

var $p1=$("p").next();    //得到紧邻<p>元素后的同辈元素

3、prev()方法

var #ul=$("ul").prev();    //得到紧邻<ul>元素前的同辈元素

4、siblings()方法

var sp2=$("p").siblings();    //得到紧邻<p>元素的同辈(兄弟)元素