jQuery中的DOM操作

DOM操作的分类

    DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

DOM Core

    JavaScript中的getElementById()、getElementByTagName()、 getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。

HTML_DOM

    document.forms;
    element.src;
    element.alt;

CSS_DOM

    CSS_DOM 是针对CSS的操作。
    CSS-DOM技术的主要作用是获取和设置style对象的各种属性。
    例如： element.style.color=“red”;

each()

  定义和用法：
    each() 方法为每个匹配元素规定运行的函数。
    提示：返回 false 可用于及早停止循环。
    语法：
    $(selector).each(function(index,element))
    参数描述：
    index - 选择器的 index 位置
    element - 当前的元素（也可使用 "this" 选择器）
    eg:$("li").each(function(){ alert($(this).text()) });

操作内容

    html():设置或返回所选元素的内容(等同于js中的innerHTML)
    text():设置或返回所选元素的文本内容(等同于js中的innerText)
    val():设置或返回表单字段的值(等同于js中的value)

操作“元素”属性

  1.获取元素的属性
    attr(name)
    语法：$(selector).attr(attribute)
  2、设置元素的属性
     2.1 attr(key,value) 设置指定key属性的属性值为value
    语法：$(selector).attr(attribute,value)
    2.2 设置多个属性/值对
    语法:$(selector).attr({attribute:value, attribute:value ...})

删除元素的属性

    removeAttr(name) : 删除指定的属性
    说明：name表示属性的名称。

操作元素的样式

    1、直接设置样式属性: css()方法
    2、获取样式和设置样式
    获取：$(“#nav”).attr(“class”)
    设置：$(“#nav”).attr(“class”,”nav2”)
    3、增加样式
addClass(class)
说明：参数class为样式名称，也可以同时增加多个样式，只需要用空格将其隔开即可。
    addClass(class1 class2…)
    4、移除样式
    removeClass([class])
    可选。规定要移除的 class 的名称。如需移除若干类，请使用空格来分隔类名。如果不设置该参数，则会移除所有类。
    5、样式切换
    toggleClass(class)
    说明：参数class为样式名称。其功能是当元素中含有名称为class的样式时，删除该样式，否则，增加该样式。
5、判断是否含有某个样式
    hasClass(class)
    说明：参数class为样式名称。该方法用来判断元素中是否含有某个class，如果有，则返回true，
否则返回false。