jQuery操作dom元素

jQuery操作dom元素

1.操作元素的属性
attr(),prop() 　　　获取或者设置元素的属性值
attr():

	$("input[type='button']").attr("value","按钮1");//设置button的value值为按钮1
	console.log( $("input[type='button']").attr("value"));//获取button的value值

prop():

	$("input[type='button']").prop("value","按钮1");//设置button的value值为按钮1
    console.log( $("input[type='button']").prop("value"));//获取button的value值

区别：在对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
而对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
官方建议使用:

删除元素的属性

 	 $("input[type='button']").removeAttr("data-src");
 	 $("input[type='button']").removeProp("data-src");//只能删除自定义属性
     console.log(btn.attr("data-src"));

元素内容的操作

	$("#block").html("热");//设置文本内容
    $("#block").text("热");//设置其中所有内容，相当于设置了innerHTML
    
	console.log($("#block").html());//获取它的html
    console.log($("#block").text());//获取它的文本值

操作表单元素的值val()

	$("#txt").val("12345");//设置值
    console.log($("#txt").val());//获取值

操作dom元素的css css()

	$("#txt").css("borderColor", "#090a0a");//设置css样式
    var color = $("#txt").css("borderColor");//获取样式，输出的颜色值，一般为16进制

	颜色名称和16进制的转换
	var col = (function (c) {
        var a = c.split(",");
        var r = parseInt(a[0].split("(")[1]);
        var g = parseInt(a[1]);
        var b = parseInt(a[2].split(")")[0]);
        //#690a0a   16位置   rgb  r:69 g:0a b:0a
        return "#" + ((r << 16) + (g << 8) + b).toString(16);
    })(color);
    console.log(col);
	
	同时设置多个css样式
	$("#txt").css({
        width: "",
        height: ""
    });

类名称的添加，追加名称

 	$("#btn").addClass("btninfo");
    $("#btn").addClass("btninfo btnlist");  /*添加多个类*/
    $("#btn").removeClass("btndata btnlist");  /*移除类名称*/
  	$("#btn").removeClass();   /*全部移除*/
    $("#btn").toggleClass("btndata"); /*类的切换 toggleClass() 从有到无，从无到有*/

jquery操作子父节点的问题

 	console.log($("ul").children()[0]);//后面加方括号，可转换为dom方法
    console.log($("ul>li").first());//第一个
    console.log($("ul>li").last());//最后一个
    console.log($("ul>li").eq(0));
  	console.log($("ul>li").first().siblings(".lilist")); /*找同胞元素*/

  	console.log($("ul>li").eq(1).prev());//找当前元素的前一个元素
    console.log($("ul>li").eq(2).prevAll("li"));//前面的所有
   	console.log($("ul>li").eq(1).next()); //找当前元素的下一个元素
    console.log($("ul>li").eq(1).nextAll("span"));

   console.log($("ul>li").filter(".lidata")) /*filter() 过滤元素*/
   console.log($("ul>li").eq(0).is(".lilist")); /*is() 判断当前对象是不是*/

尺寸问题

	console.log($("body").width());//可视区域
    console.log($("body").innerWidth());//可视区域和内边距 padding
    console.log($("body").outerWidth());//内边框和边框