jQuery浅谈（三）

2017-04-10

juery操作Dom（节点）

1 创建元素
    $(htmlStr)
    htmlStr：html格式的字符串
    $(“<span>这是一个span元素</span>”);
2 添加元素

      添加新建的元素
  +     方法一：将jQuery对象添加到调用者内部的最后面。 
    var $span = $(“<span>这是一个span元素</span>”);
    $(“div”).append($span);

    + 方法二：参数传字符串，会自动创建成jquery对象
    $(“div”).append(“<span>这是一个span元素</span>”);
    添加已经存在的元素
    var $p = $(“p”);
    $(“div”).append($p);
    注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。

    prepend() 在子节点的最前面插入    

    before() 在同级元素的前面插入

    after() 在同级元素的后面插入

    appendTo() 添加插入到... 括号内是目标元素
    例 : $("#text").appendTo("#box")
    prependTo() 和appendTo()正好相反
    例： $("#box").appendTo("#text")

清空元素

empty：清空指定节点的所有元素，自身保留(清理门户)
$(“div”).empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）
清空元素的第二种方法
$(“div”).html(“”);//使用html方法来清空元素，有就保留，清除其他的，缺点是，内部标签有事件不清除。（不推荐使用，会造成内存泄漏，绑定的事件不会被清除。）

删除元素

remove（ ）：相比于empty，自身也删除（自杀），传谁 杀谁。

克隆元素 clone()

作用:复制匹配的元素
复制$(selector)所匹配到的元素（深度复制，即复制标签还复制事件）
cloneNode(true)
 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone(false);
浅复制（复制标签和内容）

jQuery操作属性

1  设置单个属性
    第一个参数：需要设置的属性名
    第二个参数：对应的属性值
    attr(name, value);
    用法举例
    $(“img”).attr(“title”,”哎哟，不错哦”);
    $(“img”).attr(“alt”,“哎哟，不错哦”);

2     设置多个属性
    参数是一个对象，包含了需要设置的属性名和属性值
    attr(obj)
    用法举例
    $("img").attr({
    title:"哎哟，不错哦",
    alt:"哎哟，不错哦",
    style:"opacity:.5"
    });

获取属性

传需要获取的属性名称，返回对应的属性值
attr(name)
用法举例
var oTitle = $("img").attr("title");
alert(oTitle);
注意：
1.    获取属性时，只会获取到第一个元素对应的属性，与css方法一样
2.    获取属性时，如果该属性不存在，那么会返回undefined

移除事件 removeAttr()

参数：需要移除的属性名，如果传空，那么不会有任何操作，注意，并不是移除所有的属性。区分removeClass。
removeAttr(name);
用法举例
$("img").removeAttr("title");

prop

注意：在jQuery1.6之后，对于checked、selected、disable这类boolean类型的属性来说，如果使用attr方法获取属性值，得到的不是true和false，而是checked以及undefined。，使用prop方法来获取或者设置checked、selected、disable这类的值。prop方法使用跟attr方法一样。
设置属性
$(“:checked”).prop(“checked”,true);
获取属性
$(“:checked”).prop(“checked”);//返回true或者false

jQuery操作值与内容

1  val 方法
    val方法用于设置和获取表单元素的值，例如input、select、textarea的值
    设置值
    $(“#name”).val(“张三”);
    获取值
    $(“#name”).val();
2 html 方法
    设置内容
    $(“div”).html(“<span>这是一段内容</span>”);
    获取内容
    $(“div”).html()
3 text 方法
    设置内容
    $(“div”).text(“<span>这是一段内容</span>”);
    获取内容
    $(“div”).text()

html方法与text方法的区别：
html方法会识别html标签，text方法会把内容直接当成字符串，并不会识别html标签。