使用 jQuery操作 DOM

节点操作

查找节点

在 jQuery 中，使用 $ 选择器即可査找 HTML 元素节点。

创建节点

创建节点的基本用法
var 节点名称=$(HTML元素节点的代码);

插入节点

插入节点的基本用法

// 在被选元素内部结尾的位置插入指定内容
$(选择器).append(内容);
$(内容).appendTo(选择器);
//在被选元素内部开头的位置插入指定内容
$(选择器).prepend(内容);
$(内容).prependTo(选择器);
// 在被选元素后插入指定的内容
$(选择器).after(内容);
//在被选元素之后插入已有的元素，已有的元素会被移动到新的位置
$(内容).insertAfter(选择器):
//在被选元素前插入指定的内容
$(选择器).before(内容);
// 在被选元素之前插入已有的元素，已有的元素会被移动到新的位置$(内容).insertBefore(选择器);

删除节点

删除节点的基本用法
// 移除节点及事件
$(选择器).remove();
// 移除节点，但保留事件
$(选择器).detach();
// 保留节点，清空元素内容
8$(选择器).empty();

复制节点

复制节点的基本用法
$(选择器).clone();

替换节点

替换节点的基本用法

// 用指定的HTML内容或元素替换被选元素
$(内容).replaceA11(选择器);
$(选择器).replacewith(内容);

属性操作

获取与设置节点属性

获取与设置节点属性的基本用法
// 获取属性值
$(选择器).attr(属性名);
//设置单个属性
$(选择器).attr(属性名，属性值);
// 设置多个属性
$(选择器).attr({属性名1:属性值1，属性名2:属性值2，...});

删除属性

删除属性的基本用法
$(选择器).removeAttr(属性名);

节点遍历

遍历子元素

遍历子元素的基本用法
$(选择器).children();

遍历同辈元素

遍历同辈元素的基本用法
//获取紧邻匹配元素的下一个元素
$(选择器).next();
// 获取紧邻匹配元素的前一个元素
$(选择器).prev();
/ 获取匹配元素前面和后面的所有同辈元素
$(选择器).siblings();

遍历前辈元素

遍历前辈元素的基本用法
// 获取父级元素
$(选择器).parent();
// 获取祖先元素D
$(选择器).parents();

遍历所有元素

遍历其他元素的基本用法
// 对元素进行迭代，为每个匹配元素执行函数
$(选择器).each(function(元素下标，元素本身){
})

内容操作

代码操作

代码操作的基本用法
$(选择器).html([内容]);

文本操作

文本操作的基本用法
$(选择器).text([内容1);

value 值操作

属性值操作的基本用法
$(选择器).val([内容]);

样式操作

获取和设置样式

获取和设置样式的基本用法
// 获取css样式
$(选择器).css(css属性名);
// 设置css样式
$(选择器).css(css属性名，css样式值);
// 设置多个css样式
$(选择器).css({cSS属性名1:cSs样式值1，cSS属性名2:css样式值2，...});
// 设置height
$(选择器).height([高度]);
// 设置width
$(选择器).width([高度]);

添加和移除样式

添加和移除样式的基本用法
// 为元素添加样式
$(选择器).addclass("类名");
// 为元素移除样式。
$(选择器).removeclass("类名");

样式切换

样式切换的基本用法
//模拟addclass()与removeclass()实现样式切换过程
$(选择器).toggleclass("类名");

样式判断

样式判断的基本用法
// 判断是否包含指定的样式,
$(选择器).hasclass("类名");
示例:使用 hasClass()方法判断是否包含指定样式,