使用jQuery操做DOM

一、样式操作
1、直接样式操作

 语法：
    css(name,value);   //设置单个属性
    css({name:value,name:value,....}) //同时设置多个属性，大括号包裹、冒号分割name与value，不同属性之间用逗号分隔

2、追加样式和移除样式
    语法：
    addClass("class") //追加单个样式
    addClass("class1 class2 ...")  //追加多个样式，同空格分隔

3、移除样式
    语法：
    removClass("class")  //移除单个样式
    removClass("class1 class2") //移除多个样式，有空格分隔

4、切换样式
    使用toggle()方法可以切换元素的可见状态，而使用toggleClass()方法可以切换不同元素的类样式。
    语法：
    toggleClass("class");

内容操作
1、HTML代码操作

    语法：
    html(["content"]);

    定义和用法
    html() 方法返回或设置被选元素的内容 (inner HTML)。
    如果该方法未设置参数，则返回被选元素的当前内容。

    返回元素内容
    当使用该方法返回一个值时，它会返回第一个匹配元素的内容。

设置元素内容
当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。

使用函数来设置元素内容

使用函数来设置所有匹配元素的内容。

    语法：
    $(selector).text(function(index,oldcontent))
    描述：
    必需。规定返回被选元素的新文本内容的函数。
    index - 可选。接受选择器的 index 位置。
    oldcontent- 可选。接受选择器的当前内容。

2.标签内容操作

 语法：text([content]);   

方法设置或返回被选元素的文本内容。（content为空时返回，有值时设置）

a.返回文本内容

当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。

3.属性值操作。

在jQuery中，除了可以使用html()方法和text()方法获取与设置元素内容外，还提供了获取元素value属性值的方法val()。该方法非常常用，多用于操作表单的<input>元素

语法：
    val([value]);

val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数，则返回被选元素的当前值。
1、返回 Value 属性
返回第一个匹配元素的 value 属性的值。

1:节点操作

在jQuery中，节点操作主要分为查找、创建、插入、删除、替换和复制6种操作方式。

a、查找节点

    想要对节点进行操作，即增、删、改和复制，首先必须找到要操作的元素。
    所以，查找的语法示例：
    $("h1").hide();  
  

b、创建节点元素

    函数$()。该函数就是用于将匹配的DOM元素转换为jQuery对象的，
    $()语法：
    $(selector) //选择器。使用jQuery选择器匹配元素
    $(element)  //DOM元素。以DOM元素来创建jQuery对象
    $(html)     //HTML代码，使用HTML字符串创建jQuery对象

c.插入节点

插入节点方法
插入方式	方法	描述
内部插入	appen(content)	向所选的元素内部插入内容，即(A).append(B)表示将B追加到A中。如 (“ul”).append($newNode2);追加的位置在元素的最后
	appendTo(content)	把所选择的元素追加到另一个指定的元素集合中，既(A).appendTo(B)，表示把A追加到B中，如($newNode2).appendTo(“ul”); 与append的唯一区别是语法顺序相反
	prepend(content)	向每个选择的元素内部前置内容，即(A).prepend(B)表示将B追加到A中，如(“ul”).perpend($newNode2);
	prependTo(content)	将所有匹配元素前置到指定元素中。该方法仅颠倒了常规prepend()插入元素的操作，即$(A).perpendTo(B)表示将A前置到B中，如(newNode2).prependTo(“ul”)
外部插入	after(content)	在每个匹配元素之后插入内容，即(A).after(B)表示将B插入到A之后，如(“ul”).after($newNode2);
	insertAfter(content)	将所有匹配的元素插入到指定元素的后面。该方法颠倒了常规after()插入元素的操作，$(A).insertAfter(B)表示将A插入到B之后，如(newNode2).insertAfter(“ul”);
	before(content)	向所选择的元素外面前面插入元素，即$(A).before(B)表示将B插入至A之前，如(“ul”).before(newNode2);
	insertBefore(content)	将所匹配的元素插入到指定元素的前面，该方法仅是颠倒了常规before()插入元素的操作，即$(A).insertBefore(B)表示将A插入至B之前，如(newNode2).insertBefore(“ul”);

e, 删除节点
    语法：(selector).remove([expr]);
    参数expr为可选参数，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表达式获取指定元素，并进行删除。