jQuery操作DOM

一、样式操作

1.设置和获取样式值

//设置单个属性
$("选择器").css("属性名","属性值");
//同时设置多个属性
$("选择器").css({"属性名":"属性值","属性名":"属性值"});
//获取属性值
$("选择器").css("属性名");

2.追加样式和移除样式

//追加样式
$("选择器").addClass(类样式名称);
//移除样式
$("选择器").removeClass(类样式名称);
//切换样式
$("选择器").toggleClass(类样式名称);
//判断是否含指定的样式
$("选择器").hasClass(类样式名称);

二、内容操作

1.HTML代码操作

//获取html内容或文本内容
$("选择器").html();
//设置html内容或文本内容
$("选择器").html(参数);

2.标签内容操作

//获取文本内容
$("选择器").text();
//设置文本内容
$("选择器").text(参数);

3.属性值操作

//获取属性值
$("选择器").val();
//设置属性值
$("选择器").val(参数);

三、节点操作

1.查找节点

$("选择器");

2.创建节点

var 名称=$("HTML标签");

3.插入节点

$("选择器").append(新节点);
$("选择器").prepend(新节点);
$("选择器").after(新节点);
$("选择器").before(新节点);

4.删除节点

//删除文本和子节点
$("选择器").remove();
//清空节点
$("选择器").empty();

5.替换节点

$("选择器").replaceWith(新节点);
$(新节点).replaceAll("选择器");

6.复制节点

$("选择器").clone(true/false);//true:复制事件 false:不复制事件

四、属性操作

1.获取和设置元素属性

//获取属性值
$("选择器").attr("属性名");
//设置多个属性值
$("选择器").attr({"属性名":"属性值","属性名":"属性值"});

2.删除元素属性

$("选择器").removeAttr("属性名");

五、节点遍历

1.遍历子元素

$("选择器").children();

2.遍历同辈元素

$("选择器").next();//获取紧邻匹配元素之后的元素
$("选择器").prev();//获取紧邻匹配元素之前的元素
$("选择器").siblings();//获取匹配元素前面和后面的所有同辈元素

3.遍历前辈元素

$("选择器").parent();//获取当前元素的父级元素
$("选择器").parents();//获取当前元素的祖先元素

4.其他遍历方法

$("选择器").each(function(index,element));//为每个匹配元素规定运行的函数
$("选择器").end();//结束当前链条中最近的筛选条件，并将匹配元素集还原为之前的状态