六、jQuery中的dom元素操作

1.元素属性的操作
（1）获取或设置元素的属性值 attr prop

   //一个值是获取
    console.log($("#btn").attr("value"));
    console.log($("#btn").prop("value"));
    //两个值是设置
    $("#btn").attr("value","按钮1");
    console.log($("#btn").attr("value"));
    console.log($("#btn").prop("value"));


    //设置自定义属性用attr
    $("#btn").attr("data-style","按钮1");
    $("#btn").prop("data-style","按钮1");//prop设置自定义属性设置不上，但是可以获取得到，所以设置自定义属性的时候最好不使用
    //获取自定义属性
    console.log($("#btn").attr("data-style"));
    console.log($("#btn").prop("data-style"));


    //可以设置多个属性，但是不能获取多个
    $("#btn").attr({
        value:"按钮2",
        class:"my"
    });
    $("#btn").prop({
        value:"按钮2",
        class:"my"
    });


    //获取checked属性prop
    console.log( $("#ra").attr("checked"));//attr获取不到表单元素的checked属性，所以获取表单元素的checked属性不使用
    console.log( $("#ra").prop("checked"));
    //设置checked属性用attr
    $("#ra").attr("checked","true");
    $("#ra").prop("checked","true");prop设置checked属性设置不上，但是可以获取得到，所以设置checked属性的时候最好不使用

（2）删除元素的属性 removeAttr removeProp无用

    $("#btn").removeAttr("value");
    $("#ra").removeProp("checked");//无用

2.元素内容的操作 html text

//空是获取内容
//console.log($("div").html());//相当于js中的innerHTML 获取全部内容
//console.log($("div").text());//相当于js中的 innerText 获取文本内容
//一个是设置内容（两者一样）
$("div").html("eeee");
$("div").text("eeee");
console.log($("div").html());
console.log($("div").text());

3.操作表单元素的值 val

//空是获取内容
console.log($("#btn").val());
//一个是设置内容
$("#btn").val("1234");

4.操作dom元素的css css

//一个值是获取
    console.log($("#btn").css("width"));
//两个值是设置
    $("#btn").css("width","200px");

//jq中获取的css样式颜色都是rgb

 //将颜色的rgb转化为16进制
    var co=$("#btn").css("borderColor");
    var x=(function(co){
        var r=parseInt(co.split(",")[0].split("(")[1]);
        var g=parseInt(co.split(",")[1]);
        var b=parseInt(co.split(",")[2].split(")")[0]);
        var col=(r<<16)+(g<<8)+b;
        return col.toString(16);
    })(co);
    console.log(x);

5.（1）类名称的添加 addClass

//一个
$("#btn").addClass("btn1");
//多个
$("#btn").addClass("btn1 btn2 btn3");

（2）类名称移除 removeClass

//一个
$("#btn").removeClass("btn1");
//多个
$("#btn").removeClass("btn1  btn3");
//全部
$("#btn").removeClass();

（3）类的切换 toggleClass
当有这个或这些类的时候删除，没有就添加

//一个
$("#btn").toggleClass("btn1");
//多个
$("#btn").toggleClass("btn1 btn2");

6.操作子父节点的问题
（1）children

//找所有子元素
console.log($("ul").children());
//找单个子元素
console.log($("ul").children()[1]);

（2）first

//第一个集合
console.log($("ul>li").first());
//第一个
console.log($("ul>li").first()[0]);

（3）last

//最后一个集合
console.log($("ul>li").last());
//最后一个
console.log($("ul>li").last()[0]);

（4）eq

//索引寻找集合
console.log($("ul>li").eq(0));
//索引寻找单个
console.log($("ul>li").eq(0)[0]);

（5）siblings

//同胞元素集合
console.log($(".li2").siblings());
console.log($(".li2").siblings(".li1"));
//单个同胞元素
console.log($(".li2").siblings(".li1")[0]);

(6)prev prevAll

//找当前元素的前一个元素集合
console.log($("ul>li").eq(2).prev());//前一个集合
console.log($("ul>li").eq(2).prevAll("li"));//前面的所有集合

(7)next nextAll

//找当前元素的下一个元素集合
console.log($("ul>li").eq(1).next());
console.log($("ul>li").eq(1).nextAll("span"));

(8)filter

//过滤元素挑选出来集合
console.log($("ul>li").filter(".li1"));

（9）is

//判断当前对象是谁
console.log($("ul>li").eq(0).is(".li2"));//false true

7.jquery 里面的尺寸问题

console.log($("div").width());//可视区域
console.log($("div").innerWidth());//包括内边距的距离
console.log($("div").outerWidth());//可视区域+内边距的距离+边框