JQuery操作DOM元素

220 阅读2分钟

1. 样式操作:

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

  1. css(name,value)
    $(this).css(display,block)
  1. 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) 创建节点

    $(selector) ---- 获取节点
    
    $(DOM) --- 创建节点 --- 示例:$('<div></div>')

(3) 元素内部插入子节点

    $(this).append(content) ---示例:$('div').append('<p></p>') --- p元素添加到div元素下
    
    $(this).appendTo(content) ---示例:$('div').appendTo('<p></p>') --- div元素添加到p元素下
    
    $(this).prepend(content) --- 示例:$('div').prepend('<p></p>') --- p元素添加到div元素前
    
    $(this).prependTo(content) --- 示例:$('div').prependTo('<p></p>') --- div元素添加到p元素前

(4) 元素外部插入兄弟节点

    $(this).after(content) ---示例:$('div').after('<p></p>') --- p元素添加到div元素后面
    
    $(this).insertAfter(content) ---示例:$('div').insertAfter('<p></p>') --- div元素添加到p元素后面
    
    $(this).before(content) ---示例:$('div').before('<p></p>') --- p元素添加到div元素前面
    
    $(this).insertBefore(content) ---示例:$('div').insertBefore('<p></p>') --- div元素添加到p元素前面

(5) 删除节点

    $(this).remove() ---移除被选元素,包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除

    $(this).empty() ---移除被选元素的所有子节点和内容

    $(this).detach() -- 方法移除被选元素,包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。会保留所有绑定的事件、附加的数据,这一点与 remove() 不同

(6) 替换节点


   $(this).replaceWith(content) ---示例:$('div').replaceWith('<p></p>') --- p元素替换div元素

   $(content).replaceAll(this) ---示例:$('<p></p>').replaceAll('div') --- p元素替换div元素
    

(7) 复制节点

    $(this).clone(params) --- params参数ture或flase, true复制事件处理,flase时只能复制节点不能复制事件处理

(8) 属性操作

    $(this).attr('width') ---获取属性值
    
    $(this).attr({width:"200",height:"80"}) ---设置多个属性的值
    
    $(this).removeAttr('width') --- 删除元素属性