使用jQuery操作DOM

样式操作

//1.设置和获取样式值
$(selector).css(name,value);//设置单个属性
$(selector).css({name:value,name:value……});//设置多个属性
//获取css属性值
$(selector).css(name);
​
//2.追加样式
$(selector).addClass(class);//追加单个类样式，class为类名称
$(selector).addClass(class1 class2……);//追加多个类样式，空格隔开即可
​
//3.移除样式
$(selector).removeClass(class);//移除单个样式
$(selector).removeClass(class1 class2……);//移除多个样式，空格隔开
​
//4.切换样式
$(selector).toggleClass(class);//实现样式切换，模拟addClass和removeClass的过程
​
//5.判断是否包含指定的样式
$(selector).hasClass(class);//返回true或false

内容操作

//html方法，可识别标签内容
$(selector).html([content]);//用于设置所有匹配元素的html内容或文本内容
$(selector).html();//用于获取第一个匹配元素的html内容或文本内容
//text方法，当做纯文本处理
$(selector).text([content]);//用于设置所有匹配元素的文本内容
$(selector).text();//用于获取所有元素的文本内容

属性值操作

//设置value属性值的内容
$(selector).val("内容");//色号孩子属性的内容
//获取value属性值得内容
$(selector).val();

节点

//1. 查找节点
//2. 创建节点,直接加工厂函数
$("<li></li>");//创建空<li>
$("<li>说到底</li>");//创建含文本的<li>
$("<li title='last'></li>");//创建含属性的li
​
//3. 插入节点
//内部插入
$(a).append(b);//将b追加到a中,向所选元素内部插入内容
$(a).appandTo(b);//把a追加到b中，把所选元素追加到另一个指定的元素集合中
$(a).prepend(b);//将b插入到a中前，向每个所选的元素内部前置内容
$(a).prependTo(b);//将a前置到b中
//外部插入
$(a).after(b);//将b插入到a之后，在每个元素之后插入内容
$(a).insertAfter(b);//将a插入到b之后，插入到指定元素之后
$(a).before(b);//将b插入到a之前
$(a).insertBefore(b);//将a插入到b之前
​
//4. 删除节点
$(selector).remove([expr]);//expr为栓选元素的jQuery表达式，通过表达式获取指定元素进行删除
$(selector).remove();//删除指定节点
$(selector).empty();//清空节点的内容
​
//5. 替换节点
$(a).replaceWith(b);//将a元素替换成b
$(b).replaceAll(a);//将a元素替换成b
​
//6. 复制节点
$(selector).clone([true]);//复制元素并复制所有的事件处理
$(selector).clone([false]);//只复制元素

属性操作

//1.获取与设置属性值
$(selector).attr([name]);//获取属性
$(selector).atrr({name:value,name:value……});//设置属性值
​
//2.删除元素属性
$(selector).removeAttr(name);

节点遍历

//1.遍历子元素
$(selector).children([expr]);//expr为筛选子元素的表达式，
$(selector).children().length;//获取子元素的个数
​
//2.遍历同辈元素
$(selector).next([expr]);//用于获取紧邻匹配元素之后的元素
$(Selector).prev([expr]);//用于获取紧邻元素之前的远足
$(selector).siblings([expr]);//用于获取位于匹配元素前面和后面的所有同辈元素
​
//3.遍历前辈元素
$(selector).parent([selector]);//用于获取当前匹配元素集合中每个匹配元素的父级元素
$(selector).parents([selector]);//用于获取当前匹配元素集合中每个匹配元素的祖先元素
​
//4.其他遍历方法
$(selector).each(function(index,element));//为每个匹配元素规定运行的函数
$(selector).end();//结束当前链条中最近的筛选操作，并将匹配元素集还原为之前的状态