获取设置节点的属性

    // attribute
    //01 attr("属性名") 获取元素属性的属性值
    // 只能获取集合中第一个元素的title属性
    console.log( $(".box").attr("title") );
    //02 attr("属性名","属性值") 给集合中所有元素设置指定属性的属性值
    $(".box").attr("title","我设置的！");
    $(".box").attr("myattr","自定义属性");
    //03 attr({"属性名1":"属性值1","属性名2":"属性值2"}) 设置多个属性的属性值
    $(".box").attr({"title":"1111","my2":"222"});
    console.log( $(":checkbox").attr("checked") );//undefined
    console.log( $(":checkbox").prop("checked") );//false

    // $(":checkbox").attr("checked","checked");
    $(":checkbox").prop("checked",true);

    // 04 移除属性
    $(".box").removeAttr("my2");

    // prop() -- 获取 checked seleted readOnly

    $("button")[0].onclick = function(){
        $(":checkbox").prop("checked",true)
    }
    $("button")[1].onclick = function(){
        $(":checkbox").prop("checked",false)
    }
    $("button")[2].onclick = function(){    
        $(":checkbox").each(function(){ 
            if (this.checked) {
                this.checked = false;
            }else{
                this.checked = true;
            }
            // this.checked = !this.checked
        })
    }

each()

    $(".box").each(function(){        //不传参
        console.log( $(this).attr("title") );
        console.log(this);//this代表是DOM对象
    })

    $(".box").each(function(index,element){      // 传参
        console.log(index,element);
        // element 是DOM对象
    })

常用的属性

    // attr()
    // prop()
    // html()
    // text()
    // val()
    // 区分 元素属性与样式表属性

css属性的设置与获取

    // css() 获取设置元素的css属性的属性值
    $("#box").click(function(){
        // $(this).css("background-color","red");
        // 方法二 改变class属性的属性值
        // $(this).attr("class","box2");
        // addClass(class属性值)追加一个class属性值
        // $(this).addClass("box2");
        // removeClass("className")移除指定的class的属性值
        // $(this).removeClass("left");
        // toggleClass(className) 切换；如果没有该class值则追加上，如果有该class值则移除掉
        $(this).toggleClass("box2");
    })
        // hasClass(class值) 判断元素是否有指定的class，没有，返回false 有 返回true
        console.log( $("#box").hasClass("box100") );    

常用的CSS相关的属性

    // 01 offset() 获取元素在可是窗口坐标系中坐标点
    console.log( $("#parent").offset() );
    console.log( $("#son").offset() );
    // 02 position() 获取元素在父节点（非静态定位relative absolute）坐标系中的坐标点 
    // offsetParent
    console.log( $("#parent").position() );
    console.log( $("#son").position() );
    // 设置offset({left:300,top:300})的值
    $("#parent").offset({left:300,top:300});
    $("#son").position(  );//注意 只可以获取 不能设置
    // width() 获取元素的宽度
    // height() 获取元素的高度
    // 不带单位
    console.log( $("#parent").width() );
    console.log( $("#parent").height() );
    $("#parent").width(300);
    // offset({left:XX,top:XX}) 可视窗口坐标系
    // position() 父节点坐标系 （只能获取）
    // width()
    // height()
    // CSS()

常用的CSS相关的属性

        $("button:eq(0)").click(function(){
        // 01 创建元素节点
        var $Div = $("<div class='box'></div>");
        console.log($Div);
        // 02 插入节点
        // appendChild() 在所有孩子列表的末尾插入
        // parentNode.insertBefore(新，旧)在指定元素的前面插入

        // 父节点.append(子节点)
        // $("body").append($Div);
        // 子节点.appendTo(父节点)
        // $Div.appendTo($("body"));
        $Div.appendTo("#box");
    })
    $("button:eq(1)").click(function(){
        var $div = $("<div class='box'></div>");
        // 父节点.prepend(子节点) 添加到孩子列表的首部
        // $("body").prepend($div);
        // 子节点.prependTo(父节点)
        $div.prependTo("body");
    })

    $("button:eq(2)").click(function(){
        var $p = $("<p>我也是一个p标签</p>");
        // 01 旧节点.after(新节点) 添加后面的兄弟节点
        // $("#p1").after($p);
        // 02 新节点.insertAfter(旧节点)
        $p.insertAfter($("#p1"));
    })
    $("button:eq(3)").click(function(){
        // before(string|jQuery对象)
        // $("#p1").before( "<p>pppppppppppp</p>" )
        // insertBefore()
        $("<p>pppppppppppp</p>").insertBefore("#p1");
    })

    // 移除
    $("button:eq(4)").click(function(){
        // 把所有class为del的元素移除掉
        var ret = $(".del").remove();
        console.log(ret);//返回值 所有被移除的元素
        ret.appendTo("body");

        // 找出class为del的元素，然后筛选出id为d2的元素把其移除
        // $(".del").remove("#d2");
    })

    //给div添加点击事件
    $(".del").click(function(){
        alert("div");
    })

    $("button:eq(5)").click(function(){
        //使用detach()移除div
        var ret = $(".del").detach();
        ret.appendTo("body");
        /*
            remove() 与 detach()
            remove()移除节点之后，会保存该jQuery对象
            detach()移除节点之后，会保存jQuery对象并且保存该对象的上添加的事件
        */
    })

    $("button:eq(6)").click(function(){
        // 清空所有匹配元素的子元素
        $(".del").empty();
    })