jQuery基本操作

目录

内容操作

HTML代码操作

标签内容操作

属性值操作

节点操作

查找节点

创建节点

插入节点

删除节点

替换节点

复制节点

属性操作

获取与设置元素属性

删除元素属性

节点遍历

遍历子元素

遍历同辈元素

遍历前辈元素

其他遍历方法

CSS-DOM操作

---

详细：学习jQuery这一篇就够了

---

整理：

操作文本与属性值内容

操作DOM节点

遍历DOM节点

操作CSS-DOM

---------------------------------------------------------

DOM操作分类

• DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
• HTML-DOM：用于处理HTML文档，如document.forms
• CSS-DOM：用于操作CSS，如element.style.color="green"

jQuery中的DOM操作

• jQuery对JavaScript中的DOM操作进行了封装
• jQuery中的DOM操作
  • 样式操作
  • 内容及Value值操作
  • 节点及节点属性操作
  • 节点遍历

---------------------------------------------------------

设置和获取样式值

css(name,value) ;

或

css({name:value, name:value,name:value…}) ;

追加样式

$(selector).addClass(class);

或  

$(selector).addClass(class1 class2 … classN);

移除样式

$(selector).removeClass("class") ;

或  

$(selector).removeClass("class1 class2 … classN ") ;

切换样式

$(selector).toggleClass(class) ;

判断是否含指定的样式

$(selector). hasClass(class);

---

内容操作

HTML代码操作

        html()可以对HTML代码进行操作，类似于JS中的innerHTML

获取：

$("div.left").html();

设置：

 $("div.left").html("<div class='content'>…</div>");

标签内容操作

        text()可以获取或设置元素的文本内容

获取：

$("div.left").text();

设置：

 $("div.left").text("<div class='content'>…</div>");

    html() 和 text()方法的区别

属性值操作

        val()可以获取或设置元素的value属性值

获取：

$(this).val();

设置：

$(this).val(value);

---

节点操作

查找节点

略

创建节点

工厂函数$()用于获取或创建节点

• $(selector)：通过选择器获取节点
• $(element)：把DOM节点转化成jQuery节点
• $(html)：使用HTML字符串创建jQuery节点

插入节点

元素内部插入子节点

元素外部插入同辈节点

删除节点

        jQuery提供三种删除节点的办法

• remove()：删除整个节点

  $(selector).remove([expr]);

• empty()：清空节点内容

  $(selector).empty();

• detach()：删除整个节点，保留元素的绑定事件、附加的数据

替换节点

        replaceWith()和replaceAll()用于替换某个节点

复制节点

        clone()用于复制某个节点

$(selector).clone([includeEvents]) ; //参数为true、false

---

属性操作

获取与设置元素属性

        attr()用来获取与设置元素属性

获取：

$(selector).attr([name]) ;

设置：

$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

删除元素属性

        removeAttr()用来删除元素的属性

$(selector).removeAttr(name) ;

---

节点遍历

遍历子元素

        children()方法可以用来获取元素的所有子元素

$(selector).children([expr]);

遍历同辈元素

        jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

遍历前辈元素

        parent()：获取元素的父级元素

        parents()：元素元素的祖先元素

其他遍历方法

each( ) ：规定为每个匹配元素规定运行的函数

$(selector).each(function(index,element)) ;

end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

---

CSS-DOM操作

        除css()外，还有获取和设置元素高度、宽度等的样式操作方法