jQuery：基础2---操作DOM

1.基本操作

2.属性操作

<div id="d1" name="n1" >我是谁</div>
<script>
    // 1.attr()：读取或设置jQuery对象的属性值
    var a = $("div").attr("id");
    var b = $("div").attr("name");
    var c = $("div").attr("class");
    console.log(a, b, c);      //结果：d1  n1  undefined

    // 设置 $("div") 对象的属性值，如果没有该属性，则创建该属性。
    $("div").attr("id","d2");
    $("div").attr("name","n2");
    $("div").attr("class","c2");
    $("div").attr("nick","k2");
    // 获取 $("div") 对象的属性值。
    var a = $("div").attr("id");
    var b = $("div").attr("name");
    var c = $("div").attr("class");
    var d = $("div").attr("nick");
    console.log(a, b, c, d);      //结果：d2  n2  c2  k2

    // 2.removeAttr("attrName")：删除jQuery对象的attrName属性
    $("div").removeAttr("nick");
    $("div").removeAttr("class");
    var a = $("div").attr("id");
    var b = $("div").attr("name");
    var c = $("div").attr("class");
    var d = $("div").attr("nick");
    console.log(a, b, c, d);      //结果：d2  n2  undefined  undefined 
</script>

<script>
    // jQuery设置/获取属性:
    // 1.设置属性
    $("#div1").attr({"background": "red"});
    $("#checkbox1").prop({"checked": true});
    // 2.获取属性
    $("#div1").attr("background");
    $("#checkbox1").prop("checked");
</script>

<img id="d1">
<img id="d2" src="img/hfzt.png">
<script>
    // 1.查询
    var a = $("#d1").attr("src");
    var b = $("#d2").attr("src");
    console.log(a, b);      //结果：undefined  "img/hfzt.png"

    // 2.增加、修改
    $("#d1").attr("src","img/infor.png");
    $("#d2").attr("src","img/infor.png");
    //  <img id="d1" src="img/infor.png">
    //  <img id="d2" src="img/infor.png">
    var a = $("#d1").attr("src");
    var b = $("#d2").attr("src");
    console.log(a, b);      //结果：img/infor.png  img/infor.png

    // 3.删除
    $("#d1").removeAttr("src");
    //  <img id="d1">
    //  <img id="d2" src="img/infor.png">
    var a = $("#d1").attr("src");
    var b = $("#d2").attr("src");
    console.log(a, b);      //结果：undefined  "img/infor.png"
</script>  

3.样式操作