一、属性操作
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>元素的同辈(兄弟)元素