JQuery操作DOM元素

1. 样式操作：

• 语法：

(1) 使用css()为指定的元素设置样式值或获取样式值

1. css(name,value)

    $(this).css(display,block)
复制代码

2. css({name1:value1,name2:value2})

    $(this).css({opacity:'0.5',display:block})
复制代码

(2) 追加样式

1.$(this).addClass(class)

    $(this).addClass("content")
复制代码

2.$(this).addClass(class1 … classN)

    $(this).addClass("content border")
复制代码

(3) 移除样式

1.$(this).removeClass(class)

    $(this).removeClass(content)
复制代码

2.$(this).removeClass(class…classN)

    $(this).removeClass("content border")
复制代码

(4) 切换样式

1.$(this).toggleClass(class)

    $(this).toggleClass(content)
复制代码

2.$(this).toggleClass(class…classN)

    $(this).toggleClass("content border")
复制代码

(5) 判断是否含指定的样式

1.$(this).hasClass(class)

    $(this).hasClass(content)
复制代码

2. 内容操作

• 语法：

(1) html代码操作

$(this).html() --- 获取元素中的html代码
$(this).html("<div class='content'>…</div>") ---设置元素中的html代码
复制代码

(2) 文本类容操作

$(this).text() --- 获取元素中的文本
$(this).text("<div class='content'>…</div>") --- 设置元素中的文本
复制代码

3. 属性值操作

• 语法：

    $(this).val() --- 获取元素的value属性值
    $(this).val(value) --- 设置元素的value属性值
    
    ps: $(this).val('') 清空需要添加引号，如果val方法括号中不添加任何内容，是获取val值
    
    $("input").focus(function(){
      $("input").css("background-color","#FFFFCC");
    }) --- 获得焦点的事件
    
     $("input").blur(function(){
      $("input").css("background-color","#FFFFCC");
    })--- 失去焦点的事件
复制代码

4. 节点操作

• 语法：

(1) 获取节点

    $(this).parent() --- 找父亲节点，距离最近的父元素
    
    $(this).parent(".selected") --- 查找每个段落（距离元素最近的上一级）的带有 "selected" 类的父元素

    $(this).parents(".selected") --- 查找所有带有 "selected" 类祖先元素

    $(this).children(".selected") --- 返回所有直接子节点，不会返回所有的子孙节点

    $(this).contents() --- 返回下面的所有内容，包括节点和文本。

    $(this).prev() --- 返回上一个兄弟节点，不是所有的兄弟节点

    $(this).prevAll() --- 返回所有之前的兄弟节点

    $(this).next() --- 返回下一个兄弟节点，不是所有的兄弟节点

    $(this).nextAll() --- 返回所有之后的兄弟节点

    $(this).siblings() --- 返回兄弟节点，不分前后

    $(this).find(".selected") --- $("div").find("p")，是从<div>元素找<p>，等同于$("div p")

    $(this).filter()，--- 方法返回符合一定条件的元素 --- 示例： 返回带有类名 "intro" 的所有 <p> 元素：$("p").filter(".intro")
复制代码

(2) 创建节点