一、节点的创建
1.Dom创建流程(js中)
创建元素节点->给元素添加属性->在标签中添加文本->把该元素放入整个文档中
2.jq创建节点
jq通过$()创建节点
(1)直接创建节点
var div=$("");
//创建div元素
$("body").append(div);
//将创建好的div元素放入body中(通过append方法)
(2)创建带文本的节点
var div=$("这里是内容噢");
//创建含有内容的div元素
$("body").append(div);
//将创建好的div元素放入body中(通过append方法)
(3)创建带属性的节点
var div=$("这里是内容噢");
//创建具有属性的div元素
$("body").append(div);
//将创建好的div元素放入body中(通过append方法)
3.元素插入
(1)子级插入(append、appendTo、prepend、prependTo)
<1>append与appendTo:在元素子级的末尾插入元素(以在A元素中插入B为例)
append:$(A).append(B)
appendTo:$(B).apppendTo(A)
作用相同,写法颠倒
<2>prepend与prependTo:在元素子级的开头插入元素(以在A元素中插入B为例)
prepend:$(A).prepend(B)
prependTo:$(B).prependTo(A)
作用相同,写法颠倒
(2)同级插入(before、insertBefore、after、insertAfter)
<1>before与insertBefore:在元素的前边插入元素(以在A前边插入B为例)
before:$(A).before(B)
insertBefore:$(B).insertBefore(A)
作用相同,写法颠倒
<2>after与insertAfter:在元素的后边插入元素(以在A后边插入B为例)
after:$(A).after(B)
insertAfter:$(B).after(A)
作用相同,写法颠倒
4.元素删除
(1)remove:删除指定的元素及其元素
(注意:当用选择器时,返回的是一个数组的形式,不要删多哦)
$("div").remove()删除所有div元素
(2)empty:清空指定元素的后代元素和内容
$("div").empty()清空div下的内容和元素。
5.元素替换
replayWith与replaceAll都可以实现替换,只是使用格式颠倒(以把A替换为B为例)
replayWith:$(A)replayWith(B)
replayAll:$(B)replayAll(A)
6.元素遍历(each)
语法格式:$().each(function(index,element){});
index为索引号,element为当前元素。
7.属性操作
(1)获取指定元素的属性(attr)
jQuery对象.attr("属性名"); // 获取属性
jQuery对象.attr("属性名", "属性值"); // 修改属性
(2)删除指定元素的属性(removeAttr)
jQuery对象.removeAttr("属性名");
8.样式操作
(1)css
// 获取指定属性的属性值
$().css("属性名");
// 设置属性值
$().css("属性名", "属性值");
(2)addClass添加类选择器
$().addClass("类名");
(3)removeClass移出已有的类
$().removeClass("类名");
(3)toggleClass切换类选择器
$().toggleClass("类名");当只有这一个类的时候,有的时候调用这个方法这个类被移除,没有的时候加上这个类。
9.内容操作
(1)html方法:获取元素内部的元素标签以及内容,也可以用来给元素添加内容
// 获取元素内容
$().html();
// 设置元素内容
$().html("内容");
(2)text方法获取指定标签的文本,也可以在标签添加文本
// 获取指定标签中的文本
$().text();
// 给指定标签设置文本
$().text("内容");
(3)val方法获取表单元素的值,也可以给表单元素设置值。
$().val();
//获取表单元素的值
$().val("123456");
//给表单元素传入值。